vue指令

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

• v-text
• v-html
• v-show
• v-if/v-else/v-else-if
• v-for
• v-bind
• v-module
• v-show
• v-pre
• v-cloak
• v-once

作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为

v-text、v-html、v-cloak指令

v-text: 添加文本节点，相当于innerText
v-html: 添加HTML结构，相当于innerHTML
v-cloak: 解决插值表达（ {{…}} ）闪烁问题，隐藏未编译的 Mustache 标签直到实例准备完毕

* {
      margin: 0;
      padding: 0;
    }

    /* 解决插值表达式闪烁问题 */
    [v-cloak] {
      display: none;
    }

    .box:nth-child(odd) {
      background-color: aqua;
    }

<div id="app">
  <div class="box" v-cloak>---{{msg}}---</div>
  <div class="box" v-text="msg">-------------------</div>
  <div class="box" v-html="msg2"></div>
</div>
<script src="./lib/vue@2.6.10.js"></script>

var vm = new Vue({
  el: '#app',
  data: {
    msg: 'hello Vue',
    msg2: '<h4>hello Vue</h4>'
  }
})

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

v-bind指令

插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令

• 作用：动态的设置html的标签属性
• 语法：v-bind:title="msg"
• 简写：:title="msg"
• 注意点: v-bind 访问的值, 必须在 data 中存在

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-model指令

v-model: https://cn.vuejs.org/v2/guide/forms.html

• 作用：在表单元素上创建双向数据绑定
• 说明：监听用户的输入事件以更新数据
• 思考：如何在JS代码中获取到文本框的值？？？

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

双向数据绑定

• 双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
  • 数据的改变会引起DOM的改变
  • DOM的改变也会引起数据的变化
• 原理：数据劫持，Object.defineProperty中的get和set方法
  • getter和setter：访问器
  • 作用：指定读取或设置对象属性值的时候，执行的操作
• 注意：Object.defineProperty方法是ES5中提供的，IE8浏览器不支持这个方法。因此，Vue不支持IE8及其以下版本浏览器
• Vue - 深入响应式原理
• MDN - Object.defineProperty()

/*
  语法
*/
var obj = {}
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg 执行的操作
  set: function () {},
  // 读取 obj.msg 执行的操作
  get: function () {}
})

Vue双向绑定的极简实现

• 剖析Vue原理&实现双向绑定MVVM

<!-- 示例 -->
<input type="text" id="txt" />
<span id="msgBox"></span>

<script>
const txt = document.getElementById('txt')
const msgBox = document.getElementById('msgBox')
const obj = {}

// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg 执行的操作
  set: function (curVal) {
    txt.value = curVal
    msgBox.innerText = curVal
  }
})

// 监听文本框的改变
txt.addEventListener('input', function (event) {
  obj.msg = this.value
})
</script>

v-on指令

https://cn.vuejs.org/v2/guide/events.html

• 作用：绑定事件
• 语法：v-on:click="say" or v-on:click="say('参数', $event)"
• 简写：@click="say"
• 说明：绑定的事件从methods中获取
• 案例：跑马灯

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

vue 中获取事件对象

1. 如果绑定事件时没有传参, 在绑定的函数中, 可以直接接收到 event

   <button @click="doSomething">按钮</button>
   

   const vm = new Vue({
   	// ...
     methods: {
       doSomething(e) {
         console.log(e)
       }
     }
   })
   

2. 如果绑定事件时传参了, 在模板中, 通过 $event 可以获取到事件对象

   <button @click="doSomething(100, $event)">按钮</button>
   

   const vm = new Vue({
   	// ...
     methods: {
       doSomething(money, e) {
         console.log(e)
       }
     }
   })
   

3. 通过 e.target 可以拿到触发事件的 dom 对象

事件修饰符

• .stop 阻止冒泡，调用 event.stopPropagation()
• .prevent 阻止默认行为，调用 event.preventDefault()
• .capture 添加事件侦听器时使用事件捕获模式
• .self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
• .once 事件只触发一次

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

自定义按键修饰符：Vue.config.keyCodes.xxx = keyCode

v-for

• 作用：基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

key属性

• 推荐：使用 v-for 的时候提供 key 属性，能够提升列表渲染的性能
• 说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
• vue key
• vue key属性的说明

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

v-if 和 v-show

• 条件渲染
• v-if：根据表达式的值的真假条件，销毁或重建元素
• v-show：根据表达式之真假值，切换元素的 display CSS 属性

<p v-show="isShow">这个元素展示出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>

v-pre

提升性能
说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

v-once

提升性能
说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>

v-slot插槽

常在组件中使用，实现组件定制化
v-slot插槽