Vue第二天---Vue指令(上）

2022-09-22 94

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue第二天---Vue指令

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>

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>
复制代码

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

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>
复制代码

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>
复制代码

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>

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>

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>

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>