vue指令

• 解释：指令 (Directives) 是带有 v- 前缀的特殊属性，可以在html标签中使用，可以看成特殊的html属性
• 作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为

v-bind指令

• 描述：插值表达式不能用在html的属性上，如果想要动态的设置html元素的属性，需要使用v-bind指令
• 作用：动态的设置html的属性
• 语法：v-bind:title="msg"
• 简写：:title="msg"

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

v-model指令

v-model: cn.vuejs.org/v2/guide/fo…

• 作用：在表单元素上创建双向数据绑定
• 说明：监听用户的输入事件以更新数据
• 思考：如何在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指令

cn.vuejs.org/v2/guide/ev…

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

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

事件修饰符

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

按键修饰符

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

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