关于vue 常用指令
关于vue 常用指令
vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。
Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
首先创建一个vue实例，并在创建实例的过程中传入一个对象。
该对象的第一个属性名为el，它的值是我们需要渲染的目标标签，我们通过属性查找定位这个标签。
该对象的第二个属性名为data，里面就是我们要渲染给浏览器标签的数据，另外还有其他属性，我们在后面的章节中一一介绍。
看了上面的代码，可能大家觉得vue也不过如此，原生js代码两行就能完成的事情，vue需要6行代码来实现，还是原生js比较简洁，其实，上面的代码只是给大家演示了挂档的技术，究竟是汽车比较快，还是骑马比较好，我们通过后面的不断学习，来解释这个问题。
接下来，我们来介绍踩油门的技术。
上面的代码中，我们演示了如何将数据渲染进DOM标签，vue帮助我们找到标签并且渲染，对于程序员来说，我们不再需要重复的找标签，绑定事件，然后再找标签，再绑定事件这样的工作了，vue帮我们都做好了，我们只需要关注具体的数据，以及业务逻辑。这也是vue给自己的定位，数据模板引擎。
它是引擎，引擎帮助我们驱动数据渲染到模板。
所以，vue的大部分内容，都是为了渲染数据用的，接下来，我们介绍vue中用来渲染数据的常用指令。
重点
在VUE中 v-xxx的行内属性 我们统称为VUE指令，这些指令都是基于自定义属性设置的，只不过在VUE上有特殊含义，在vue加载成功并进行处理时，会安装相关规则解析和渲染视图。遇到对应的指令实现对应的功能
VUE指令分两种，有原生对应的，无原生对应的
有原生对应的
v-text给非表单元素设置内容 相当于小胡子语法 ，会把所有内容都当作文本。 有时候可以代替{{}}小胡子写法，因为在vue没加载完成前，页面会显示{{xxx}} 体验不好
v-html给非表单元素设置 相当于原先的innerHTML，对标签自动识别
v-for v-for =’ (值，index) in vue变量’ 值代表数组中当前项，index是索引 这两个变量只能使用在v-for标签上及其内部
无原生对应的
v-bind 给原生内置属性动态绑定数据，专门用来处理行内属性的指令（css style src）一般缩写：
v-cloak 用来解决小胡子显示问题 可以使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。搭配css使用，
比如v-cloak:{display:none}
v-once 绑定数据是一次性的，后面无论数据怎么更改，视图也不会重新渲染，vue对有这个指令的元素只渲染一次。可用于优化速度
v-pre 告诉VUE这个标签和子标签都不用渲染，提高vue编译效率
VUE指令之if,show，model
重点
v-if 控制当前元素是否在结构中加载，控制的是组件的加载和卸载操作=》DOM的增加和删除
还有v-else v-else-if 使用时中间不能穿插其他标签
v-if 和v-show区别
条件不成立时 v-if是整个标签都不加载，v-show是加载了标签同时设置了display:none
性能消耗方面 v-if有比较大的切换开销 v-show有比较大的初始加载开销
在频繁的切换中，v-show比v-if性能低一点
v-model表单和数据的相互绑定
原理
先把数据绑定给表单元素，一般把数据赋值给表单元素的value.监听表单元素内容改变，内容改变后会把对应数据也改变。数据改变，视图中用到数据的地方会重新渲染
表单v-model使用
按照v-model进行分组，单选框的数据是一个值，复选框的数据是一个数组，每一个框都有自己的value,谁被选中，值就是被选中元素的value值，相反值是多少，
对应的元素也会被默认选中