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>