vue.js指令总结

Posted 2020-09-05 gz_blog

1.vue.js指令如下

v-text、v-html、v-show、 v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、

v-pre、v-cloak、v-once

2.一一解析

v-text：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

demo如下：

<div id="app">
      <span v-text="msg"></span>
      <span>{{ msg }}</span>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:\'#app\',
        data:{
            msg:\'hello world\'
        }
    })
</script>

3.v-html：更新元素的 innerHTML 。

<div v-html="html" id="app"></div>

<script>
    new Vue({
        el:\'#app\',
        data:{
            html:\'hello world\'
        }
    })
</script>
4.v-show ：根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

<div id="app">
    <h1>Hello Vue.js！</h1>
    <h1 v-show="yes">Yes!</h1>
     <h1 v-show="no">No!</h1>
     <h1 v-show="age >= 25">Age:{{ age }}</h1>
     <h1 v-show="name.indexOf(\'jack\') >=0">Name:{{ name }}</h1>
</div>

<script>
    var vm = new Vue({
        el:\'#app\',
        data:{
            yes:true,
            no:false,
            age:28,
            name:\'jack\'
        }
    })
</script>

5.v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

<div id="app">
    <h1>Hello Vue.js！</h1>
    <h1 v-show="yes">Yes!</h1>
     <h1 v-show="no">No!</h1>
     <h1 v-show="age >= 25">Age:{{ age }}</h1>
     <h1 v-show="name.indexOf(\'jack\') >=0">Name:{{ name }}</h1>
</div>

<script>
    var vm = new Vue({
        el:\'#app\',
        data:{
            yes:true,
            no:false,
            age:28,
            name:\'jack\'
        }
    })
</script>

6.v-else： 前一兄弟元素必须有 v-if 或 v-else-if。

<div id="app">
    <h1>Hello, Vue.js!</h1>
    <h1 v-if="yes">Yes!</h1>
    <h1 v-if="no">No!</h1>
    <h1 v-if="age >= 25">Age: {{ age }}</h1>
    <h1 v-if="name.indexOf(\'jack\') >= 0">Name: {{ name }}</h1>
</div>

<script>

    var vm = new Vue({
        el: \'#app\',
        data: {
            yes: true,
            no: false,
            age: 28,
            name: \'jane\'
        }
    })
</script>
7.v-else-if：用作 v-if 的 else-if 块。可以链式的多次使用：

<div id="app">
   <div v-if="type === \'A\'">A</div>
   <div v-else-if="type === \'B\'">B</div>
   <div v-else-if="type === \'C\'">C</div>
    <div v-else>Not A/B/C</div>
</div>

<script>
    new Vue({
    el:\'#app\',
        data:{
            type:\'M\'
        }
     })
</script>
结果：

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

<div id="example03">
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Sex</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="person in people">
            <td>{{ person.name  }}</td>
            <td>{{ person.age  }}</td>
            <td>{{ person.sex  }}</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var vm = new Vue({
        el: \'#example03\',
        data: {
            people: [{
                name: \'Jack\',
                age: 30,
                sex: \'Male\'
            }, {
                name: \'Bill\',
                age: 26,
                sex: \'Male\'
            }, {
                name: \'Tracy\',
                age: 22,
                sex: \'Female\'
            }, {
                name: \'Chris\',
                age: 36,
                sex: \'Male\'
            }]
        }
    })
</script>
结果：

 

9.v-on：

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

用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性：v-on:click="handle(\'ok\', $event)"。

<!---v-on:click="" 点击属性 执行方法 methods:{}-->
<!--v-bind b-on 提供了缩写的方法
 v-bind:class等同于:class   v-on:click 等同于@click-->

<div id="app">
    <p>
        <input type="text" v-model="message">
    </p>
    <p>
        <!--click时间直接绑定一个方法-->
        <button v-on:click="greet">Greet</button>
    </p>
    <p>
        <!--click 事件使用内联语句-->
         <button v-on:click="say(\'Hi\')">Hi</button>
    </p>
</div>

<script>
    new Vue({
        el:\'#app\',
        data:{
            message:\'Hello,Vue.js\'
        },
        methods:{
            greet:function () {
                alert(this.message)
            },
            say:function (msg) {
                alert(msg)
            }
        }
    })
</script>

10.v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

下面代码涉及到多个例子：

   <!--v-bind 指令可以在名称后面带一个参数，中间放一个冒号隔开，
   这个元素通常是HTML元素的特性，example：v-bind:class="" -->
   <ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
    var vm = new Vue({
    el:\'.box\',
    data:{
        classA:\'textColor\',
        classB:\'textSize\'
    }
})
</script>
   <!--首先判断isA的boolean值，如果为true，则渲染classA；
   如果为false，则不渲染。classB没有做三目运算，所以是始终显示的
   <div v-bind:class="[classA, { classB: isB, classC: isC }]">-->
<ul class="box1" :class="[isA?classA:\'\', classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
    var vm = new Vue({
        el:\'.box1\',
        data:{
            classA:\'textColor\',
            classB:\'textSize\',
            isA:false
        }

    })
</script>

<div id="box2" :style="{color:activeColor, fontSize:size, textShadow:shadow}">红嘴绿鹦哥</div>
<script>
    var vm = new Vue({
            el:\'#box2\',
            data:{
               activeColor:\'red\',
                size:\'20px\',
                shadow:\'5px 2px 6px red\'
        }
    })
</script>
<!--数组语法-->
<div class="box3" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>
<script>
    var vm2 = new Vue({
    el:\'.box3\',
    data:{
        styleObjectA:{
            fontSize:\'10px\',
            color:\'black\'
        },
        styleObjectB:{
            textDecoration:\'none\'
        }
    }
})
</script>
<!--添加图片的URl地址-->
<img class="box4" :src="url">
<script>
    var vm = new Vue({
    el:\'.box4\',
    data:{
        url:\'img/0.png\'
    }
})
</script>
<!--style绑定-->
<img class="box5" :style="[width,height]" :src="url" >
<script>
    var vm = new Vue({
    el:\'.box5\',
    data:{
       width:{
           width:\'40px\'
       },
        height:{
            height:\'40px\'
        },
         url:\'img/0.png\'
    }
})
</script>


<!--分页条-->

   <div id="box6">
        <ul class="pagination">
            <li v-for="n in pageCount" style="list-style-type: none;float: left;">
              <a href="javascript:void(0)" v-bind:class="activeNumber === n + 1 ?
                \'active\' : \'\' ">{{ n  }}</a>

            </li>
        </ul>
   </div>
    <script>
        new Vue({
            el:\'#box6\',
            data:{
                 activeNumber:1,
                 pageCount:10
            }

        })
    </script>