vue入门教程-常用八大指令详解

vue入门教程-指令详解

指令：就是vuejs为我们的方便操作的自定义属性 （解放DOM）
在此之前先简单了解一下MVVM

MVVM分为Model（数据模型）、View（UI视图层）、ViewMode（负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作）

1：v-cloak：可以隐藏未编译的 Mustache 标签直到实例准备完毕
示例：

 <!-- view层 -->
    <div id="app">
        <!-- 在使用模板语法的标签上添加v-cloak的指令 -->
        <p v-cloak>{{msg+1+1}}</p>
        <!-- 模板语法 -->
    </div>

    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            // vm层
            el: '#app',
            data: {//model层
                msg: 'hello word'
            }
        })
    </script>

2：v-text：覆盖元素中原本的内容
示例：

<div id="app">
        {{username}}
        <p v-text='username'></p>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
         new Vue({
             el:'#app',
             data:{
                 username:'admin'
             }
         })
    </script>

3：v-html：覆盖元素中原本的内容，把内容当做html输出
示例：

   <div id="app">
        <div v-html="myDiv"></div>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                myDiv:'<h1>lalala</hi>'
            }
        })
    </script>

4：v-pre：跳过这个元素和它的子元素的编译过程，可以使元素不被编辑
示例;

<!-- v-pre 不被编译 -->
    <div id="app">
     <p v-pre>{{msg}} </p>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
               msg:'不想编译'
            }
        })
    </script>

5:v-once:执行一次性的插值
示例：

 <div id="app">
        <div v-once>{{msg}} </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '张媛媛'
            },
            mounted() {//mounted()生命周期函数
                this.msg = '张芳芳'
            }
        })
    </script>

6：v-model：数据的双向绑定
示例：

<!-- v-model 数据的双向绑定 -->
    <div id="app">
       <input type="text" v-model="userName">
       <p>{{userName}} </p>
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                userName:'张扁扁'
            }
        })
    </script>

7：v-on：绑定自定义事件
示例：

 <div id="app">
        <input type="text"v-model="num"><br>
        <input type="button"value="+" v-on:click='add'>
        <input type="button"value="-" @click='sub'>
        <!--  v-on: 可以缩写为 @ -->
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                num:1
            },
              //将num值进行操作
            methods:{//methods 用来写页面需要的方法的配置项
                add(){
                    this.num +=1
                },
                sub(){
                    this.num -=1
                }
            }
        })
    </script>

补充：通过event event.target.value 得到value值

 <div id="app">
        <input type="text"v-model="num"><br>
        <input type="button"value="+" v-on:click='add'>
        <input type="button"value="-" @click='sub(1,2,$event)'>
        <!--  v-on: 可以缩写为 @ -->
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                num:1
            },

        //将num值进行操作
            methods:{//methods 用来写页面需要的方法的配置项
                add(event){
                    console.log(event.target.value);
                    this.num +=1
                },

                sub(a,b,event){
                    console.log(a);
                    console.log(b);
                    console.log(event);
                    this.num -=1
                }
            }
        })
    </script>

8:v-bind:用来绑定属性
示例：

<!-- v-bind 用来绑定属性 -->
    <div id="app">
        <!-- <img v-bind:src="srcUrl" > v-bing： 可以简写：-->
        <img :src="srcUrl" >
    </div>
    <script src="js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                srcUrl: './img/01.jpg'
            },//这个逗号必须要
            mounted() {
                this.srcUrl = './img/02.jpg'//这个this必须要，他指当前的vm实例
            }
        })
    </script>