zoukankan      html  css  js  c++  java
  • Vue.js-----轻量高效的MVVM框架(四、指令)

    Vue指令

    指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式,因此上面提到的 JavaScript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

    在Vue中,常用的指令有v-text、v-html、v-if、v-show、v-for、v-on、v-bind、v-model、v-ref、v-el、v-pre、v-cloak。

    先上代码:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <script type="text/javascript" src="js/vue.js"></script>
            <title></title>
            <style>
                .item {
                    margin: 1px;
                    padding: 5px 0 5px 0;
                }
                
                .item:hover {
                    background: #cccccc;
                }
            </style>
        </head>
        <div id="dr01">
            <h3>v-text</h3>
            <div v-text="msgText"></div>
            <div>{{msgText}}</div>
            <hr />
    
            <h3>v-html</h3>
            <div v-html="msgHtml"></div>
            <div>{{{msgHtml}}}</div>
            <hr />
    
            <h3>v-if</h3>
            <div>msgBoolean01:true</div>
            <div v-if="msgBoolean01">(here is v-if code block)if msgBoolean01 is true show this div</div>
            <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
            <br />
            <div>msgBoolean01:false</div>
            <div v-if="msgBoolean02">(here is v-if code block)if msgBoolean02 is true show this div</div>
            <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>
    
            <h3>template v-if</h3>
            <div>msgBoolean01:true</div>
            <template v-if="msgBoolean01">
                <div>(here is template v-if code block)if msgBoolean01 is true show this div</div>
            </template>
            <template v-else>
                <div>(here is template v-else code block)if msgBoolean01 is false show this div</div>
            </template>
            <br />
            <div>msgBoolean02:false</div>
            <template v-if="msgBoolean02">
                <div>(here is template v-if code block)if msgBoolean02 is true show this div</div>
            </template>
            <template v-else>
                <div>(here is template v-else code block)if msgBoolean02 is false show this div</div>
            </template>
    
            <h3>v-show</h3>
            <div>msgBoolean01:true</div>
            <div v-show="msgBoolean01">(here is v-show code block)if msgBoolean01 is true show this div</div>
            <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
            <br />
            <div>msgBoolean01:false</div>
            <div v-show="msgBoolean02">(here is v-show code block)if msgBoolean02 is true show this div</div>
            <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>
    
            <h3>v-else(不需要表达式)</h3>
            <div>限制:前一兄弟必须有v-if或者v-show</div>
            <div>v-else的用法:上面三个例子中都有使用,请参考代码</div>
    
            <hr />
    
            <h3>v-for</h3>
            <div>遍历数组:</div>
            <ul>
                <li v-for="(index,item) in itemArrs">
                    <!-- index代表的是当前item的下标,如果要取出下标的值则用{{$index}}即可 -->
                    index:{{$index}}, item:{{item}}
                </li>
            </ul>
            <div>遍历对象key、value(不带下标index)</div>
            <ul>
                <li v-for="(key,value) in itemObjs">
                    <!-- 
                        key代表的是当前对象的属性名称,value代表的是当前对象的属性值
                        key取值的时候可以用{{$key}},也可以使用{{key}}
                        value取值的时候只能用{{value}}
                        建议:遍历对象不带index下标的时候同时用{{key}}和{{value}}
                     -->
                    $key:{{$key}},key:{{key}}, value:{{value}}
                </li>
            </ul>
            <div>遍历对象key、value(带下标index)</div>
            <ul>
                <li v-for="(index,key,value) in itemObjs">
                    <!-- 
                        index代表的是当前属性的下标,key代表的是当前对象的属性名称,value代表的是当前对象的属性值
                        index取值的时候只能用{{$index}}
                        key取值的时候只能用{{$key}}
                        value取值的时候只能用{{value}}
                        建议:遍历对象不带index下标的时候同时用{{key}}和{{value}}
                     -->
                    $index:{{$index}}, $key:{{$key}}, value:{{value}}
                </li>
            </ul>
    
            <hr />
            <h3>v-on</h3>
            <ul>
                <li v-for="(index,item) in itemArrs">
                    <div class="item" v-on:click="itemClick01">
                        <span>index:{{$index}}, item:{{item}}</span>
                        <button v-on:click="itemClick02($index,item)">内联语句(参数item参数)</button>
                        <button v-on:click="itemClick03(item,$event)">内联语句(参数event参数)</button>
                        <button v-on:click.stop="itemClickStop(item)">阻止冒泡</button>
                        <a href="http://www.baidu.com">跳转到百度</a>
                        <a href="http://www.baidu.com" v-on:click.prevent="itemClickPrevent()">阻止a标签默认行为,不会跳转到百度</a>
                        <input v-on:keyup.enter="keyUpEnter($event)" placeholder="获取焦点后点击enter试试" />
                    </div>
                </li>
            </ul>
            <h3>v-bind</h3>
            <div>
                <!-- 绑定 attribute -->
                <img v-bind:src="imageSrc">
    
                <!-- 缩写 -->
                <img :src="imageSrc">
    
                <!-- 绑定 class -->
                <div :class="{ red: isRed }">对象class</div>
                <div :class="[classA, classB]">数组class</div>
                <div :class="[classA, { classB: isB, classC: isC }]">对象数组class混用</div>
    
                <!-- 绑定 style -->
                <div :style="{ fontSize: size + 'px' }">对象style</div>
                <div :style="[styleObjectA, styleObjectB]" style="background-color: ;">数组style</div>
            </div>
        </div>
    
        <body>
            <script>
                var dr01 = new Vue({
                    el: "#dr01",
                    data: {
                        msgText: "this is msgText!",
                        msgHtml: '<span style="color:red;">this is msgHtml</span>',
                        msgBoolean01: true,
                        msgBoolean02: false,
                        itemArrs: ["item A", "item B", "item C", "item D"],
                        itemObjs: {
                            key01: "this is value01",
                            key02: "this is value02",
                            key03: "this is value03"
                        },
                        imageSrc: "img/favicon.ico",
                        isRed: true,
                        classA: "class-a",
                        classB: "class-b",
                        isB: true,
                        isC: true,
                        size: "14",
                        styleObjectA: {
                            backgroundColor: "#cccccc"
                        },
                        styleObjectB: {
                            color: "red"
                        },
                    },
                    methods: {
                        //方法处理器
                        itemClick01: function() {
                            console.log("u clicked the parent div");
                        },
                        //内联语句
                        itemClick02: function(index, item) {
                            console.log("current index: " + index + "; item: " + item);
                        },
                        //event参数传递
                        itemClick03: function(item, event) {
                            console.log("current item: " + item + "; event target tagName: " + event.target.tagName);
                        },
                        //阻止冒泡
                        itemClickStop: function(item) {
                            console.log("child button is clicked, please watch whether the parent div's log is priented!")
                        },
                        //阻止默认的行为
                        itemClickPrevent: function() {
                            console.log("Prevent Default behaviour");
                        },
                        //点击
                        keyUpEnter: function(event) {
                            console.log("keyCode: " + event.keyCode);
                        },
                    }
                })
            </script>
        </body>
    
    </html>

    v-text: 更新元素的textContent

    在内部,{{Mustache}}插值也被编译为textNode的一个v-text指令,所以下面两个span渲染结果一致

    <h3>v-text</h3>
    <div v-text="msgText"></div>
    <div>{{msgText}}</div>

    v-html:更新元素的 innerHTML,示例:{{{ Mustache }}}

    <h3>v-html</h3>
    <div v-html="msgHtml"></div>
    <div>{{{msgHtml}}}</div>

     v-if与v-else(根据条件判断结果渲染页面,也就是说只会渲染if和else里面的一个)

    <h3>v-if</h3>
    <div>msgBoolean01:true</div>
    <div v-if="msgBoolean01">(here is v-if code block)if msgBoolean01 is true show this div</div>
    <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
    
    <div>msgBoolean01:false</div>
    <div v-if="msgBoolean02">(here is v-if code block)if msgBoolean02 is true show this div</div>
    <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>

     template v-if与template v-else(根据条件判断结果渲染页面,也就是说只会渲染if和else里面的一个)

    <h3>template v-if</h3>
    <div>msgBoolean01:true</div>
    <template v-if="msgBoolean01">
        <div>(here is template v-if code block)if msgBoolean01 is true show this div</div>
    </template>
    <template v-else>
        <div>(here is template v-else code block)if msgBoolean01 is false show this div</div>
    </template>
    <div>msgBoolean02:false</div> <template v-if="msgBoolean02"> <div>(here is template v-if code block)if msgBoolean02 is true show this div</div> </template> <template v-else> <div>(here is template v-else code block)if msgBoolean02 is false show this div</div> </template>

    v-show与v-else(v-show的语句与v-if不同,不论判断条件结果如何,都会渲染整个html页面,只是将判断结果为false的那个节点加上style="display:none;"

    <h3>v-show</h3>
    <div>msgBoolean01:true</div>
    <div v-show="msgBoolean01">(here is v-show code block)if msgBoolean01 is true show this div</div>
    <div v-else>(here is v-else code block)if msgBoolean01 is false show this div</div>
    <div>msgBoolean01:false</div> <div v-show="msgBoolean02">(here is v-show code block)if msgBoolean02 is true show this div</div> <div v-else>(here is v-else code block)if msgBoolean02 is false show this div</div>

    v-else:不需要表达式,但是使用的前提条件是前面的兄弟节点必须是v-if或者v-show

    v-for

    <div>遍历数组:</div>
    <ul>
        <li v-for="(index,item) in itemArrs">
            <!-- index代表的是当前item的下标,如果要取出下标的值则用{{$index}}即可 -->
            index:{{$index}}, item:{{item}}
        </li>
    </ul>
    <div>遍历对象key、value(不带下标index)</div>
    <ul>
        <li v-for="(key,value) in itemObjs">
            <!-- 
                key代表的是当前对象的属性名称,value代表的是当前对象的属性值
                key取值的时候可以用{{$key}},也可以使用{{key}}
                value取值的时候只能用{{value}}
                建议:遍历对象不带index下标的时候同时用{{key}}和{{value}}
             -->
            $key:{{$key}},key:{{key}}, value:{{value}}
        </li>
    </ul>
    <div>遍历对象key、value(带下标index)</div>
    <ul>
        <li v-for="(index,key,value) in itemObjs">
            <!-- 
                index代表的是当前属性的下标,key代表的是当前对象的属性名称,value代表的是当前对象的属性值
                index取值的时候只能用{{$index}}
                key取值的时候只能用{{$key}}
                value取值的时候只能用{{value}}
                建议:遍历对象不带index下标的时候同时用{{key}}和{{value}}
             -->
            $index:{{$index}}, $key:{{$key}}, value:{{value}}
        </li>
    </ul>
    itemArrs和itemObjs定义如下:

    itemArrs: ["item A", "item B", "item C", "item D"], itemObjs: { key01: "this is value01", key02: "this is value02", key03: "this is value03" },

     结果:

         

    v-on: 绑定事件

    html页面

    <h3>v-on</h3>
    <ul>
        <li v-for="(index,item) in itemArrs">
            <div class="item" v-on:click="itemClick01">
                <span>index:{{$index}}, item:{{item}}</span>
                <button v-on:click="itemClick02($index,item)">内联语句(参数item参数)</button>
                <button v-on:click="itemClick03(item,$event)">内联语句(参数event参数)</button>
                <button v-on:click.stop="itemClickStop(item)">阻止冒泡</button>
                <a href="http://www.baidu.com">跳转到百度</a>
                <a href="http://www.baidu.com" v-on:click.prevent="itemClickPrevent()">阻止a标签默认行为,不会跳转到百度</a>
                <input v-on:keyup.enter="keyUpEnter($event)" />
            </div>
        </li>
    </ul>

     定义在vue的methods

    methods: {
        //方法处理器
        itemClick01: function() {
            console.log("u clicked the button");
        },
        //内联语句
        itemClick02: function(index, item) {
            console.log("current index: " + index + "; item: " + item);
        },
        //event参数传递
        itemClick03: function(item, event) {
            console.log("current item: " + item + "; event target tagName: " + event.target.tagName);
        },
        //阻止冒泡
        itemClickStop: function(item) {
            console.log("child button is clicked, please watch whether the parent div's log is priented!")
        },
        //阻止默认的行为
        itemClickPrevent: function() {
            console.log("Prevent Default behaviour");
        },
        //点击
        keyUpEnter: function(event) {
            console.log("keyCode: " + event.keyCode);
        },
    }

    简单介绍:

    通过v-for来遍历items,div内的span标签是遍历的结果,后面紧跟了几个点击事件:

    div上的itemClick01是方法处理器

    itemClick02是可以传递当前item值的内联语句

    itemClick03是可以传递当前item的event事件的内联语句

    itemClickStop是阻止冒泡,即相应完当前标签的事件后,阻止点击事件传递到上层div

    itemClickPrevent是阻止默认行为,a标签本身是跳转到其他页面,加上itemClickPrevent后阻止了打开新页面的行为

    keyUpEnter是响应enter键的事件,但是前提是光标是当前input内

    页面显示结果如下(定义了item的hover,当前鼠标悬停在第二个item上)

        

    点击“内联语句(参数item参数)”

    current index: 1; item: item B
    u clicked the parent div

    点击“内联语句(参数event参数)”

    current item: item B; event target tagName: BUTTON
    u clicked the parent div

    点击“阻止冒泡”

    child button is clicked, please watch whether the parent div's log is priented!

    点击“跳转到百度”:跳转到了百度页面。

    点击“阻止a标签默认行为,不会跳转到百度”:没有响应

    点击“input标签”: u clicked the parent div ,并点击enter键: keyCode: 13 

    v-bind

    <h3>v-bind</h3>
    <div>
        <!-- 绑定 attribute -->
        <img v-bind:src="imageSrc">
    
        <!-- 缩写 -->
        <img :src="imageSrc">
    
        <!-- 绑定 class -->
        <div :class="{ red: isRed }">对象class</div>
        <div :class="[classA, classB]">数组class</div>
        <div :class="[classA, { classB: isB, classC: isC }]">对象数组class混用</div>
    
        <!-- 绑定 style -->
        <div :style="{ fontSize: size + 'px' }">对象style</div>
        <div :style="[styleObjectA, styleObjectB]">数组style</div>
    </div>
    data中的定义

    imageSrc: "img/favicon.ico", isRed: true, classA: "class-a", classB: "class-b", isB: true, isC: true, size: "14", styleObjectA: { backgroundColor: "#cccccc" }, styleObjectB: { color: "red" },

     展示结果:

          

    v-model就不说了,前面有讲到。

    至于v-ref、v-el、v-pre、v-cloak先不解释,有兴趣的可以去官网看看,用到的时候我会回来补充。

  • 相关阅读:
    javascript-事件
    javascript-数组简单的认识
    javascript-dom操作
    JavaScript入门
    python语言程序设计?
    4,14
    python第二周。2019.4.13
    python第二周
    python语言程序设计9
    python语言程序设计8
  • 原文地址:https://www.cnblogs.com/wrcold520/p/5508453.html
Copyright © 2011-2022 走看看