Vue的学习笔记三：Vue常用指令

目录

一、什么是指令

二、 Vue 中常用的指令

1. v-text

2. v-html

3.v-if

4. v-show

5. v-bind

6. v-on

7. v-model

8. v-for

9. Vue的methods属性

---

好久没更新 vue，上次写这个系列的文章是 1年前吧，而且才写2篇，可能是平时更多的是关注课堂教学内容吧，感觉自己都要落伍了~。不能偷懒~坚持学习~！！

一、什么是指令

指令，是Vue中最常用的一项功能，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。

• 指令带有前缀 v-。Vue 中所有指令都是 v-xxx 的形式。

• v-xxx 类似于 HTML 标签中的属性。

 <div  v-xxx>
 </div>

通过指令，Vue 可以对DOM和数据进行更为方便的操作。

二、 Vue 中常用的指令

1. v-text

相当于标签的 innerText，只能用于双标签中。不过，它不能识别内容中的HTML代码。

let  myv = new Vue({
    el:"#app",
    template:`
        <div>
           <div v-text="message +'，I am happy.' "></div>
        </div>
    `,
    data:function(){
        return {
            message:"你好"
        }
    }
});

指令值本质是js表达式。使用变量不需要插值运算符{{ }}，直接是 data 中的 变量名，或者其他表达式。

这里的变量，必须在 data 中声明。

严格来讲，这里的“变量”其实是 data 的 Object 属性名。

2. v-html

相当于标签的 innerHTML，只能用于双标签中。类似 v-text 指令，不过它可以识别内容中的 HTML 代码。

3.v-if

判断是否插入这个元素。判断结果为true，页面会添加这个元素；false，页面不会添加这个元素。

v-else-if

v-else

v-if ， v-else-if ，v-else 三个指令使用，必须是紧邻的DOM。

<button type="button" v-if="num>10">这个是个测试 v-if </button>
<button type="button" v-else-if="num>5">这个是个测试 v-else-if </button>
<button type="button" v-else>这个是个测试 v-else </button>

4. v-show

标签显示与否。确定隐藏，会给标签的style 添加 display:none;

注意 v-show , v-if 的差异：

• v-show 是通过 CSS 的 display属性来显示隐藏标签；

• v-if 则是纯粹的不插入该元素。

<div id="app">
</div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
    template:`
        <div>
           <div v-text="message + ',I am happy' "></div>
           <div v-text="htmlText"></div>
           <div v-html="htmlText"></div>
           <button type="button" v-if="num>10">这个是个测试 v-if </button>
           <button type="button" v-else-if="num>5">这个是个测试 v-else-if </button>
           <button type="button" v-else>这个是个测试 v-else </button>
           <h3 v-show="isIn">测试 v-show </h3>
        </div>
    `,
    data:function(){
        return {
            message:"你好",
            htmlText:"<h1>测试能实现H1标签不呢？</h1>",
            isIn: false,
            num: 2
        }
    }
});
</script>

5. v-bind

给元素的属性赋值。

• 原生属性，比如 src，value 之类。

• 自定义属性，比如 mydata，myvalue 等程序员自己写的属性。

<div mydata="{{message}}">message的值是没法赋值给 div的属性 mydata 的</div>

正确做法，利用 v-bind，v-bind:属性名=“变量|表达式”

<div v-bind:mydata="message"> OK </div>

可以简写 :属性名="变量|表达式"

<div :mydata="message"> OK </div>

<div id="app">

</div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
   template:`
        <div>
            <div mydata="{{message}}">看看有无自定义属性的值？？？</div>
            <div v-bind:mydata="message" :mynum="num+2"> OK </div>
        </div>
    `,
    data:function(){
        return {
            message:"你好",
            num: 2
        }
    }
});
</script>

6. v-on

给标签绑定原生的事件，以便更好的根据事件操作数据。

v-on:原生事件名=“表达式，给变量进行操作||函数名，调用函数”

简写形式，@原生事件名=“表达式，给变量进行操作||函数名，调用函数”

<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
let  myv = new Vue({
    el:"#app",
    template:`
        <div>
            <div>{{message+234}}</div>
            <h1 v-on:click="message='abc'">点击试试</h1>
            <h1 @click="message='xyz'">点击试试</h1>
        </div>
    `,
    data:function(){
        return {
            message:"test"
        }
    }
});
</script>

7. v-model

我们知道Vue的核心特性之一是双向绑定，vue的响应式原理是实现了数据－>视图，接下来我们要学习 视图－>数据的原理。

v-model是一个指令，限制在<input>、<select>、<textarea>、components（必须是有value属性的元素）中使用。

在给 < input /> 元素添加 v-model 属性时，默认会把 value 作为元素的属性，然后把 'input' 事件作为实时传递 value 的触发事件。

 <input type="text" v-model="mes">  
//  此时mes值就与input的值进行双向绑定

<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
 let  myv = new Vue({
        el:"#app",
        template:`
        <div>
            <input type="text"  v-model="message">
            <div>{{message}}</div>
            <button type="button" v-if="message=='abc'"  
					@click="message='xyz'">这个是按钮</button>
        </div>
    `,
        data:function(){
            return {
                message:"test"
            }
        }
    });
</script>

8. v-for

基本语法： v-for="item in Arr" ， 变量 item 表示的是 数组元素 。

对象操作：v-for="item in Obj" ， 变量 item 表示对象的属性值，或者 方法体。

v-for 中的各变量的顺序：

• 数组：v-for=" ( item，index ) in Arr"

• 对象：v-for=" ( value，key，index ) in Obj "

demo:根据年龄大小，更改背景色

<style>
 .a{ background: #ff0;}
 .b{ background: #ffad00;}
</style>

<div id="app"></div>
<!-- 引入 vue 文件 -->
<script src="../../scripts/vue.js"></script>
<!-- 启动 Vue -->
<script>
    let  myv = new Vue({
        el:"#app",
        template:`
        <div>
            <ul>
                <li v-for="item in students"   
 					v-bind:class="item.age>17?'a':'b'">
                    学生姓名：{{ item.name }} --
                    年龄：{{ item.age }}
                </li>
            </ul>
            <div>
                  数组一共  {{ students.length }}个学生。
            </div>
        </div>
    `,
        data:function(){
            return {
                students:[
                    {name:"张三",age:18},
                    {name:"Lily",age:19},
                    {name:"Lucy",age:17}
                ]
            }
        }
    });
</script>

代码中，v-for，v-bind 的顺序无所谓。

9. Vue的methods属性

Vue 的methods 定义了 v-on 指令中可以调用的方法。如：

<button type="button"  v-on:click="myFun()">点击出现特效</button>

methods:{
   myFun:function(){
        // 方法体
   }
}

methods中的 $event 参数

传递的 $event 参数其实就是 vue 封装了的 event事件对象。

<button @click=”add(2,$event)”>add</button> 

let myv = new Vue({
        el:"#app",
        template:`
            <button type="button"  v-on:click="myFun($event,message)">
            		点击出现特效
            </button>
        `,
        data:function(){
            return {
                message:"Hello,world"
            }
        },
        methods:{
            myFun:function(e,msg){
                console.info(this);  // this 是data return 的对象。
                console.info( this.message ); // this.xxx 就可以获取、更改data的数据
                console.info(e.target);  // 事件对象, 当前标签
                alert(msg);
            }
        }
});