Web App开发--vue.js入门与实践
1. Vue是什么
vue.js官方文档有中文版，有例子实践，非常容易入门。
vue官方对vue.js的定义是：
Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
2. Vue的特点
和其它框架（React, Angular, Ember, Knockout, Polymer, Riot）相比，Vue在渲染性能、大小与性能、灵活性、学习曲线等方面均有优势。
如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架。
3. Vue实践
安装Vue非常简单，在html文件中加载vue.js文件即可。可以到官网下载vue.js文件，放到项目/lib/目录下，再通过相对路径加载：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
-
搭建一个最小的Vue App
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM。
在html文件中贴上以下代码， {{expression}} 是Vue的表达式语法， 双括号中的变量是Vue实例内定义的变量，Vue通过数据绑定机制将变量渲染成相应的内容，然后渲染到view上：
<div id="app">
{{ message }}
</div>
利用div中的id=“app”创建相应的Vue实例：
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
创建Vue实例构造函数中的参数[el: '#app']对应html文件中的id="app"。
注意： 不能在文档的body标签中定义id，用body标签的id作为el参数创建Vue实例会失败。
<body id="app"> <!-- 不能这样用 -->
{{ message }}
</body>
-
数据和事件的绑定、渲染
Vue的指令
v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。
Vue用v-bind:tag_attribute="xxx"来绑定、渲染数据和事件， tag_attribute为html文档的标签的属性。例如：
<span v-bind:class="xxx"></span>
<span v-bind:title="xxx"></span>
v-bind:tag_attribute="xxx"也可以简写成:tag_attribute="xxx"， 例如：
<span :class="xxx"></span>
<span :title="xxx"></span>
具体地，对于下面title与message的绑定，该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”：
<span v-bind:title="message"></span>
而下面css样式class的绑定，只有Vue实例的vue_variable变量为true时才会将class1这个css类选择器挂载到span元素节点上，为false时该元素节点就没有class1这个样式：
<span v-bind:class="'class1':vue_variable==true"></span>
<span v-bind:class="'class1':vue_variable==false"></span>
当然，可以绑定多个css类选择器：
<span v-bind:class="'class1':vue_var1==true, 'class2':vue_var2==false"></span>
<span v-bind:class="'class1':vue_var1==1, 'class2':vue_var2!=2"></span>
<span v-bind:class="'class1':vue_var1<1, 'class2':vue_var2>=0"></span>
如果希望一定绑定某个css类选择器，直接设置成true即可：
<span v-bind:class="'class1':true, 'class2':vue_var>=0"></span>
条件与循环
v-if和v-show用于控制切换元素的显示，v-for用于将绑定的数组数据渲染成一个列表。
v-if的用法：
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app',
data: {
seen: true
}
})
当然可以组合多个条件控制：
<div id="app">
<p v-if="var1==true && var2==false && var3>=0">现在你看到我了</p>
</div>
v-if后面可以直接用v-else，当v-if的条件为假时即渲染v-else的元素节点：
<div id="app">
<p v-if="seen">现在你看到我了</p>
<p v-else>现在你看不到我了</p>
</div>
另一个用于根据条件展示元素的选项是 v-show 指令：
v-if vs v-show
v-show和v-if的用法大致一样，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。
注意， v-show 不支持 <template> 语法，也不支持 v-else。
- v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- 一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
如果界面渲染开销大，切换显示时可能出现一些意外的问题，有些元素节点可能无法切换显示，导致切换后的界面依然显示切换之前界面的的一些元素节点。
实际上，如果用Chrome浏览器查看源码，当条件为假时，如果用的是v-if，html源码中该元素的节点的代码彻底消失了；而如果用v-show，该元素节点的代码还保留在html源码中，只是被注释掉了。
** v-for的用法：**
App中的列表是非常常见的，web app中实现列表的方法很多。用Vue的v-for实现列表是非常简单的。下面例子中的list是Vue实例中的一个变量：
<div id="app">
<ol>
<li v-for="item in list">
{{ item.text }}
</li>
</ol>
</div>
var app = new Vue({
el: '#app',
data: {
list: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
用户输入和事件
v-on可以绑定一个事件监听器，如onfocus、onclick、oninput等事件，通过它可以调用在Vue实例中定义的方法。
v-model指令，它能轻松实现表单输入和应用状态之间的双向绑定。
<input type="tel" placeholder="请输入..." v-on:click="doClickFunc(arg)" v-on:input="doInputFunc($event)" />
v-on:可简写成@，比如：
<input type="tel" placeholder="请输入..." @click="doClickFunc(arg)" @input="doInputFunc($event)" />
var app = new Vue({
el: '#app',
data: {
},
methods: {
doClickFunc: function (arg) {
},
doInputFunc: function (event) {
},
}
})
v-model指令使得用户输入的数据能够立即更新到绑定的Vue实例的变量上，而在Vue实例的方法中更改该变量，也能及时刷新渲染到界面输入控件上，这就是界面与数据的双向绑定。
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
上面代码中，input中输入的数据能立即更新到message，而在Vue实例中更改message的值，input控件也能立即显示出新的值。
如果您有耐心阅读到这里，您就完全入门了。
