Vue 学习笔记 01：指令（内置 + 自定义）

内置指令

v-text 输出文本

• 输出html代码

<div id = "app">
    <div v-text = "mes"></div>
    <!-- => hannah -->
</div>

new Vue({
    el: '#app',
    data: {
        mes: 'Hannah'
    }
})

v-html 输出HTML

• 输出html代码

<div id="app">
    <div v-html="message"></div>
    <!-- => <h1>Hannah</h1> -->
</div>

new Vue({
    el: '#app',
    data: {
        message: '<h1>Hannah</h1>'
    }
})

v-bind 标签属性

• 设置标签属性

<div v-bing:id = 'main' v-bind:class = 'red'></div>

<!-- 简写 -->
<div :id = 'main' :class = 'red'></div>

<!-- 动态切换 class -->
<div :class='{red:1}'></div>
<div :class='{blue:true}'></div>

v-on 事件绑定

• 绑定事件

<button v-on:click = 'show'></button>.
<button v-on:mouseover = 'hide'></button>

<!-- 简写 -->
<button @click = 'show'></button>
<button @mouseover = 'hide'></button>

• 阻止默认行为

<a @click.prevent href="https://csdn.net">CSDN</a>
<a @click.prevent="onSubmit" href="https://csdn.net">CSDN</a>

v-if 显示隐藏

<p v-if=true> show </p>
<p v-if="true"> show </p>
<p v-if=false> hide </p>

• v-show 和 v-hide 控制元素的 display

<p v-show=true> show </p>
<p v-hide=true> hide </p>

• v-else-if 和 v-else

<p v-if="state === '0'"> A </p> 
<p v-else-if="state === '1'"> B </p>
<p v-else> C </p> 

v-model 双向数据绑定

<div id="app">
    <input v-model="mes">
    <h1>{{ mes }}</h1>
</div>

new Vue({
    el: '#app',
    data: {
        message: 'Runoob!'
    }
})

v-for 遍历

• v-for = (val, key, index) 形参位置固定，分别为 值、键名、索引

<ul>
    <li v-for = "val in obj"> {{ val }} </li>
    <li v-for = "(val, key) in obj"> {{ key + val }} </li>
    <li v-for = "(val, key, index) in obj"></li>
</ul>

v-pre 原始输出

<p v-pre>{{message}}</p>
<!-- => {{message}} -->

v-cloak 闪烁

• 当DOM树构建好完成页面的渲染后才执行，且其须要与css一起使用

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

v-once

• 只有当DOM树第一次渲染时起作用，只渲染元素和组件一次
• 元素/组件及其所有的子节点将被视为静态内容并跳过

<!-- 单个元素 -->
<span v-once>This will never change: {{ msg }}</span>

<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>

<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>

<!-- v-for 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

自定义指令

全局指令定义

// 定义指令
Vue.directive('directiveName', {

    // 钩子函数

    bind: function (el) {
        // 初始化
    },

    inserted: function (el) {
        // 插入元素时调用
    },

    update: function (el) {
        // VNode 更新时调用
    },

    componentUpdated: function (el) {
        // VNode 全部更新后调用
    },

    unbind: function (el) {
        // 解绑时调用
    }
})

局部指令定义

new Vue({
    el: '#main',
    directives: {
        // 定义指令
        directiveName: {
            // 钩子函数
            bind: function (el) { 
            },
            inserted: function (el) {
            },
            update: function (el) {
            },
            componentUpdated: function (el) {
            },
            unbind: function (el) {
            }
        }
    }
})

钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用
• inserted：被绑定元素插入父节点时调用 (不一定已完成插入)
• update：所在组件的 VNode 更新时调用，但是可能发生在其子元素的VNode更新之前
• componentUpdated：所在组件的VNode及其子元素的VNode全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用

钩子函数参数

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive=”1 + 1” 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1” 中，表达式为 “1 + 1”。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。