Vue使用日记（2）：Vue常用指令总结（一）

Vue中定义了很多指令供我们使用，使视图按照我们的意愿进行渲染。

下面逐一进行说明。

1、v-once

1）该指令后面不跟任何内容；

2）该指令表示元素或组件只渲染一次。

<div id="app">
<h2 v-once>{{message}}</h2>
</div>

new Vue({
    el:"#app",
    data:{
        message:"i am jimson"
    }
})

i am jimson

改变data里的message，界面并没有重新渲染：

data:{
    message:"i am Mary"
}

 

2、v-html

有时候我们从服务器请求回来的就是一段html代码，如果用mustache语法显示，会将值原样显示出来，不会解析成html代码。如果需要将内容解析成html，则需用到该指令。

<div id="app">
    <h2>{{link}}</h2>
    <h2 v-html="link"></html>
</div>

new Vue({
    el:"#app",
    data:{
        link:'<a href="https://sina.com">新浪</a>'
    }
})

显示的结果：

新浪  //链接形式

 

3、v-text

和mustache语法类似，都是用于将数据显示在界面上，注意显示的是文本。

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-text="message"></html>
</div>

new Vue({
    el:"#app",
    data:{
        message:"i am jimson"
    }
})

 

4、v-bind

前面三个指令主要作用是将值插入到我们模板的内容当中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。

1）比如动态绑定a元素的href属性；

2）比如动态绑定img元素的src属性。

这时候可以使用指令v-bind，其语法糖形式（简写形式）是：“:”，也就是一个冒号。

<div id="app">
    <a v-bind:href="link"></h2>
    <img v-bind:src="url"></html>
</div>

new Vue({
    el:"#app",
    data:{
        link:"https://www.baidu.com",
        url:"https://...logo.png"
    }
})

语法糖形式：

<div id="app">
    <a :href="link"></h2>
    <img :src="url"></html>
</div>

除此之外，v-bind还可以绑定class和style。

1）绑定class的形式：

<h2 :class="{'active': isActive}">Hello World</h2>

说明：这时候只有isActive为true的时候acitve才真实绑定触发。

也可传入多个类，和普通形式一样：

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

说明：这时候如果isActive和isLine都为true，则h2会有两个类acitve、line。

还可以通过数组形式定义：

//和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

//如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

2）绑定style的形式：

可通过v-bind绑定css内联样式：

:style="{color: currentColor, fontSize: fontSize + 'px'}"

说明：这是对象形式，key指的是css属性名，value指的是css属性值，value也可以通过data中定义的属性赋值。

<div v-bind:style="[baseStyles, overridingStyles]"></div>

说明：上面是绑定style的数组形式，style后面跟的是一个数组类型，多个值以逗号“,”分割即可。

另外，官方所说的值绑定（v-bind:value动态的给value绑定值）其实就是使用v-bind来实现的：

<div id="app">
    <input ref="myName" type="text" :value="dataDimOneValue" />
</div>

data(){
    return{
        dataDimOneValue:"just bind a value."
    }
}

 

5、v-on

用于给标签绑定事件，常用于button标签，当然其他的标签也可以。

<button v-on:click="counter++">按钮一</button>
<button v-on:click="btnClick">按钮二</button>


let app = new Vue({
    el:'#app',
    data:{
        counter:0
    },
    methods:{
        btnClick(){ this.counter++ }
    }
})

说明：以上代码是通过v-on绑定了事件监听器，这里都是绑定了单击事件。click后面可以直接编写语句，也可以通过methods定义实现逻辑。

v-on的语法糖是@，上面的语句可以写成：

<button @click="btnClick">按钮二</button>

还可以绑定其他事件，比如load事件：@load。

在methods中定义和使用方法时需要注意参数问题。

情况一：

如果该方法不需要额外参数，那么方法后的()可以不添加；

方法本身有一个默认参数，不带()的情况下会将原生事件对象event传递进去。

情况二：

如果需要传入某个参数，又同时需要event时，可以通过$event传入。

<button @click="btnClickAddOne">每次+1</button>
<button @click="btnClickAddTen(10,$event)">每次+10</button>

methods:{
    btnClickAddOne(){
        this.counter++;
        console.log(event);
    },
    btnClickAddTen(){
        this.counter += 10;
        console.log(event);
    }
}

v-on修饰符

.stop：调用 event.stopPropagation()，停止标签的冒泡事件；

.prevent：调用 event.preventDefault()，阻止默认行为；

.{keyCode | keyAlias}：当事件是从特定键触发时才触发回调，有键代码和键别名两种形式；

.native：监听组件根元素的原生事件；

.once：只触发一次回调。

<!-- 阻止冒泡 -->
<button @click.stop="btnClick"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="btnClick"></button>

<!-- 阻止默认行为，不给出处理函数 -->
<form @submit.prevent></form>

<!-- 字符串可以串联使用 -->
<button @click.stop.prevent="btnClick"></button>

<!-- 键修饰符，键别名形式 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码形式 -->
<input @keyup.13="onEnter">

<!-- 点击时回调只会触发一次 -->
<button @click.once="btnClick"></button>