Vue_Share_Mol
Vue_Share_Mol
@(我的分享)
按照惯例，扯闲篇
本次分享建立在一个假设为前提，假设你们都已经熟练地使用jquery。
伟大的jQuery
不得不承认，jquery是一个非常伟大的发明，jquery有非常强大的选择器，比起getelementById来，不知道要好用多少，而且它还为开发人员做了很多浏览器兼容方面的工作，最明显的例子就是jQuery.Ajax()。有了这个ajax方法，你不用再云根据浏览器内核的不同而创建不同的对象发送请求。
jQuery是基于DOM来操作的。也就是说，我们在操作页面的时候，一定是先获取到了某个dom元素，再对这个dom进行操作。比如我想找到页面上一个id为"mollable"的label元素，并修改的显示文字为“修改后的文字”，我需要这样做：
$('label#mollable').html('修改后的文字');
这样看起来很好，目的明确、操作清晰。
坑
有很多时候，我们需要把数据从服务端获取过来，再加载到前端。这个时候，我们就需要大量的拼接HTML。比如，我需要在ul上面新增一条名为“《大话代码架构》”的记录。
原始HTML如下：
<ul>
<li>《春风八百里，不如遇见你》</li>
<li>《ASP.net入门很简单》</li>
</ul>
我要的js代码看起来像是这样：
$('<li>《大话代码架构》</li>').apendTo($('ul'));
这是比较简单的代码。在很多时候，我们要增加的dom元素远远没有这么简单。那么，html拼接的过程就极有可能出错。 这时，出现了“模板引擎”，我以前常用的模板引擎是arttemplate。当然，也有其它非常优秀的引擎框架。
以arttemplate说明
所谓模板引擎，大家一定听说过，像C#里面有伟大的NVelocity，或者你们使用过的一些CMS模板也可以算是模板引擎。模板引擎的思想，就是先搞一个模板，然后再这个模板上挖坑，最后用数据来填坑。下面，我将以arttemplate来说明.
假设我有这样一个页面，这个页面上要展示人员的信息，人员信息包含姓名、性别、年龄。
<div id="container">
<ul id="ulPersonList">
<li>
<div>
<img src="头像" />
<label>姓名</label>
<label>性别</label>
<label>年龄</label>
</div>
</li>
</ul>
</div>
接下来，我要根据这个页面来挖坑了，挖坑的原则很简单，就是把变化地的方都找出来，用“占位符”来代替。比如上面代码中的头像、姓名、性别、年龄这几个地方都是会变的，所以我就把他们用用占位符来表示，如下：
<script id="test" type="text/html">
<li>
<div>
<img src="{{headImg}}" />
<label>{{name}}</label>
<label>{{gender}}</label>
<label>{{age}}</label>
</div>
</li>
</script>
第三步，我要把数据填充到模板中的“占位符”上。
// 定义一个数据
var data = {
headImg:"/img/1.jpg",
name:"testName",
gender:"男",
age:32
};
// 调用arttemplate的template方法，传入数据、模板，得到结果字符串
var html = template('test', data);
// 将得到的字符串拼接到ul中
$(html).appentTo($('ul'));
到这里为止，模板引擎的示例就演示完了。可以看到，核心代码是
// 调用arttemplate的template方法，传入数据、模板，得到结果字符串
var html = template('test', data);
这句话的目的是得到一个字符串，这个字符串就好像我们自己写字符串拼接代码一样。只不过有了arttemplate的帮助，我们可以借助模板来得到目的字符串。但，本质还是要得到一个字符串，让后面的代码把得到的字符串拼接到dom元素上。
进入Vue
引言
上面我们提到了jquery的dom操作和模板引擎。如果程序员使用jquery或模板引擎来绘制页面，那你必须同时关心前端页面元素和后台数据。有没有一种技术，让我们像asp.net mvc一样，只需要进行数据绑定，就可以进行页面显示了。
PS:这里我的描述不太清晰，我的目的是这样的，我在cs文件中定义一个对象ViewBag.Num=1，我以页面中可以通过@ViewBag的形式将数字1显示在页面上。这就是我想表述的内容。
这就是一种mvc思想，也有人叫mvvm，但是我不想解释得那么复杂（主要是我不会）。让数据的变化反应到页面上，也让页面的变化反应到数据上。
eg.
<div id="el">
<input type="number" v-model="fir" />+
<input type="number" v-model="sec" />=
<label>{{parseInt( this.fir)+ parseInt( this.sec)}}</label>
</div>
<script>
// 创建一个Vue对象 它的构造函数是之样的：new Vue(参数)
// 只不过参数是一个对象而以。
new Vue({
el:"#el",// 指示Vue容器是一个id为el的标签
data:{fir:0,sec:0,result:0}// vue中用到的数据。
});
</script>
运行效果：
们把js代码中data看做是mvc中的Model。把<div id='el'></div>看成是视图，这样就完成了“双向绑定”。
这就是一个简单的vue示例,有没有发现，我们已经不用再使用“先获取dom元素，再进行数据绑定”的方式来显示数据了。
如果我们把页面切分成两部分。第一部分是<div id="el"></div>。第二部分是data:{...}。那么，完成可以由两个不同的人来未完成这两个部分。它们之间没有太多的耦合。烈军属data的人，只负责提供数据，不需要关心页面展示。而写页面的人，只需要把“字段”展示到界面上，不需要关心这些字段是怎么来的。
mvc中，还有一个很重要的部分，叫controller，在vue中，对应于methods和cumputed。
先来看metchods。
new Vue(
{
el:'#el',
data:{fir:0,sec:0,result:0},
// 我定义了methods中包含元素,注意，methods不是我创造的，而是vue规定的
methods:{
// 定义一个名为clickAdd的函数，这个函数用来把Model中的fir和sec相加，
// 并把结果赋给Model中的result
clickAdd:function(){this.result=this.fir+this.sec},
}
}
);
methods是一个元素，这个元素被定义在构造函数的输入参数中。methods这个元素是一个对象，这个对象可以包含0个或多个函数。像上面的代码就包含了一个函数。接下来看看这个methods怎么用。
按照上面所说的，我们再写一个页面
<div id='el'>
<input type="number" v-model="fir" />+
<input type="number" v-model="sec" />
<button type='button' onclick='showResult()'>=</button>
<label>{{result}}</label>
</div>
这样写完以后，浏览器会告诉你，showResult没有定义。这里需要注意，你写在vue块（我把<div id='el'></div>所包含的代码块叫“vue块“）中的属性或值，一定要符合vue的风格。幸好，我们只需要记住两种风格就可以。
风格1-内容
通常来说，我们指定一个label的内容会是这样：
<label>{{字段}}</label>
可以看到，语法结构就是两个大括号包含的一个字段名，这个字段一定要在data属性中定义好。
new Vue({
el:'#el',
data:{字段：'mol'}
});
风格2-属性
如果我要指定一个属性，如点击事件的属性，我应该这样做：
<label v-on:click="myClick()"></label>
当然，你非要使用onclick属性来定义单击事件的话，也无可厚非，只不过这样的话，你就不能操作vue内部的对象了。
注意,v-on:click="myClick()"中的myClick这个函数一定要在methods中定义。
new Vue({
el:"#el",
data:{},
methods:{
myClick:function(){
这里是你要做的动作
}
}
});
入门需要注意的重点
v-show和dislay属性
我们都知道，控制一个元素是否显示，可以设计这个元素的style="display:值"，值为block时，显示；值为none时，元素不显示。而在vue中，有一个属性叫v-show，它也是控制元素是否显示的。也就是说，下面两句代码的效果看起来是一样的。
<div style="display:none;">我要想被隐藏</div>
<div v-show="false">我也想要被隐藏</div>
之所以是“看起来是一样的”，是因为：display:none的作用是，将dom元素的可见属性设置为none;而v-show="false"是根本不绘制这个dom元素。可以通过查看网页源码来验证我说的是否正确。
if & for
if和for就不用我解释他们是干什么的了，直接上代码：
<div v-if="myage<12">小学</div>
<div v-else-if="myage<16">初中</div>
<div v-else-if="myage<19">高中</div>
<div v-else-if="myage<23">大学</div>
<div v-else="">工作</div>
<hr>
<ul>
<li v-for="p in team">
姓名：{{p.name}}<br>
年龄：{{p.age}}
</li>
</ul>
<script>
var vueNode=new Vue({
el:"#app",
data:{
myage:32,
team:[{name:'mol',age:32},{name:'李老板',age:33},{name:'嚣张哥',age:34}]}
});
</scrit>
深入mvc
可以看到，vue的属性都是以v-开头。接下来，我们体验一下，vue的mvc思想及双向绑定。
前面我们已经通过for循环来展示了一个列表，它看起来像是这样：
加li，应该怎么做。
熟悉jquery的你，一定会说，先获取到ul，再进行元素的添加，它看起来像是这样：
$('ul').append('<li>姓名：小曾，年龄：奔三</li>');
这样做完全没有问题。但这样做有一个问题，就是前端和数据之间是“强耦合”的。我们更希望有这样两个程序员，一个人写后端（数据），另一个人写前端（页面）.而vue就可以达到这样的效果。
步骤1：前端人员写页面
<div id='el'>
<ul>
<li v-for="p in team">
姓名：{{p.name}}<br>
年龄：{{p.age}}
</li>
</ul>
<!--下面是让用户动态输入信息的地方-->
姓名：<input type="text" v-model="newName" />
<br>
年龄：<input type="number" v-model="newAge" />
<br>
<button v-on:click="addUser">添加</button>
</div>
步骤2：后端人员写数据
new Vue({
el:"#app",
data:{
team:[{name:'mol',age:32},{name:'李老板',age:33},{name:'嚣张哥',age:34}],
newName:'',newAge:''
},
methods:{
addUser:function(){ this.team.push({name:this.newName,age:this.newAge});
}
}
});
完事了！
看见木有？后端工程师只需要操作data中定义的数据就可以了。当team数据发生变化时，页面上的展示也相应地发生了变化，看起来像是这样：
总结
做为一个.net出身的程序员来说，可能无法理解，做为一个“后端程序员”，怎么可能简单地写几行js就了事？再说了，js不应该是前端工程师的责任吗？
首先，前端工程师的js普遍没有程序员的好；其次，js是一种很牛X的开发语言。现在有很多网站或应用都可以直接使用js来开发。我打算下次分享一个叫electro的技术。它就是用js来编写应用的一种技术。
浙公网安备 33010602011771号