Vue指令

Vue指令

1.1 v-text指令

语法：v-text=”msg”指令是用来展示文本的，简写为{{ msg }}

注意：{{}}在刷新的时候会有短暂的原样展示。

解决：使用v-cloak指令+css样式对{{}}原样展示进行隐藏。

1.2 v-html指令

语法：v-html=”msg”

注意：指令会进行标签的解析，而v-text只解析数据成文本，对标签进行字符展示。

1.3 v-pre指令

语法：{{ this will not be compiled }}

注意：不解析数据，直接原样展示

1.4 v-once指令

语法： {{msg}}

注意：只会对元素或者组件渲染一次，随后的渲染会跳过。

1.5 v-bind指令

语法：v-bind:attr=”msg”指令用来绑定标签的属性，简写为: attr=”msg”

注意：msg this.msg vm.msg this.data.msg

1.6 v-if指令

1.6.1 单路分支

实例：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>

1.6.2双路分支

实例：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

1.6.3 多路分支

实例：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

1.7 v-show指令

实例：

<div v-show="flag">
  A
</div>

用法：

根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

V-show与v-if的对比（重点）：

1.初始状态时：

v-show无论表达式真假都会进行标签的渲染，渲染开销大

v-if它是表达式为真则进行渲染，表达式为假时不进行渲染，渲染开销小

2.切换时：

​ v-show因为元素已经加载，所以进行切换时切换状态的速度会快，切换开销小

​ v-if 在切换状态的时候，会对元素进行重建和销毁，所以切换的速度慢，切换开销要大

3.多条件时：

​ v-show不支持复杂的多条件分支，所以这时候只能使用v-if指令

总结：

在切换频繁并且条件分支单一的情况下选择v-show，其他情况选择v-if。

v-for指令

循环渲染的目标可能是一个数组，字符串，对象， number类型。

数字： v-for=” num in 10 ”

字符串： v-for=”str in ‘abcdefg’ ”

数组： v-for=”item in [1,2,3,4,5]”

对象： v-for=”val in {name:’zmh’,age:23,sex:’man’}”

v-for语法还可以进行多参数延伸，如：

数组：

<div v-for="(item, index) in items"></div>  
对象：
<div v-for="(val, key) in object"></div> 
<div v-for="(val, key, index) in object"></div>

如有数据嵌套需要进行多层循环，语法：

<div v-for="(item, index) in items">
	<div v-for="(val, index) in item">
		{{val}}
</div>
</div>

v-on指令

语法：

<button v-on:click = 'fn'  > 点击 </button>

简写：

<button @:click = 'fn'  > 点击 </button>

事件对象：

eventHandler(*e*){
      *console*.log( e )
 }

事件传参：

<button @:click = 'argHandler("hi")'>事件传参</button>

事件对象及传参：

<button @:click = 'arg2Handler($event,"hi")'>事件传参2</button>

事件修饰符：

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• e - (2.3.0) 以 { passive: true } 模式添加侦听器

.stop示例：

<div class="box3" v-on:click.stop = 'box3Handler'></div>

Vm的$on,$emit,$off

监听当前实例上的自定义事件.passiv

vm.$on('test', function (msg) {   console.log(msg) }) 

触发事件

vm.$emit('test', 'hi') // => "hi"

移除自定义事件监听器：

vm.$off('test')

v-once指令

语法：

<button v-on:click.once = 'onceHandler'>once</button>

用途：事件只执行一次，就不再执行

v-model指令

用法：v-model是对表单元素进行双向的数据绑定，如input, textarea,option。

语法：

<input type="text" v-model = 'msg'>

扩展：

怎么用单向数据绑定实现双向的数据绑定的效果

<input type="text" :value = 'msg' @input = 'fn'> 

*var* vm = new Vue({

     el: '#app',

     data: {

       msg: 'hello vue.js'

     },

     methods: {

       fn(*e*){

        //  this._data.msg = 'sdfsf'

        this.msg = e.target.value

       }

     }

   })

自定义指令

有全局定义和局部定义两种方式，推荐使用全局定义，项目中可以多次使用。

\1. 全局定义

        Vue.directive(directiveName,options||function)

\2. 局部定义

        new Vue({

          directives: {}

        })

想法需求：

如何实现网页一加载就将光标定位在input输入框内？

答案：

<div id="app">
    <input type="text" v-focus>
  </div>
//全局注册指令
 Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (element) {
    // 聚焦元素
    element.focus()
  }
}) 
new Vue({el:'#app'}) 
//注册局部指令为例  
new Vue({
    el: '#app',
    directives: {
      focus: {
        inserted(element ){
          element.focus()
        }
      }
    }
  })

扩展

非响应式的特例

• 数组的下标

• 数组的length

  解决方法：

• 解决数组的下标

        Vue.set( target, key, newValue )||  this.$set(target, key, value)

• ​ 解决数据的length

          this.arr.splice(0)
  

列表渲染的key设置

//html--code
<li v-for = '(list,index) in lists' v-bind:key = 'list.id' >

//js--code
new Vue({
    el: '#app',
    data: {
      lists: [
        {
          id: 1,
          name: '电脑'
        },
        {
          id: 2,
          name: '手机'
        },
        {
          id: 3,
          name: '电视机'
        }
      ]
    },
    methods: {
      colorChange(e){
        //操作DOM 不建议的
        e.target.parentNode.style.background = 'red' 
      },
      del(index){
        this.lists.splice(index,1)
      }
    }
  })

面试题（重点）

1:Vue深入响应式的原理是什么？

答： data发生改变视图会对应发生改变,用到了es5的object.defineProperty

• setter 被调用时用watch来监听变化
• 使用 Object.assign()来解决变化检测问题
• 异步的更新队列

2:双向数据绑定的原理？

• 实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

• 实现一个订阅者Watcher，每一个Watcher都绑定一个更新函数，watcher可以收到属性的变化通知并执行相应的函数，从而更新视图。

• 实现一个解析器Compile，可以扫描和解析每个节点的相关指令（v-model，v-on等指令），如果节点存在v-model，v-on等指令，则解析器Compile初始化这类节点的模板数据，使之可以显示在视图上，然后初始化相应的订阅者（Watcher）。

• 总之，其底层也用到了es5的Object.defineProperty的get和set方法