插值表达式
普通插值表达式
插入数据: 在标签尖括号中使用{{}}插入js表达式:变量,函数调用,三目运算等等
<div class="box">
<h1>{{name}}</h1>
<h2>{{sex}}</h2>
</div>
<script>
new Vue({
el: ".box",
data: {
name: "dsl",
sex: "man"
}
})
</script>
文本指令
v-html:基于innerHTML,可以识别标签
v-text:基于innerText,不能识别标签
v-pre:插值表达式会被识别为文本,而不是js语言
v-cloak:加上这个属性的标签相当于在虚拟构建这个节点时会有这个属性,等到打他数据生成时,这个属性会自动去掉,利用这个特性可以解决vue第一次加载时页面闪烁的问题
<div class="box">
<p v-text="msg1"></p>
<p v-html="msg2"></p>
<p v-pre>{{msg3}}</p>
</div>
<script>
new Vue({
el: ".box",
data: {
msg1: "<b>11111</b>",
msg2: "<b>22222</b>",
msg3: "33333",
}
})
</script>
解决页面闪烁的问题:
1.使用文本指令(尽量使用):v-html,v-text,v-pre
2.$mount
3.给标签加上v-cloak属性,利用属性选择器将其display设置为none
<style>
[v-clock] {
display: none;
}
</style>
<body>
<!-- 解决页面加载闪烁问题,添加v-cloak属性 设置display为none 执行vue时会移除v-cloak属性 -->
<!-- 使用v-html,v-text -->
<div class="box" v-clock>
<p>{{msg1}}</p>
<p>{{msg2}}</p>
<p>{{msg3}}</p>
<!-- v-text 底层 xx.innerText="" v-html 底层 xx.innerHTML="" -->
<p v-text="msg1"></p>
<p v-html="msg2"></p>
</div>
<script>
new Vue({
el: ".box",
data: {
msg1: "<b>11111</b>",
msg2: "<b>22222</b>",
msg3: "33333",
}
})
</script>
</body>
属性绑定
属性绑定:所有标签中属性绑定js中变量
标准写法:
<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
语法糖:
<标签 :属性名="要绑定的Vue对象的data里的属性名"></标签>
列1:
<div id="box">
<a v-bind:href="baidu">百度</a>
<!-- 语法糖 -->
<a :href="juejin">掘金</a>
<input type="text" :value="value">
</div>
<script>
new Vue({
el: "#box",
data: {
baidu: "https://www.baidu.com/",
juejin: "https://juejin.cn/",
value: "12312313"
}
})
</script>
列2:
<div id="box">
头像:<img :src="touxiang"><br>
昵称:<span v-html="name"></span><br>
ip地址:<span v-html="location"></span><br>
发布日期:<span v-html="date"></span><br>
文本:<span v-html="text"></span><br>
<img v-bind:src="pic0">
<img :src="pic1">
<img :src="pic2">
<img :src="pic3">
<img :src="pic4">
<img :src="pic5">
</div>
<script>
console.log(sina.statuses[0].pic_urls[0].thumbnail_pic);
new Vue({
el: "#box",
data: {
touxiang: sina.statuses[0].user.profile_image_url,
name: sina.statuses[0].user.name,
location: sina.statuses[0].user.location,
date: sina.statuses[0].created_at,
text: sina.statuses[0].text,
pic0: sina.statuses[0].pic_urls[0].thumbnail_pic,
pic1: sina.statuses[0].pic_urls[1].thumbnail_pic,
pic2: sina.statuses[0].pic_urls[2].thumbnail_pic,
pic3: sina.statuses[0].pic_urls[3].thumbnail_pic,
pic4: sina.statuses[0].pic_urls[4].thumbnail_pic,
pic5: sina.statuses[0].pic_urls[5].thumbnail_pic,
}
})
</script>
样式绑定: 经常我们需要对样式进行切换，比如：div的显示和隐藏，某些标签active等。Vue提供的对象绑定样式的方式就很容做这些事情
列:
<style>
.active {
color: red;
}
</style>
<body>
<!-- 样式绑定 -->
<div id="box">
<!-- isActive为true时属性存在 -->
<div v-bind:class="{ active: isActive }">
绑定颜色
</div>
</div>
<script>
new Vue({
el: "#box",
data: {
isActive: true
}
})
</script>
</body>
混合普通的HTML标签样式类及绑定样式对象:v-bind:class 指令可以与普通的 class 属性共存。
列::
<style>
.active {
color: skyblue;
}
/* .sn1 {
color: red;
} */
</style>
<body>
<div id="box">
<div class="sn1" v-bind:class="{ active: isActive }">
属性绑定
</div>
</div>
<script>
new Vue({
el: "#box",
data: {
isActive: true
}
})
</script>
</body>
