插值表达式
语法:{{}}
首先插值表达式里面放的是js表达式,而不是其他的。比如说语句就不能写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 这里的都是表达式 -->
<!-- 变量 -->
{{msg}}<br/>
{{1 + 1}}<br/>
<!-- 这里是二元表达式,如果前面为true,就返回后面的。如果是false就返回前面的 -->
{{1 + 1 === 2 && '这个算得真不错'}}<br/>
{{1 + 1 === 1 && '这个算得真不错'}}<br/>
<!-- 三元表达式 -->
{{1 + 1 === 2 ? '正确' : '错误'}}<br/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
msg: 'hello word'
}
}
})
</script>
</body>
</html>
指令
指令是带有v-
前缀的,
指令的值是单个js表达式
指令的作用就是当表达式的值发生改变时响应式的作用于DOM上
v-text
v-text
可以用于替换插值表达式,如果同时存在v-text
和插值表达式,那么插值表达式不起作用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
<!-- 这里的{{msg}}不会起作用 -->
<div v-text="abc">{{msg}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
msg: 'hello word'
}
}
})
</script>
</body>
</html>
这里使用了v-text
指令。指令后面是abc
,虽然写的值看起来是字符串,因为使用了""包裹起来。但是abc
已经是是js表达式了。所以这里会报错,因为没有定义abc
。
如果需要输出abc
字符串,需要再加一层单引号
<body>
<div id="root">
<!-- 界面将渲染字符串abc,而不会渲染msg的值 -->
<div v-text="'abc'">{{msg}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
msg: 'hello word'
}
}
})
</script>
</body>
v-html
v-html
的作用就是渲染富文本的的指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
<div>{{ msg }}</div>
<div v-html="msg"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#root',
data() {
return {
msg: '<p><span style="color: red">hello</span>, my name is xxx</p>'
}
}
})
</script>
</body>
</html>
第一行使用的{{}}直接渲染的话,是被转义过的,那么html标签就会直接被渲染到页面
如果要输出不带html标签转义的内容,采用v-html
渲染。第二行就是采用v-html
解决页面加载闪烁出现语法问题
方案:使用v-cloak
指令搭配css样式解决
模拟代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="root">
<div>{{ msg }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 模拟线上网络慢的情况
setTimeout(() => {
const app = new Vue({
el: '#root',
data() {
return {
msg: 'hello'
}
}
})
}, 3000)
</script>
</body>
</html>
效果
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 这个样式,只有在Vue实例化之前才有效 */
[v-cloak] {
background-color: red;
}
</style>
</head>
<body>
<div id="root" v-cloak>
<div>{{ msg }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 模拟线上网络慢的情况
setTimeout(() => {
const app = new Vue({
el: '#root',
data() {
return {
msg: 'hello'
}
}
})
}, 3000)
</script>
</body>
</html>
会在渲染之前加上样式,实例化之后样式会无效
这是渲染之后,红色背景样式没了。
所以可以利用这个特性实现闪烁问题,在渲染之前先隐藏掉。Vue
实例化后隐藏样式将会无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 这个样式,只有在Vue实例化之前才有效 */
[v-cloak] {
display: none
}
</style>
</head>
<body>
<div id="root" v-cloak>
<div>{{ msg }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 模拟线上网络慢的情况
setTimeout(() => {
const app = new Vue({
el: '#root',
data() {
return {
msg: 'hello'
}
}
})
}, 3000)
</script>
</body>
</html>