【Vue.js】016-Vue：Vue的生命周期、定义Vue的template、插值操作

本文链接：https://blog.csdn.net/qq_29689343/article/details/112686185

五、Vue的生命周期

1、什么是Vue的生命周期

生命周期就是指一个对象的生老病死。生命周期（Life Cycle）的概念应用很广泛，特别是在政治、经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程；

2、Vue的生命周期

六、定义Vue的template

1、缩进

前端代码建议缩进两个空格；

2、模板

说明：这个模板用于类似Idea里面，这里仅作记录；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">{{message}}</div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好！'
				}
			})
		</script>
	</body>
</html>

七、插值操作

1、mustache插值语法

概述：

也就是双大括号语法（{{}}），将对应的文本进行显示；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 这种写法就是所谓的mustache语法 -->
			<h2>{{message}}</h2>
			<!-- 连接 -->
			<h2>{{firstName + lastName}}</h2>
			<!-- 加空格等内容 -->
			<h2>{{firstName + ' ' + lastName}}</h2>
			<!-- 另一种加空格的方式 -->
			<h2>{{firstName}} {{lastName}}</h2>
			<!-- 乘法 -->
			<h2>{{counter * 2}}</h2>
			<!-- 除法 -->
			<h2>{{counter / 2}}</h2>
			<!-- 加法 -->
			<h2>{{counter + 2}}</h2>
			<!-- 减法 -->
			<h2>{{counter - 2}}</h2>
		</div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好！',
					firstName: 'zi',
					lastName: 'bo',
					counter: 100
				}
			})
		</script>
	</body>
</html>

运行结果：

（下面的，都不常用！）

2、v-once

概述：

Vue的数据是响应式的，数据和视图同步发生变化，但有时候我们不需要这种响应式，我们想要一旦赋值不再改变，这个时候就需要v-once；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" v-once>{{message}}</div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好！'
				}
			})
			app.message = '哈哈哈';
		</script>
	</body>
</html>

运行结果：

3、v-html

概述：

有时候我们从服务器请求到的是html代码，不可直接输出，需要按照html的格式进行解析，这里就用到v-html；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" v-html="message"></div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '<h1>这是一个H1标题</h1>'
				}
			})
		</script>
	</body>
</html>

运行结果：

4、v-text

概述：

v-text与mustache语法非常相似，都是用于将数据显示在页面中；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" v-text="message"></div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好！'
				}
			})
		</script>
	</body>
</html>

运行结果：

5、v-pre

概述：

意思类似是取消mustache插值语法，使得{{xxx}}无效，直接显示{{xxx}}；

将里面的内容原封不动地显示出来，而不做任何解析；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" v-pre>{{message}}</div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					message: '你好!'
				}
			})
		</script>
	</body>
</html>

运行结果：

6、v-cloak

概述：

在某些情况下（没找到对应的值），浏览器会直接显示未编译的mustache标签，我们使用v-cloak使其不显示；

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" v-cloak>hello,{{name}}</div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					name1: 'zibo'
				}
			})
		</script>
	</body>
</html>