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

客官°小女子只卖身不卖艺 2023-10-05 02:53 7阅读 0赞

# **目录** #

五、Vue的生命周期

1、什么是Vue的生命周期

2、Vue的生命周期

六、定义Vue的template

1、缩进

2、模板

七、插值操作

1、mustache插值语法

概述：

代码演示：

运行结果：

2、v-once

概述：

代码演示：

运行结果：

3、v-html

概述：

代码演示：

运行结果：

4、v-text

概述：

代码演示：

运行结果：

5、v-pre

概述：

代码演示：

运行结果：

6、v-cloak

概述：

代码演示：

运行结果：

--------------------

# 五、Vue的生命周期 #

## 1、什么是Vue的生命周期 ##

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

## 2、Vue的生命周期 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

# 六、定义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">
    			
    			<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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

**（下面的，都不常用！）**

## 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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

## 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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

## 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>

### 运行结果： ###

![20210115193701242.png][]

## 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>

### 运行结果： ###

![20210115193747900.png][]

## 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>

### 运行结果： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4][]

[Link 1]: https://baike.baidu.com/item/%E6%94%BF%E6%B2%BB/169778
[Link 2]: https://baike.baidu.com/item/%E7%BB%8F%E6%B5%8E/403149
[Link 3]: https://baike.baidu.com/item/%E7%8E%AF%E5%A2%83/277567
[Link 4]: https://baike.baidu.com/item/%E6%8A%80%E6%9C%AF/832247
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210115193326218.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210115193450805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210115193533430.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210115193625222.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[20210115193701242.png]: https://img-blog.csdnimg.cn/20210115193701242.png
[20210115193747900.png]: https://img-blog.csdnimg.cn/20210115193747900.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021011519382187.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70