Vue第二天---Vue指令

shelgi
80 阅读6分钟

Vue指令

指令（directives） 是Vue中最常用的功能，以带有v-前缀的特殊属性形式呈现，主要负责当表达式的值改变时，将其产生的连带影响响应式地作用于DOM

指令又分内置指令和自定义指令

1.内置指令

1.1 v-bind

v-bind：响应并更新DOM特性

主要用法：绑定属性，动态更新HTML元素上的属性

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>

<div id="app">
    v-bind demo
    <a v-bind:href="url">点击</a>

</div>
<script type="text/javascript">
    var vm=new Vue({
       el:'#app',
       data:{
           url:'https://juejin.cn/user/3985051634905256'
       }
    });
</script>
</body>
</html>

image-20211103105932615

1.2 v-model

v-model：数据双向绑定，用于表单输入

主要用法：用在input、select、text、checkbox、radio等表单控件或者组件上创建双向绑定；它会根据控件的类型自动选取正确的方法来更新元素，主要负责监听用户的输入时间以更新数据，并处理一些极端的例子

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <input v-model="message" placeholder="edit">
    <p>Message is :{{message}}</p>

</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            message:'v-model demo'
        }
    });
</script>
</body>
</html>

image-20211103110936356

网页中修改文本框中的内容，相应的消息也会改变

image-20211103111050047

1.3 v-for

v-for：循环指令

主要用法：基于源数据多次渲染元素或者模块

例子

如果我们仅仅只用v-for写个例子就有点过于简单了，v-for的使用例如下面这样

<li v-for="{item,index} in todos"></li>

但是我想将前面的指令融合进来，我们可以选择展示哪个循环对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>

    <ol>
        <li v-for='value in selected'>
            {{value}}
        </li>
    </ol>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            selected:'',
            options: [
                { text: 'stu', value: ['a','b','c'] },
                { text: 'num', value: [1,2,3] },
                { text: 'json', value: {a:'aaa',b:'bbb',c:'ccc'} }
            ]
        }
    })
</script>

</body>
</html>

image-20211103131824664

image-20211103131846859

1.4 v-on

v-on：用于监听DOM事件

主要用法：绑定事件监听器，事件类型由参数指定，表达式可以是一个方法的名称或一个内联语句，如果没有修饰符也可以省略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <input type="button" value="点击1" onclick="alert('点击1')">
    <input type="button" value="点击2" v-on:click="show()">
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{
            show:function () {
                alert('点击2')
            }
        }
    })
</script>
</body>
</html>

image-20211103132929175

1.5 v-html

v-html：更新元素的innerHTML

因为安全问题，所以尽量避免使用v-html在网页动态渲染不安全的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app" v-html="inner">
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            inner:'<h2>inner</h2>'
        }

    })
</script>
</body>
</html>

image-20211103133535121

1.5 v-text

v-text：更新元素的textContent

主要用法：更新元素的textContent，v-text与{{}}两种写法可以互相替代，主要看需要的情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app" v-text="'现在是'+year+'年'+month+'月'">
<!--    也可以去掉v-text写成:现在是{{year}}年{{month}}月-->
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            year:new Date().getFullYear(),
            month:new Date().getMonth()+1
        }

    })
</script>
</body>
</html>

image-20211103134300148

1.6 v-cloak

v-cloak：不需要表达式，这个指令保持在元素上，直到关联实例结束编译

主要用法：当cloak和css规则一起用时，这个指令可以隐藏未编译的标签直到实例准备完毕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak demo</title>
    <style type="text/css">
        [v-cloak]{
            display:none;
        }
    </style>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <span>{{111}}</span>
    <span v-cloak>{{message}}</span>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            message:'hello'
        }

    })
</script>
</body>
</html>

image-20211103135254015

1.7 v-pre

v-pre：不需要表达式，用于跳过元素及子元素的编译过程

主要用法：可以用来显示原始标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <span v-pre>{{message}}</span>
    <span>{{message}}</span>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            message:'hello'
        }

    })
</script>
</body>
</html>

image-20211103135956300

1.8 v-once

v-once：不需要表达式，只渲染元素或组件一次；以后渲染时，组件/组件及下面的子元素都当成静态页面不再被渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <input v-model="message" placeholder="edit">
    <span>{{message}}</span>
    <span v-once>{{message}}</span>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            message:'hello'
        }

    })
</script>
</body>
</html>

image-20211103141052941

1.9 v-if

v-if：条件渲染指令，动态地在DOM内添加或删除DOM元素

主要用法：根据表达式值的真假判断是否渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <select v-model="message">
        <option>3</option>
        <option>1</option>
    </select>
    <span v-if="message > 2">{{message}}</span>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            message:'begin'
        }

    })
</script>
</body>
</html>

image-20211103143213034

image-20211103143226185

1.10 v-else

v-else：条件渲染指令，必须与v-if成对使用

主要用法：v-else必须跟在v-if或者v-else-if后面，否则无法识别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-else demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <select v-model="message">
        <option>3</option>
        <option>1</option>
    </select>

    <span v-if="message > 2">选择的值大于2</span>
    <span v-else>选择的值小于2</span>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            message:'begin'
        }

    })
</script>
</body>
</html>

image-20211103143637487

image-20211103143650281

1.11 v-else-if

v-else-if：判断多层条件，必须与v-if成对使用

主要用法：就是相当于else if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-else-if demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <input v-model="score" placeholder="edit">
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=70">中等</p>
    <p v-else-if="score>=60">及格</p>
    <p v-else>不及格</p>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            score:100
        }

    })
</script>
</body>
</html>

image-20211103144252782

1.12 v-show

v-show：条件渲染指令，为DOM设置css的style属性

主要用法：根据表达式的真假切换元素的css属性display，当条件变化时，该指令触发过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-show demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
    <select v-model="message">
        <option>90</option>
        <option>30</option>
    </select>
    <span v-show="message>60">ok</span>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            message:''
        }

    })
</script>
</body>
</html>

image-20211103144937653

image-20211103144948696

image-20211103145022872

v-show其实是使用css中的display:none来控制元素的显示和隐藏，形式上和v-if效果是一样的，但是v-if才是真正的条件渲染，而v-show始终会渲染元素，并且保存在DOM中

2.自定义指令

自定义指令又分为局部自定义指令和全局自定义指令，使用Vue.directive(id,definition)可以注册全局自定义指令，使用组件的directives选项可以注册局部自定义指令

2.1 局部注册

局部注册自定义指令，作用在局部，默认只会在当前页面的Vue实例生效。

使用directives写在Vue实例中，指令名不用字符串格式，指令名和directives都是以对象的形式来写，其中的钩子函数写法和全局一样，写好后直接用v-指令名使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部自定义指令 demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>

<div id="app">

    <input type="text" v-content>

</div>
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data: {},
        directives:{
            content:{
                inserted:el=>{
                    el.value='请输入文本框内容';
                }
            }
        }
    });
</script>
</body>
</html>

image-20211103150414428

2.2 全局注册

全局注册自定义指令，作用在全局，写法是在Vue实例前用Vue.directive()方法；

这个方法需要传入两个参数，第一个参数是指令名，指令名要求必须是字符串；

第二个参数是一个对象，在对象中属性为钩子函数，在钩子函数中传入参数，根据参数进行编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局自定义指令 demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>

<div id="app">

    <input type="text" v-content>

</div>
<script type="text/javascript">
    Vue.directive('content',{
        inserted:function(el){
            el.value='请输入文本框内容';
        }
    })
    var vm=new Vue({
        el:'#app',
        data: {},

    });
</script>
</body>
</html>

image-20211103151338651

2.3 钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

  • unbind：只调用一次，指令与元素解绑时调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>钩子函数 demo</title>
    <script src="../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>

<div id="app">

    <input type="text" v-focus>

</div>
<script type="text/javascript">
    Vue.directive('focus',{
        bind:function(){},
        inserted(el){
            el.value='hahaha'
        },
        updated(){}
    })
    var vm=new Vue({
        el:'#app',
    });
</script>
</body>
</html>

image-20211103152312823

2.4 钩子函数参数

指令钩子函数会被传入以下参数：

  • el：指令所绑定的元素，可以用来直接操作 DOM。
  • binding：一个对象，包含以下 property：
    • 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 编译生成的虚拟节点。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

2.5 简写

// 全局注册自定义指令
Vue.directive('指令名',function(el,binding){
	el.style.backgroundColor=binding.value;
})

v-bind:href = :href
v-on:click="xxx" = @click="xxx"

2.6 对象字面量

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。指令函数能够接受所有合法的 JavaScript 表达式。

avatar
文章
阅读
粉丝