vue里面的一些指令

v-model只能用在表单标签里面----表单，文本，下拉，复选，单选

下拉菜单要绑定在select上

复选框的话是返回的布尔值
非数组  关联的是checked属性---就是获取的布尔值 
数组的话 关联的是复选框value的属性---就是获取value值

--------------------------v-model里面的修饰符----------------------

 v-model.number    -----------转换成数字类型

 v-model.trim-------------------去除首位空格

 v-model.lazy -------在change而非input触发

----oninput事件是在用户每次输入时触发
onchange事件是在输入框失去焦点时候触发----

-------------------v-html---v-text------------------------------
v-html="vue数据变量" -----当标签

v-text="vue数据变量" ----当普通的数据

注意：会覆盖插值表达式里面的内容

-------------------v-show和v-if---------------

-----控制标签的显示和隐藏
 v-show和v-if

- v-show 用的display:none隐藏   (频繁切换使用)
- v-if  直接从DOM树上移除

- v-if还可以用更加高级的用法，v-if    v-else

v-if 表示的是设置的条件符合则显示 
 v-else表示的是否者就显示这个

---------切换案例------
首先想到的步骤是，我们要有一个思维，现在vue做的是数据驱动视图
所以用变量来控制视图的显示

-------v-for  循环----------------

可以循环数组，对象，数字
谁循环写谁身上

数组里面的 一些方法，比如改变原数组，更新的话，for循环不会显示出来
1.数组变更方法，就会导致v-for更新，页面更新 -----会改变原数组---

- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

2.如果返回的是新数组的 话，就要采用覆盖的方法，或者$set（）--数据就会显示出来

- slice()
- filter() ------------------------------这三个典型的就是返回新数组，就是因为返回新的数组，所以就不会改变原始数组
- concat() 
-------------------
$set(里面有三个参数)
参数1: 更新目标结构
      // 参数2: 更新位置
      // 参数3: 更新值

----数组里面的一些方法，返回新的数组的话不能实时就地更新，这时候就需要覆盖原值，或者$set方法
总结:  改变原数组的方法才能让v-for更新

索引的话还是会原地更新---因为 还是替换原来位置的索引，如索引添加一个新的索引1，那还是占了以前1，更新的是下面的内容

有key就用key来比较------提高更新的性能

口诀: key的值有id用id, 没id用索引

------v-for如何提高性能----准备虚拟dom

dom树相当于是节点---网页上
-----
***虚拟---就是一个js对象-节点信息-属性内容信息，保存在内存里面的一个js对象
----
虚拟-真实-渲染

虚拟dom的好处是提高了dom的性能，减少不必要的渲染，更新---只包含有用的属性