2018-08-9-Vue指令

VM:

• vm是指MVVM中的viewmodel层.主要用来监听同步model层data中数据,将数据放在元素内容区域,即view层,从而使数据渲染到页面上;
• vm也可以通过监听元素内容区域的数据的变化,来改变data中的数据化;
  即具有双向绑定数据的能力;

插值表达式的概念:

• 插值表达式用{{}}来表示;
  例如:{{name}}
• 主要用来从data数据中取值,从而将这些数据使用差值表达式的方式放在元素内容区域渲染到页面上;
• 当data数据中对象发生改变,插值处的内容都会更新.
• 在以后开发中常用插值表达式,而不推荐使用v-text指令(v-text下文解释)
• 插值表达式写在元素内容区域,而v-text指令写在元素标签属性中.

v-text,v-html的使用场景分别是什么?

• v-text使用场景:
  渲染data数据,直接使用在标签中;
  <p v-text="name"></p>,解析成html;
  另外:
  v-text会将数据解析为纯文本,而非html;
  将数据渲染到页面上;
  会把元素内部的指令全部覆盖掉,只能用到元素属性节点上.

• v-html使用场景:
  v-html会将文本解析为真正的html;
  渲染带标签的文本,输出的结果不带标签

v-bind绑定的对象是什么?

• v-bind指令可以用来给元素动态绑定属性;
• 也可以用来给元素动态绑定样式

v-for循环指令

• v-for渲染数组:
  • 在标签属性位置写:v-for="item in dataList";
    • 其中,item表示数组中每一项;dataList表示需要遍历的数组
  • 在标签属性位置写:v-for="(item,index) in dataList";
    • 其中,index表示数组项的索引值;
• v-for渲染对象:
  • 在标签属性位置写:v-for="value in obj";
    • value表示对象键的值,名字任意;
    • obj表示要遍历的对象
  • 在标签属性位置写:v-for="(value,key,index) in obj";
    • key表示对象的那个键

注意!

问题:

• 当使用数组的length属性取改变数组的时候,不会触发视图更新;
• 使用数组下标的方式去改变数组的时候,也不会触发视图更新;

解决问题:

• 使用Vue.set(arr,index,newVal)来更新数组中的数据;
  • arr是需要改变的数组,index是数组里面的项,newVal是改变后的值;
• Array.prototype.splice()是用来删除数组中的项的;

注意!!!:

• v-for必须结合key属性使用,它会唯一标识数组中的每一项;未来数组中,每一项改变的时候,只会更新改变的那一项;
• 好处是提升性能,key的值唯一,不能重复

v-if指令和v-show指令

• 用来控制元素显示和隐藏;
• v-if/show = "布尔值";
• 区别:
  • v-if通过控制dom来控制元素的显示与隐藏;
  • v-show通过控制行内样式display:none来控制元素的现实与隐藏
• 使用场景区别:
  • 涉及到大量dom操作的时候,需要使用v-show;
  • 涉及到异步渲染时候,使用v-if

v-on指令

监听dom事件,v-on:任意事件类型(或者自定义的)="要执行的函数";

• v-on:click='要执行的函数名';

• 简写:@任意的事件类型="执行函数";(推荐使用)

• 在methods中去获取data中的属性时,需要加上this,表示 vue实例;
  例如:this.name='';

• 通过执行函数添加参数

  • @click="函数名('参数')";

• . 通过执行函数中$event传递事件对象,不能加引号,加引号相当于字符串;

  • @click="执行函数($event)"

• 事件修饰符可以给事件添加特殊功能:

  • .prevent .stop等阻止a链接跳转功能;
    @click.prevent = "执行函数";

• 可以给和按键相关的事件添加按键修饰符; .enter

v-model指令:

• 实现view层和model层数据绑定,数据同步,实时更新;
  双向数据绑定;
• 只可以以在input输入框,select和textarea几个输入的标签里使用
• <input type="text" v-model="name">
  <p>{{name}}</p>