美文网首页
VueJS常用的指令及作用

VueJS常用的指令及作用

作者: 昊啊昊儿哟 | 来源:发表于2018-08-25 20:31 被阅读257次

    指令

    指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。参考文档

    v-html/v-text

    v-text

    • v-text
      v-text和插值表达式的区别
      - v-text 标签的指令更新整个标签中的内容
      - 差值表达式,可以更新标签中局部的内容

    v-html

    • 可以渲染内容中的HTML标签
    • 尽量避免使用,否则会带来危险(XSS攻击 跨站脚本攻击)

    v-bind

    可以绑定标签上的任何属性
    动态绑定图片的路径

    <img v-bind:src="src" />
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                src: '1.jpg'
            }
        });
    </script>
    

    绑定a标签上的id

    <a v-bind:href="'del.php?id=' + id">删除</a>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: 11
            }
        });
    </script>
    

    绑定class

    对象语法和数组语法

    • 对象语法
      如果isActive为true,则返回的结果为 <div class="active"></div>
    <div v-bind:class="{active: isActive}">
        hei
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true  
            }
        });
    </script>
    

    数组语法

    渲染的结果 <div class="active text-danger"></div>

    <div v-bind:class="[activeClass, dangerClass]">
        hei
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                dangerClass: 'text-danger'
            }
        });
    </script>
    

    绑定style

    对象语法和数组语法

    • 对象语法
      渲染的结果<div style="color: red; font-size: 18px;"></div>
    <div v-bind:style="{color: redColor, fontSize: font18 + 'px'}">
        hei
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                redColor: 'red',
                font18: 18
            }
        });
    </script>
    
    • 数组语法
    <div v-bind:style="[color, fontSize]">abc</div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                color: {
                    color: 'red'
                },
                fontSize: {
                    'font-size': '18px'
                }
            }
        });
    </script>
    

    v-model

    表单元素的绑定

    • 双向数据绑定
      • 数据发生变化可以更新到界面
      • 通过界面可以更改数据
    • 绑定文本框
      当文本框的值发生边框后,div中的内容也会发生变化
    <input type="text" v-model="name">
    <div>{{ name }}</div>
    <script>
        var vm = new Vue({
           el: '#app',
            data: {
                name: ''
            }
        });
    </script>
    
    • 绑定多行文本框
    <textarea v-model="name"></textarea>
    <div>{{ name }}</div>
    

    注意:多行文本框中不能使用{{ name }}的方式绑定

    绑定复选框
    • 绑定一个复选框
    <input type="checkbox" v-model="checked">
    <div>{{ checked }}</div>
    
    绑定多个复选框
    • 此种方式需要input标签提供value属性
    吃饭:<input type="checkbox" value="eat" v-model="checklist"><br>
    睡觉:<input type="checkbox" value="sleep" v-model="checklist"><br>
    打豆豆:<input type="checkbox" value="ddd" v-model="checklist"><br>
    {{ checklist }}
    <script>
        var vm = new Vue({
           el: '#app',
            data: {
                checklist: []
            }
        });
    </script>
    
    • 绑定单选框
    男<input type="radio" name="sex" value="男" v-model="sex">
    女<input type="radio" name="sex" value="女" v-model="sex">
    {{sex}}
    <script>
        var vm = new Vue({
           el: '#app',
            data: {
                sex: ''
            }
        });
    </script>
    
    • 绑定下拉框
    <div id="example-5">
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    
    

    v-on

    • 绑定事件
    <div id="app">
            <!-- 设置一个元素,并且给这个元素设置一个点击事件 -->
            <!-- <button v-on:click="doThis">点我有惊喜</button> -->
            <button @click="doThis">点我有惊喜</button>
        </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                doThis: function(){
                    alert('这就是传说中的惊喜');
                }   
            }
        });
    </script>
    
    • 事件修饰符:
      • .prevent 阻止默认时间发生
      • .once 只触发一次
    <div id="app">
            <a href="http://www.baidu.com" @click.prevent="go">我是一个a标签</a>
        </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                go() {
                   console.log('a标签');
                }
            }
        });
    
    </script>
    

    v-show

    • 作用:控制元素的显示和隐藏
    <div id="app">
            <button @click="show">控制元素的显示和隐藏</button>
            <p v-show="isShow">{{ msg }}</p>
        </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello vue",
                isShow: false
            },
            methods: {
                show() {
                    // this指向的是vm对象
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
    

    v-if

    • 作用:有着与v-show一样的功能,根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ,将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。
    • 注意:当和 v-if 一起使用时,v-for 的优先级比 v-if 更高
    <div id="app">
            <button @click="show">控制元素的显示和隐藏</button>
            <p v-if="isShow">{{ msg }}</p>
            <hr>
            <p v-if="score === 'A'" >A</p>
            <p v-else-if="score ==='B'">B</p>
            <p v-else-if="score ==='C'">C</p>
            <p v-else>其它</p>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "hello vue",
                isShow: false,
                score: "D"//输出内容:其他
            },
            methods: {
                show() {
                    // this指向的是vm对象
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>
    
    

    v-for

    基于源数据多次渲染元素或模板块。此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名:

    <div id="app">
            <!-- 使用 v-for 来遍历数组 -->
            <ul>
                <li v-for="(item,index) in arr">{{item}}---{{index}}</li>
            </ul>
            <!-- 使用 v-for 来遍历对象 -->
            <ul>
                <li v-for="(item,key) in obj">{{item}}---{{key}}</li>
            </ul>
        </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                arr: ["a","b","c"],
                obj: {
                    id: 1,
                    name: '张三',
                    age: 18
                }
            }        
        });
    </script>
    
    
    

    v-clock

    • 不需要表达式

    作用:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

    <style>
    [v-cloak] {
      display: none;
    }
    </style>
    
    <div v-cloak>
      {{ message }}
    </div>
    

    不会显示,直到编译结束。

    v-once

    只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

    <div id="app">
            有v-once的div
            <div v-once>{{msg}}</div>
            没有v-once的div
            <div>{{msg}}</div>
        </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue"
            }        
        });
    </script>
    

    v-model给表单元素绑定数据

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <!-- 1.0 使用v-model给文本框绑定数据: 双向数据绑定-->
            <input type="text" v-model="msg">
            <br>
            {{msg}}
            <hr>
            <!-- 2.0 使用v-model给多行文本框绑定数据   -->
            <textarea v-model="msg1"></textarea>
            <br>
            {{msg1}}
            <hr>
            <!-- 3.0 使用v-model给复选框绑定数据  -->
            <!-- 3.1 绑定的是一个复选框 -->
            <input type="checkbox" v-model="checkbox">
            <br>
            {{checkbox}}
            <hr>
            <!-- 3.2 绑定的是多个复选框 -->
            <input type="checkbox" value="eat" v-model="checkboxArr">吃饭
            <input type="checkbox" value="sleep" v-model="checkboxArr">睡觉
            <input type="checkbox" value="ddd" v-model="checkboxArr">打豆豆
            <br>
            {{checkboxArr}}
            <hr>
            <!-- 4.0 绑定单选框 -->
            <input type="radio" value="男" name="gender" v-model="radio">男
            <input type="radio" value="女" name="gender" v-model="radio">女
            <br>
            {{radio}}
            <hr>
            <!-- 5.0 给下拉框绑定数据 -->
            <select v-model="selected">
                <option value="-1">请选择</option>
                <option value="0">A</option>
                <option value="1">B</option>
                <option value="2">C</option>
            </select>
            <br>
            {{selected}}
        </div>
    </body>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "abc",
                msg1: "one",
                checkbox: "", // 值为true / false
                checkboxArr: ["eat","ddd"],
                radio: "女",
                selected: -1
            }        
        });
    </script>
    </html>
    

    具体其他指令可以参考官网 www.vuejs.org

    相关文章

      网友评论

          本文标题:VueJS常用的指令及作用

          本文链接:https://www.haomeiwen.com/subject/muggiftx.html