来源于公众号：【 Python野路子】
野路子
Python野路子
下面我们学习常用的模板语法，也就枯燥的开始了！！
插值语法
{{}}与v-text
用来渲染纯文字，如果我们想在页面渲染一个data中的变量，则可以通过下面方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue</title>
<!-- 直接CDN方式引入vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root">
<h2>{{ message }}，加油学！</h2>
<h2 v-text="message">，加油学！</h2>
</div>
</body>
<script>
// 生命周期函数：在某一时刻会自动执行的函数
const app = Vue.createApp({
data () {
return {
message: 'Hello Vue'
}
}
})
const vm = app.mount('#root')
</script>
</html>
都可以达到这个效果：
我们可以看到直接使用{{}},可以拼接字符串。使用v-text，会覆盖内容标签外的“，加油学！”。
使用{{}}还可以这样：
<body>
<div id="root"></div>
</body>
<script>
// 生命周期函数：在某一时刻会自动执行的函数
const app = Vue.createApp({
data () {
return {
message:'hello Vue'
}
},
// template: '<div>{{ message}}</div>',
// vue的胡子语法中，放入的是js程序(变量/短语句)
//template: '<div>{{message.split("").reverse().join("")}}</div>',
// 操作操作数值
//template: '<div>{{message + 1}}',
//操作三元表达式 A ? B:C
template: '<div>{{ message ? "1" : "0" }}</div>',
})
const vm = app.mount('#root')
</script>
v-html
在开发过程中，有时会输出有格式的动态内容，比如输出带颜色文本。如果用插值的方式，输出的为文本内容，显然满足不了要求。如果我们想动态在字符串中拼接标签并且展示在页面上，这时就要用到v-html指令了。
我们使用先使用上面两种方式编写看看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue</title>
<!-- 直接CDN方式引入vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 生命周期函数：在某一时刻会自动执行的函数
const app = Vue.createApp({
data () {
return {
message:'<strong>hello Vue</strong>'
}
},
template: '<div>{{ message }}</div>',
// 也可以使用v-text
//template: '<div v-text="message"></div>',
});
const vm = app.mount('#root')
</script>
</html>
可以看到Html标签没有解析，只是以字符串的形式显示出来。
我们再用v-html标签：
template: '<div v-html="message"></div>',
html标签被解析了。可以看到使用v-html指令，存在安全问题，本网站内部数据可以使用，来自第三方的数据不可以用。
v-pre
浏览器解析引擎遇到vue的插值符号{{}}时会自动解析，当你想输出不被解析的纯文本时，可以使用v-pre指令。显示原始信息，跳过编译过程。
<body>
<div id="root">
<h2>{{ message }}</h2>
<h2 v-pre>{{ message }}</h2>
</div>
</body>
<script>
// 生命周期函数：在某一时刻会自动执行的函数
const app = Vue.createApp({
data () {
return {
message: 'Hello Vue'
}
}
})
const vm = app.mount('#root')
</script>
未使用v-pre指令之前，data数据保存着message的值Hello Vue,使用v-pre指令之后，输出纯文本值{{message}}。
数据响应式
如何理解响应式：
- HTML5中的响应式（屏幕尺寸的变化导致样式的变化）；
- 数据的响应式（数据的变化导致页面内容的变化）。
什么是数据绑定：
- 数据绑定，就是将数据填充到标签中。
v-once
只编译一次，只想展示第一次变量中展示的数据，以后变量改变了，页面展示的数据也不跟随改变，可以使用v-once，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
<body>
<div id="root">
<p v-once>{{message}}</p>
<p>{{message}}</p>
</div>
</body>
<script>
// 生命周期函数：在某一时刻会自动执行的函数
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue'
}
}
})
const vm = app.mount('#root')
</script>
刚开始显示
我们尝试来修改变量message的值：
v-cloak
一般前端页面请求数据都是服务器实时返回的，但是有时候可能网络慢，会有些延迟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue实现选项卡功能</title>
<!-- 直接CDN方式引入vue.js -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
</body>
<script>
setTimeout(() => {
const app = Vue.createApp({
data() {
return {
msg: 'Hello 野路子'
};
}
}).mount('#app');
}, 1000); // 延迟1s
</script>
</html>
上面在vue实例解析前直接按照字符串渲染，显示：
过了1s后，vue实例解析之后，显示具体的值：
为了避免刚开始显示{{msg}}，我们可以加上个属性v-cloak，再加样式，隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue实现选项卡功能</title>
<!-- 直接CDN方式引入vue.js -->
<script src="https://unpkg.com/vue@next"></script>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>{{msg}}</h1> <!-- 添加属性 -->
</div>
</body>
<script>
setTimeout(() => {
const app = Vue.createApp({
data() {
return {
msg: 'Hello 野路子'
};
}
}).mount('#app');
}, 1000);
</script>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)