vue的内部指令

指令

• 解释：指令 (Directives) 是带有 v- 前缀的特殊属性
• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-text

• 解释：更新DOM对象的 textContent

    <h1 v-text="msg"></h1>

v-html

• 解释：更新DOM对象的 innerHTML

    <h1 v-text="msg"></h1>

v-bind

• 作用：绑定属性
• 语法：v-bind:title="msg"
• 简写：:title="msg"

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

v-on

• 作用：绑定事件
• 语法：v-on:click="say" or v-on:click="say('参数', $event)"
• 说明：绑定的事件定义在methods

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

按键修饰符

• 说明：在监听键盘事件时，Vue 允许为 v-on 在监听键盘事件时添加关键修饰符
• 键盘事件 - 按键修饰符

// 只有在 keyCode 是 13 时调用 vm.submit()
@keyup.13="submit"
// 使用全局按键别名
@keyup.enter="add"

自定义键值修饰符

// 通过全局 config.keyCodes 对象自定义键值修饰符别名
Vue.config.keyCodes.f2 = 113
// 使用自定义键值修饰符
@keyup.enter.f2="add"

v-model

• 作用：在表单元素上创建双向数据绑定
• 说明：监听用户的输入事件以更新数据
• 案例：计算器

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

双向数据绑定的原理分析

• 双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
  • 数据的改变会引起DOM的改变
  • DOM的改变也会引起数据的变化
• 原理：Object.defineProperty中的get和set方法，以及setter与getter访问器
• 作用：指定读取或设置对象属性值的时候，执行的操作

Vue双向绑定的极简实现

<!-- 示例 -->
<input type="text" id="txt" />
<span id="sp"></span>
<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'),
    obj = {}
// 给对象obj添加msg属性，并设置setter访问器
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg  当obj.msg反生改变时set方法将会被调用  
  set: function (newVal) {
    // 当obj.msg被赋值时 同时设置给 input/span
    txt.value = newVal
    sp.innerText = newVal
  }
})
// 监听文本框的改变 当文本框输入内容时 改变obj.msg
txt.addEventListener('keyup', function (event) {
  obj.msg = event.target.value
})
</script>

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>

key属性

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

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

样式处理 -class和style

• 使用方式：v-bind:class="expression" or :class="expression"
• 表达式的类型：字符串、数组、对象
• 语法:

<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===> 解析后
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>解析后
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后
<div class="active text-danger"></div>

--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定义的对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if 和 v-show

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

提升性能:v-pre

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

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

提升性能：v-once

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

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

提升性能：v-cloak

• 说明:在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>