vue常用的指令辨析

这里先说一下vue的特点，最近一直在学vue，感觉比ng好用。

Vue.js特点：

                1.简洁：页面由HTML模板+Json数据+Vue实例组成

                 2.数据驱动：自动计算属性和追踪依赖的模板表达式

                 3.组件化：用可复用、解耦的组件来构造页面

                 4.轻量：代码量小，不依赖其他库

                 5.快速：精确有效批量DOM更新

                 6.模板友好：可通过npm，bower等多种方式安装，很容易融入

vue常用的指令主要有{{}}，v-text,v-html,v-on,v-bind,v-modle，v-if，v-show，v-else，v-for

这里先区别一下{{}}，v-text,v-html,这3个。

1，{{}}，值是什么，原样输出什么。

2，v-text，同{{}}一样的效果，但是{{}}在页面没加载完时，双大括号会显示出来，比较丑陋，建议使用v-text。

3，v-html，会把值中的标签给解析，输出到页面。例如你的data里有msg："

你好

vue",那么使用v-html="msg",最终结果是你好俩字与vue是不在一行里的，但是如果用v-text="msg",那么结果会是：

你好

vue ,因为v-text是不会解析p标签的。

v-show与v-if都是控制dom的隐藏和显示，区别是：

v-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于 CSS display="block"或者display="none"进行切换。

一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用v-show较好，如果在运行时条件不大可能改变则使用v-if较好。

v-modle主要是数据的双向绑定，一般是输入框和vue对象中data里的数据双向绑定

v-bind主要是绑定一些属性，例如img的src a标签的href,等等。可以简写成 :src, :href 等等

v-on要是绑定事件，可以简写成@click

v-else一般和v-if连用，控制dom的显示和隐藏

v-for主要是用作列表渲染