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

r囧r小猫 2022-05-26 12:14 273阅读 0赞

*  内置指令
    
     *  v-text 输出文本
     *  v-html 输出HTML
     *  v-bind 标签属性
     *  v-on 事件绑定
     *  v-if 显示隐藏
     *  v-model 双向数据绑定
     *  v-for 遍历
     *  v-pre 原始输出
     *  v-cloak 闪烁
     *  v-once
 *  自定义指令
    
     *  全局指令定义
     *  局部指令定义

# 内置指令 #

## v-text 输出文本 ##

*  输出html代码

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

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

## v-html 输出HTML ##

*  输出html代码

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

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

## v-bind 标签属性 ##

*  设置标签属性

## v-on 事件绑定 ##

*  绑定事件

*  阻止默认行为

## v-if 显示隐藏 ##

*  `v-show` 和 `v-hide` 控制元素的 display

*  `v-else-if` 和 `v-else`

## v-model 双向数据绑定 ##

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

## v-for 遍历 ##

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

## v-pre 原始输出 ##

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

## 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>
    
    
    <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) {
                }
            }
        }
    })