Vue的指令

最新推荐文章于 2024-02-20 09:26:32 发布

迪卢克的现任

最新推荐文章于 2024-02-20 09:26:32 发布

阅读量760

点赞数

分类专栏： vue 文章标签：前端

本文链接：https://blog.csdn.net/m0_53644435/article/details/123601764

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、如何使用vue

1、引入vue.js

2、展示HTML

</div>

3、建立一个vue对象

new Vue({

el:"#app", //表示当前这个元素开始使用vue

data:{

msg:"你好啊"

}

})

</script>

vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

二、vue的内置指令

指令	作用
v-show	根据表达式的真假值来显示和隐藏元素
v-html	插入标签
v-text	在元素中插入值
v-if和v-else	格局表达式的真价值来显示为何隐藏元素
v-for	根据变量的值来循环渲染元素
v-bind	绑定元素的属性并执行相应的操作
v-on	监听元素事件并执行相应操作
v-model	把input的值和变量绑定了，实现了数据和视图的双向绑定
v-once	可以让元素或者组件只渲染一次。一旦绑定数据就不会改变
v-pre	用于跳过这个元素和它的子元素的编译过程。对于大量没有指令的节点使用v-pre指令可以加快编译速度
v-cloak	可以解决初始化慢而导致页面闪动的问题。

三、自定义指令

通过自定义指令，我们可以对DOM进行更多的底层操作，这样不仅可以在某些场景下为我们提供快速解决问题的思路，而且让我们对vue的底层有了进一步的了解。我们可以通过Vue.directive({})或者directives:{}来定义指令

1.通过Vue.directive({})注册全局指令

钩子函数：

(1)bind: 此钩子函数只会被调用一次，可以定义一个在绑定时执行一次的初始化动作

(2)inserted: 当被绑定的元素插入到父元素中是低调用（此处的父元素不局限于document中）

(3)update: 不论被绑定的值是否发生了变化，在更新时都会被调用，

(4)componentUpdated:被绑定的元素在模板完成一次更新周期时调用，

(5)unbind: 只调用一次，元素解绑时调用

参数：

(1)el: 指令所绑定的DOM元素，可以直接用来操作DOM

(2)binding: 一个对象，包含以下属性

name: 指令的名称

value：指令绑定的值

oldValue: 指令绑定前一个值

expression: 绑定值的字符串形式

arg：传给指令的参数

modifiers: 这是一个包含修饰符的对象

<div id="app">
        <p>页面载入时，input元素自动获取焦点</p>
        <input v-focus> <!--使用的时候要添加‘v-’ -->
    </div>
   <script>
    //注册一个全局自定义指令v-focus
       Vue.directive('focus',{//focus名字可以自己来定义
        // 当元素绑定到DOM 中
           inserted:function(el){//inserted是钩子函数：的那个绑定的元素插入到父元素时触发；el参数代表的是指令绑定的元素
               el.focus()//el元素获得焦点
           }
       })
    //    创建实例
       new Vue({
           el:'#app'
       })
   </script>

2、通过directives:{}注册局部指令：

注意：此处自定义的指令只能在app这个div里面使用

 <div id="app">
        <p>页面载入时，input元素自动获取焦点</p>
        <input v-focus> <!--使用的时候要添加‘v-’ -->
    </div>
   <script>
//    创建一个实例 
    new Vue({
        el:"#app",
        directives:{
            focus:{
                inserted: function(el){
                    el.focus()
                }
            }
        }
    })
   </script>