Vue基础（Vue的原生指令）

指令

• 在使用指令时，会先找数据类型中的值，如果数据类型中没有，那么就去找data或methods中的属性名；如果没有，就报错
• 指令： v-开头，放在元素的行间属性，有着特殊意义的一些词；

写在html标签行内的指令:

• v-model : 一般用于表单元素；将data中数据放在input框中，当input值发生改变，数据也会跟着发生改变；
• input返回的数据格式固定为字符串

• 在单选框中，被选中的那一项，会把input框的value值赋值给v-model的值;
如果v-model的值和value值相同单选框就会被选中，其他的单选框就不会被选中了
• 单选框的v-model的值必须用一样的data属性名
• 多选框：v-model可以绑定一个数组，那么当该项被选中时，会把该input框中value放到数组里面;
如果多选框v-model绑定的不是一个数组，那么默认会将该值转成布尔值，控制所有复选框的选中状态

• v-text : 可以将data中的文本放入元素中
• v-html : 可以将data中的文本放入元素中,可以识别标签

• v-show : 通过设置布尔值来控制元素是否显示，如果是true，则显示，false，则隐藏；
如果不是一个布尔值，那么会默认转布尔；通过设置元素的display属性来控制是否显示；

• v-if ： 控制元素的显示隐藏；如果不是布尔，会默认转成布尔；如果是false，直接删除了原有的元素；
• v-else-if
• v-else

• v-for : 循环,需要创建什么元素，就把v-for放在哪个元素身上，可以循环数组，字符串，数字，对象
• v-for="(item,index) in arr" item代表数组的每一项,index代表数组的索引 arr是data中一个变量
• v-for后面要加key
参考网址：https://www.jianshu.com/p/1896789fc8a8

• v-on : 给元素绑定事件的指令 (v-on:可以简写成@)
• 绑定事件时，可以有小括号，也可以没有
• 如果有小括号，但是没有传参，那么e(第一个参)默认是undefined
• 如果需要事件对象，并且需要传参，那么需要在绑定时使用$event进行占位

• v-bind : (可以简写成 : ) 将普通的属性转成动态的属性，可以去获取data中的数据，v-bind:class :属性值可以写成一个对象，里面的属性名是class的名字，属性值时true，该样式有效，false该样式无效；如果是数组的话，就会去获取data中的属性名对应的属性值，就是class的名字
• v-once : 只渲染一次，以后更改数据页不再更新了，当写静态结构时，可以使用这个指令
• v-pre : 跳过这个元素的编译，加快了编译过程，可以用来显示原始 Mustache 标签
• v-cloak : 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

Vue的指令

表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 { { }} 语法，而是需要 指令

在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用，vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令

• 内容输出
• 循环
• 逻辑
• 属性绑定
• 事件
• 其它
  

内容输出

通过 { { }} 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现 { { }} ，vue 提供了几个指令来解决这个问题

指令中的表达式不需要使用 { { }}

v-text

弊端：v-text 会填充整个 innerHTML，会把整个title填充掉，p再写数据也没用

v-cloak（这种写法用的比较多，结合{ {}}和v-text的优点）

这样写可以避免html加载完前出现{ { }}
需要配合 css 进行处理

v-html

为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，通过 v-html 可以让内容作为 html 进行解析

v-once

只渲染元素和组件一次，后期的更新不再渲染

v-pre

忽略这个元素和它子元素内容的编译

逻辑处理

v-show

根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）

适用于状态切换比较频繁的情况

v-if

根据表达式的值（布尔值），创建或销毁元素

适用于状态切换不频繁的情况

v-else / v-else-if

与 v-else 配合

v-else / v-else-if

与 v-else 配合