一、插值操作
1、Mustache
Mustache是胡子,胡须的意思,在Vue中,通过Mustache语法(双大括号)将data中的文本数据插入到HTML中。
Mustache语法可以是简单的语句,也可以是表达式,有很多种写法。
<div id="app">
<h2>{{message}}</h2>
<h2>{{message}},熊吱</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{number * 2}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
firstName:'Bear',
lastName:'mouse',
number:100
}
})
</script>
2、v-once
使用场景:把原有数据展示出来,当数据改变时,展示的数据不跟着改变的情况。
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
在页面中,两个message都会显示"hello",此时将app实例中的message数据内容改变,会发现页面中包含v-once的数据并没有跟着变化。
3、v-html
使用场景:从服务器请求到的数据本身是一个HTML代码,需要对HTML代码进行解析,显示相应的内容。
<div id="app">
<h2>{{url}}</h2>
<h2 v-html='url'></h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
url:'<a href="https://www.bilibili.com/">bilibili</a>'
}
})
</script>
在标签中添加v-html后需要跟一个string类型,v-html会将string中的html格式解析并渲染到页面中。
4、v-text
与Mustache类似,直接将文本数据输出到页面上,因为不够灵活,在开发中很少使用。
<div id="app">
<h2>{{message}}</h2>
<h2 v-text='message'></h2>
</div>
5、v-pre
使用场景:希望可以直接显示HTML中的内容,不进行解析。
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
显示效果:
6、v-cloak
使用场景:有时候Vue解析出现卡顿时,页面先出现未解析的模板语句,造成十分不友好的页面观感,v-cloak用于隐藏未解析时出现的Mustache语法。
原理:Vue解析之前,div中会有一个属性v-cloak;Vue解析之后,div中的v-cloak属性就会删除。
首先在style中定义:
<style>
/* 含有v-cloak属性的内容隐藏 */
[v-cloak]{
display: none;
}
</style>
在标签中添加v-cloak属性:
<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>
二、v-bind
1、介绍
前面说到的插值操作是动态对内容进行管理,有时候也需要对标签的属性(比如img元素的src指令)进行动态绑定,此时就会用到v-bind指令。
v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值。
2、基础使用
在data中配置了图片或链接的url后,不能直接通过Mustache语法将值传到src或href元素标签中,此时在src或img前直接添加v-bind语法即可,示例代码如下:
<div id="app">
<img v-bind:src='imgUrl'></img>
<h2><a v-bind:href="webUrl">百度一下</a></h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
imgUrl:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=308218285,1903618240&fm=26&gp=0.jpg',
webUrl:'https://www.baidu.com'
}
})
</script>
上面的代码直接从百度复制了一张图片的链接,添加到data中的imgUrl中,html元素就能正常解析了。
3、语法糖
v-bind对应的语法糖是一个冒号:,也就是v-bind的简写方式,在实际开发中,常常用的也是v-bind的语法糖,使代码更加的简洁。使用语法糖的v-bind代码如下:
<div id="app">
<img :src='imgUrl'></img>
<h2><a :href="webUrl">百度一下</a></h2>
</div>
4、动态绑定class(对象语法)
开发中常常会使用v-bind语法来动态绑定元素的class,可以直接在元素中直接添加v-bind:class="{类名1:布尔值,类名2:布尔值}"语句,再通过修改实例中的值来动态添加或去掉class,这种方法叫做动态绑定class的对象语法。
代码示例如下,首先需要在style中定义redcls类(颜色为红色)与sizcls(字体大小为50px)的样式。
<div id="app">
<!-- 直接给元素添加class 不能动态改变 -->
<h2 class="redcls sizclas">{{message}}</h2>
<!-- 对象语法,将data中的布尔值传给类名,定义是否添加类 -->
<h2 :class="{redcls:isRedcls , sizcls:isSizcls}">{{message}}</h2>
<!-- 添加两个按钮动态控制data中的值 -->
<button v-on:click="colbtn">颜色改变</button>
<button v-on:click="sizbtn">大小改变</button>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
isRedcls:false,
isSizcls:false
},
methods:{
colbtn:function(){
this.isRedcls = !this.isRedcls
},
sizbtn:function(){
this.isSizcls = !this.isSizcls
}
}
})
</script>
实现效果:
点击按钮时,添加了动态绑定的第二个hello元素的类会跟着改变,实现了class的响应式绑定。
注:当元素本身已经定义了一个class时,通过v-bind绑定的class布尔值为ture的时候也不会覆盖原有class,而是同时拥有2种或2种以上class。
如果觉得对象语法直接放在html元素中长度太长了,可以使用在实例methods中添加返回方法,并直接在html元素中调用:
<h2 :class="getclass()">{{message}}</h2>
methods中添加方法代码:
getclass:function(){
return {redcls:this.isRedcls , sizcls:this.isSizcls}
}
5、动态绑定class(数据语法)
用于需要从服务器动态获取一些class类,通过数组的形式对元素进行class绑定,代码示例如下:
<div id="app">
<!-- 直接给元素添加class 不能动态改变 -->
<h2>{{message}}</h2>
<!-- 数据语法,将data中接收到类名通过数组的形式传给元素,定义是否添加类 -->
<h2 :class="getclass()">{{message}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
color:"redcls",
size:"sizcls"
},
methods:{
getclass:function(){
return [this.color,this.size]
}
}
})
</script>
6、v-for循环点击单个元素改变style
<div id="app">
<li v-for=" (cz,index) in movies" :class="isRed == index?'redcls':''" @click="btnclk(index)" >
{{cz}}
</li></div>
<script>
const app = new Vue({
el:'#app',
data:{
movies:['孟美岐','吴宣仪','杨超越','段奥娟'],
isRed:-1
},
methods:{
btnclk:function(index){
this.isRed = index
}
}
})
</script>
7、动态绑定style(对象语法)
动态绑定style多用于在某些时候需要直接改掉元素的CSS样式,代码示例如下:
<div id="app">
<!-- <h2 :style="{属性名:属性值}">{{message}}</h2> -->
<!-- 属性名为驼峰命名法,属性值直接写必须加单引号 -->
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
<!-- 属性值也可以直接加变量 -->
<h2 :style="{fontSize:fontsize + 'px',color:color}">{{message}}</h2>
<!-- 可以直接通过方法传递 -->
<h2 :style="getstyle()">{{message}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
fontsize:60,
color:'green'
},
methods:{
getstyle:function(){
return {fontSize:this.fontsize + 'px',color:this.color}
}
}
})
</script>
8、动态绑定style(数组语法)
绑定style同样也可以使用数组,代码示例如下:
<div id="app">
<h2 :style="[arrstyle]">{{message}}</h2>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
message:'hello',
fontsize:60,
arrstyle:{fontSize:'50px',backgroundColor:'red'}
}
})
</script>