current position:Home>4. Vue

4. Vue

2022-09-23 06:43:30aqr-lmy

第二章 Vue

1. 目标

  • 了解什么是框架
  • 了解什么是Vue
  • 掌握Vue的基本语法
  • 了解Vue的生命周期

2. 内容

2.1 什么是框架

任何编程语言在最初的时候都是没有框架的,后来随着在实际开发过程中不断总结『经验』,积累『最佳实践』,慢慢的人们发现很多『特定场景』下的『特定问题』总是可以『套用固定解决方案』.

于是有人把成熟的『固定解决方案』收集起来,整合在一起,就成了『框架』.

在使用框架的过程中,Often you just need to tell the framework『做什么(声明)』,而不需要关心框架『怎么做(编程)』.

对于Java程序来说,To use a framework is to import those packages『固定解决方案』的jar包,然后通过『配置文件』告诉框架做什么,就能够大大简化编码,提高开发效率.junit其实就是一款单元测试框架.

而对于JavaScript程序来说,To use a framework is to import those packages『固定解决方案』的『js文件』,然后在框架的基础上编码.

用洗衣服来类比框架:

典型应用场景:洗衣服

输入数据:衣服、洗衣液、水

不使用框架:手洗

使用框架:使用洗衣机,对人来说,只需要按键,具体操作是洗衣机完成的.人只是告诉洗衣机做什么,具体的操作是洗衣机完成的.

实际开发中使用框架时,Also mainly tells the framework what to do,具体操作是框架完成的.

2.2 Vue的简介

2.2.1 Vue的作者介绍

在为AngularJS工作之后,Vue的作者尤雨溪开Vue.js.他声称自己的思路是提取Angular中自己喜欢的部分,构建出一款相当轻量的框架.

Vue最早发布于2014年2月.作者在Hacker News、Echo JS与 Reddit的JavaScript版块发布了最早的版本.一天之内,Vue 就登上了这三个网站的首页.

Vue是Github上最受欢迎的开源项目之一.同时,在JavaScript框架/函数库中, Vue所获得的星标数已超过React,并高于Backbone.js、Angular 2、jQuery等项目.

2.2.2 Vue的官网介绍

Vue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.

**官网地址:**https://cn.vuejs.org/

2.3 准备Vue.js环境

  1. Vue框架的js文件获取

    官网提供的下载地址:https://cdn.jsdelivr.net/npm/vue/dist/vue.js

  2. 创建空vue.js文件,将官网提供的vue.js文件的内容复制粘贴到本地vue.js文件中

2.4 Vue的入门案例

  1. 创建工程,导入vue.js文件放入工程的js文件夹中

  2. 创建demo01.html(引入vuejs,定义div,创建vue实例)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的入门</title>
    <!-- 在js中框架:In fact, it is an external onejs文件 要使用它的话,就需要在HTML页面中使用script标签的srcproperties bring it in -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 目标:使用vue,Combine data models and views(div)进行绑定 实现步骤: 1. To specify an area,作为vue的模板(使用区域) 2. below this area(外面)编写一个script标签,在script标签中编写vue代码 2.1 var vue = new Vue() 2.2 通过json设置vue的内容 1. el: 用idThe selector indicates which region can be usedvue 2. data: Represents the data model to declare,all written indata里面 2.3 Bind the data model to the view using interpolation expressions -->
    <div id="app">
        <div>{
   {city}}</div>
    </div>
    <script> var vue = new Vue({
       "el":"#app", "data":{
       "city":"武汉" } }) </script>
</body>
</html>

2.5 声明式渲染

2.5.1 概念
2.5.1.1 声明式

『声明式』是相对于『编程式』而言的.

  • 声明式:告诉框架做什么,具体操作由框架完成
  • 编程式:自己编写代码完成具体操作
2.5.1.2 渲染

在这里插入图片描述

上图含义解释:

  • 蓝色方框:HTML标签
  • 红色圆形:动态、尚未确定的数据
  • 蓝色圆形:经过程序运算以后,计算得到的具体的,可以直接在页面上显示的数据、
  • 渲染:程序计算动态数据得到具体数据的过程
2.5.2 案例

HTML代码

<!-- 使用{
    {}}格式,指定要被渲染的数据 -->
<div id="app">{
   {message}}</div>

vue代码

// 1.创建一个JSON对象,作为new Vue时要使用的参数
var argumentJson = {
    
	
	// el用于指定Vue对象要关联的HTML元素.el就是element的缩写
	// 通过id属性值指定HTML元素时,语法格式是:#id
	"el":"#app",
	
	// data属性设置了Vue对象中保存的数据
	"data":{
    
		"message":"Hello Vue!"
	}
};

// 2.创建Vue对象,传入上面准备好的参数
var app = new Vue(argumentJson);

在这里插入图片描述

2.5.3 查看声明式渲染的响应式效果

在这里插入图片描述

通过验证Vue对象的『响应式』效果,看到Vue对象和页面上的HTML标签确实是始终保持着关联的关系,同时看到Vue在背后确实是做了大量的工作.

2.6 绑定文本

2.6.1 基本语法

v-text=“要绑定的数据模型”

2.6.2 案例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue绑定文本</title>
    <!-- 在js中框架:In fact, it is an external onejs文件 要使用它的话,就需要在HTML页面中使用script标签的srcproperties bring it in -->
    <script src="../js/vue.js"></script>
</head>
<body>
<!-- 目标:使用vue,Combine data models and views(div)进行绑定 实现步骤: 1. To specify an area,作为vue的模板(使用区域) 2. below this area(外面)编写一个script标签,在script标签中编写vue代码 2.1 var vue = new Vue() 2.2 通过json设置vue的内容 1. el: 用idThe selector indicates which region can be usedvue 2. data: Represents the data model to declare,all written indata里面 2.3 Bind the data model to the view using interpolation expressions -->
<div id="app">
    <!-- v-textIn fact, the value of the data model is bound to the tag body -->
    <div v-text="city"></div>
    <div>{
   {city}}</div>
</div>

<script> var vue = new Vue({
       "el":"#app", "data":{
       "city":"武汉" } }) </script>
</body>
</html>

2.7 绑定元素属性

2.7.1 基本语法

v-bind:HTML标签的原始属性名

2.7.2 案例代码

HTML代码

<div id="app">
    <!-- 绑定属性: v-bind:属性名="数据模型" 简写: :属性名="数据模型" -->
    <input type="text" :id="idValue" :value="inputValue"/>
</div>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "inputValue":"张三疯",
        "idValue":1
    }
});

扩展:

v-bind:属性名="属性值"可以简写成 :属性名=“属性值”

2.8 双向数据绑定

2.8.1 提出问题

在这里插入图片描述

而使用了双向绑定后,就可以实现:页面上数据被修改后,Vue对象中的数据属性也跟着被修改.

2.8.2 案例代码

HTML代码

<div id="app">
    <!-- 双向绑定,For form itemsvalue属性,使用v-model:value="数据模型" 双向绑定的作用: It is convenient for users to obtain the content of the form item through the data model(value) Shorthand for two-way binding: v-model="数据模型" -->
    <input type="text" v-model="inputValue"/>
</div>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "inputValue":"张三疯"
    }
});

页面效果

p标签内的数据能够和文本框中的数据实现同步修改:

在这里插入图片描述

扩展:

  1. v-model:value=“值” 可以简写成 v-model=“值”

  2. trim修饰符

实际开发中,要考虑到用户在输入数据时,有可能会包含前后空格.The spaces before and after these are all interference factors for the program to run,要去掉.在v-model后面加上.trim修饰符即可实现.

<input type="text" v-model.trim="vueValue" />

VueWill automatically strip leading and trailing spaces when the textbox loses focus.

2.9 条件渲染

根据Vue对象中,数据属性的值来判断是否对HTML页面内容进行渲染.

2.9.1 v-if

HTML代码

<div id="app">
    <!-- 目标是:isShow为true则显示图片,isShow为falsethen hide the picture 实现方案: 使用Vue的条件渲染 1. v-if="数据模型" -->
    <img v-if="isShow" src="../img/mm.jpg" width="409" height="292"/>
</div>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "isShow":false
    }
});
2.9.2 v-if和v-else

HTML代码

<div id="app">
    <!-- 目标是:isShow为true则显示图片,isShow为falsethen hide the picture 实现方案: 使用Vue的条件渲染 1. v-if="数据模型" v-else="数据模型" 目标: 如果isShow为true则显示mm.jpg,如果为false则显示girl.jpg -->
    <img v-if="isShow" src="../img/mm.jpg" width="409" height="292"/>
    <img v-else="isShow" src="../img/girl.jpg">
</div>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "isShow":true
    }
});
2.9.3 v-show

HTML代码

<div id="app03">
	<h3>v-show</h3>
	<img v-show="flag" src="/pro03-vue/images/mi.jpg" />
</div>

Vue代码

var app03 = new Vue({
    
    "el":"#app03",
    "data":{
    
        "flag":true
    }
});

2.10 列表渲染

2.10.1 迭代一个简单的数组

HTML代码

<div id="app01">
	<ul>
		<!-- 使用v-for语法遍历数组 -->
		<!-- v-for的值是语法格式是:引用数组元素的变量名 in Vue对象中的数组属性名 -->
		<!-- 在文本标签体中使用{
    {引用数组元素的变量名}}渲染每一个数组元素 -->
		<li v-for="fruit in fruitList">{
   {fruit}}</li>
	</ul>
</div>

Vue代码

var app01 = new Vue({
    
	"el":"#app01",
	"data":{
    
		"fruitList": [
			"apple",
			"banana",
			"orange",
			"grape",
			"dragonfruit"
		]
	}
});
2.10.2 迭代一个对象数组

HTML代码

<style type="text/css"> /*设置样式*/ table,th,td {
       border-collapse: collapse; border: 1px solid black; padding: 5px; } </style>

<div id="app">
	<table>
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>专业</th>
		</tr>
		<tr v-for="employee in employeeList">
			<td>{
   {employee.empId}}</td>
			<td>{
   {employee.empName}}</td>
			<td>{
   {employee.empAge}}</td>
			<td>{
   {employee.empSubject}}</td>
		</tr>
	</table>
</div>

Vue代码

var app = new Vue({
    
	"el":"#app",
	"data":{
    
		"employeeList":[
			{
    
				"empId":11,
				"empName":"tom",
				"empAge":111,
				"empSubject":"java"
			},
			{
    
				"empId":22,
				"empName":"jerry",
				"empAge":222,
				"empSubject":"php"
			},
			{
    
				"empId":33,
				"empName":"bob",
				"empAge":333,
				"empSubject":"python"
			}
		]
	}
});

2.11 事件驱动

2.11.1 案例一: 字符串顺序反转

HTML代码

<div id="app">
    <div v-text="message"></div>
    <!-- 给按钮绑定点击事件: v-on:事件名="函数" 事件绑定的简写: @事件名="函数" -->
    <button type="button" @click="fn1()">按钮</button>
    <button type="button" @click="reverseMessage()">反转字符串</button>
</div>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "message":"Hello world"
    },
    "methods":{
    
        //vueThe functions are declared in methods里面的
        fn1(){
    
            alert("我被点击了...")
        },
        reverseMessage(){
    
            //将divThe content in is reversed,也就是将message反转
            //1. 将messageDivide the empty string into an array
            //this.message
            var arr = this.message.split(""); //["H","e","l","l","o"," ","w","o","r","l","d"]
            //2. 将数组反转
            var reverseArr = arr.reverse(); //["d","l","r","o","w"," ","o","l","l","e","H"]
            //3. Concatenates arrays into a single string with an empty string
            this.message = reverseArr.join("")
        }
    }
});
2.11.2 案例二:获取鼠标移动时的坐标信息

HTML代码

<!--样式-->
<style> #area{
       width: 500px; height: 500px; border: 1px solid black; } </style>
<div id="app">
    <!-- 绑定鼠标移动事件,Get the coordinates of the mouse when the mouse movement event is triggered -->
    <div id="area" @mousemove="recordPosition()"></div>

    <!-- Displays the coordinates of the current mouse position -->
    <p v-text="pointPosition"></p>
</div>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "pointPosition":"The coordinates of the mouse have not been obtained yet"
    },
    "methods":{
    
        recordPosition(){
    
            //Here we need to get the coordinates of the mouse
            //event表示当前事件
            this.pointPosition = event.clientX+","+event.clientY
        }
    }
});

扩展:

v-on:事件名="函数"可以简写成@事件名=“函数”

2.11.3 取消控件的默认行为
2.10.3.1 控件默认行为
  • 点超链接会跳转页面
  • 点表单提交按钮会提交表单

本来控件的默认行为是天经地义就该如此的,But if you want to click and see if you want to jump based on the result of the judgment,At this time, the default behavior of mindless jumping does not meet expectations.

2.11.3.2 取消方式

调用事件对象的**preventDefault()**方法.

超链接举例

HTML代码:

<div id="app">
    <a href="https://www.baidu.com" @click="fn1()">跳转到百度</a>
</div>

Vue代码:

var vue = new Vue({
    
    "el":"#app",
    "data":{
    

    },
    "methods":{
    
        fn1(){
    
            console.log("hello world...")


            //Prevents the default behavior of the control
            event.preventDefault()
        }
    }
});

表单提交按钮举例

HTML代码:

<div id="app">
    <form action="https://www.baidu.com" method="get">
        用户名<input type="text" name="username"/><br/>
        <button type="submit" @click="fn2()">提交按钮</button>
    </form>
</div>

JavaScript代码:

var vue = new Vue({
    
    "el":"#app",
    "data":{
    

    },
    "methods":{
    
        fn2(){
    
            console.log("The form's submit button was clicked...")

            event.preventDefault()
        }
    }
});
2.11.4 阻止事件冒泡

在这里插入图片描述

图中的两个div,他们的HTML标签是:

<!--样式-->
<style> #outer{
       width: 400px; height: 400px; background-color: lightskyblue; } #inner{
       width: 200px; height: 200px; background-color: lightgreen; } </style>
<div id="app">
    <div id="outer" @click="fn1()">
        <div id="inner" @click="fn2()"></div>
    </div>
</div>

点击里面的div同时也等于点击了外层的div,此时如果两个div上都绑定了单击响应函数那么就都会被触发:

所以事件冒泡就是一个事件会不断向父元素传递,直到window对象.

If this is not the desired effect then an event object can be usedstopPropagation()函数阻止.

var vue = new Vue({
    
    "el":"#app",
    "methods":{
    
        fn1(){
    
            console.log("外层的div被点击了...")
        },
        fn2(){
    
            console.log("内层的div被点击了...")

            //点击内层的div,Only make the inner layerdiv触发事件,without passing to the outer layer,This is what stops the bubbling of events
            event.stopPropagation()
        }
    }
})
2.11.5 Vue事件修饰符

对于事件修饰符,Vue官网的描述是:

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求.尽管可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节.

2.11.5.1 取消控件的默认行为

控件的默认行为指的是:

  • 点击超链接跳转页面
  • 点击表单提交按钮提交表单

实现这个需求使用的Vue事件修饰符是:.prevent

<a href="http://www.baidu.com" @click.prevent="clickAnchor">超链接</a>

<form action="http://www.baidu.com" method="post">
	<button type="submit" @click.prevent="clickSubmitBtn">提交表单</button>
</form>
2.10.5.2 取消事件冒泡

实现这个需求使用的Vue事件修饰符是:.stop

<div id="outterDiv" @click="clickOutterDiv">
	<div id="innerDiv" @click.stop="clickInnerDiv"></div>
</div>

2.12 侦听属性

2.12.1 提出需求
<div id="app">
	<p>尊姓:{
   {firstName}}</p>
	<p>大名:{
   {lastName}}</p>
	尊姓:<input type="text" v-model="firstName" /><br/>
	大名:<input type="text" v-model="lastName" /><br/>
	<p>全名:{
   {fullName}}</p>
</div>

在上面代码的基础上,希望firstName或lastName属性发生变化时,修改fullName属性.此时需要对firstName或lastName属性进行『侦听』.

具体来说,所谓『侦听』就是对message属性进行监控,当firstName或lastName属性的值发生变化时,调用准备好的函数.

2.12.2 Vue代码

在watch属性中声明对firstName和lastName属性进行『侦听』的函数:

var app = new Vue({
    
	"el":"#app",
	"data":{
    
		"firstName":"jim",
		"lastName":"green",
		"fullName":"jim green"
	},
	"watch":{
    
		"firstName":function(inputValue){
    
			this.fullName = inputValue + " " + this.lastName;
		},
		"lastName":function(inputValue){
    
			this.fullName = this.firstName + " " + inputValue;
		}
	}
});

2.13 案例练习

2.13.1 功能效果演示

在这里插入图片描述

2.13.2 任务拆解
  • 第一步:显示表格
  • 第二步:显示四个文本框
  • 第三步:创建一个p标签用来显示用户在文本框中实时输入的内容
  • 第四步:点击添加记录按钮实现记录的添加
2.13.3 第一步:显示表格

HTML标签

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>专业</th>
        <th>操作</th>
    </tr>
    <tr v-for="(emp,index) in employeeList">
        <td v-text="emp.empId"></td>
        <td v-text="emp.empName"></td>
        <td v-text="emp.empAge"></td>
        <td v-text="emp.empSubject"></td>
        <td>
            <button type="button">删除</button>
        </td>
    </tr>
</table>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "employeeList":[
            {
    
                "empId":"1",
                "empName":"张三",
                "empAge":20,
                "empSubject":"Java"
            },
            {
    
                "empId":"2",
                "empName":"李四",
                "empAge":21,
                "empSubject":"PHP"
            },
            {
    
                "empId":"3",
                "empName":"王五",
                "empAge":22,
                "empSubject":"C++"
            }
        ]
    }  
});
2.13.4 第二步:Click the Delete button to delete employee information

HTML标签

<table>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>专业</th>
        <th>操作</th>
    </tr>
    <tr v-for="(emp,index) in employeeList">
        <td v-text="emp.empId"></td>
        <td v-text="emp.empName"></td>
        <td v-text="emp.empAge"></td>
        <td v-text="emp.empSubject"></td>
        <td>
            <button type="button" @click="deleteEmployee(index)">删除</button>
        </td>
    </tr>
</table>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "employeeList":[
            {
    
                "empId":"1",
                "empName":"张三",
                "empAge":20,
                "empSubject":"Java"
            },
            {
    
                "empId":"2",
                "empName":"李四",
                "empAge":21,
                "empSubject":"PHP"
            },
            {
    
                "empId":"3",
                "empName":"王五",
                "empAge":22,
                "empSubject":"C++"
            }
        ]
    },
    "methods":{
    
        deleteEmployee(i){
    
            //Deletes the row where the current button is located:其实就是删除employeeListthe corresponding element in 
            //在employeeListThe array should be deleted according to the subscript
            this.employeeList.splice(i,1)
        }
    }
});
2.13.5 第三步:Bind forms and employee information

HTML标签

<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <tr v-for="(emp,index) in employeeList">
            <td v-text="emp.empId"></td>
            <td v-text="emp.empName"></td>
            <td v-text="emp.empAge"></td>
            <td v-text="emp.empSubject"></td>
            <td>
                <button type="button" @click="deleteEmployee(index)">删除</button>
            </td>
        </tr>
    </table>

    <form>
        编号<input v-model="employee.empId" type="text"/><br/>
        姓名<input v-model="employee.empName" type="text"/><br/>
        年龄<input v-model="employee.empAge" type="text"/><br/>
        专业<input v-model="employee.empSubject" type="text"/><br/>
        <button type="button">添加员工信息</button>
    </form>
</div>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "employeeList":[
            {
    
                "empId":"1",
                "empName":"张三",
                "empAge":20,
                "empSubject":"Java"
            },
            {
    
                "empId":"2",
                "empName":"李四",
                "empAge":21,
                "empSubject":"PHP"
            },
            {
    
                "empId":"3",
                "empName":"王五",
                "empAge":22,
                "empSubject":"C++"
            }
        ],
        //The data model binds the content of each form item
        "employee":{
    
            "empId":"4",
            "empName":"赵六",
            "empAge":23,
            "empSubject":"Kotlin"
        }
    },
    "methods":{
    
        deleteEmployee(i){
    
            //Deletes the row where the current button is located:其实就是删除employeeListthe corresponding element in 
            //在employeeListThe array should be deleted according to the subscript
            this.employeeList.splice(i,1)
        }
    }
});

测试是否正确的方式是:在控制台尝试修改Vue对象的数据属性值:

在这里插入图片描述

2.13.6 点击添加记录按钮

往表格中添加数据其实就是将表单上输入的数据this.employee加入到数组this.employeeList

添加完之后清空表单数据,其实就是设置this.employee= {}

HTML标签

<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        <tr v-for="(emp,index) in employeeList">
            <td v-text="emp.empId"></td>
            <td v-text="emp.empName"></td>
            <td v-text="emp.empAge"></td>
            <td v-text="emp.empSubject"></td>
            <td>
                <button type="button" @click="deleteEmployee(index)">删除</button>
            </td>
        </tr>
    </table>

    <form>
        编号<input v-model="employee.empId" type="text"/><br/>
        姓名<input v-model="employee.empName" type="text"/><br/>
        年龄<input v-model="employee.empAge" type="text"/><br/>
        专业<input v-model="employee.empSubject" type="text"/><br/>
        <button type="button" @click="insertEmployee()">添加员工信息</button>
    </form>
</div>

Vue代码

var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "employeeList":[
            {
    
                "empId":"1",
                "empName":"张三",
                "empAge":20,
                "empSubject":"Java"
            },
            {
    
                "empId":"2",
                "empName":"李四",
                "empAge":21,
                "empSubject":"PHP"
            },
            {
    
                "empId":"3",
                "empName":"王五",
                "empAge":22,
                "empSubject":"C++"
            }
        ],
        //The data model binds the content of each form item
        "employee":{
    
            "empId":"4",
            "empName":"赵六",
            "empAge":23,
            "empSubject":"Kotlin"
        }
    },
    "methods":{
    
        deleteEmployee(i){
    
            //Deletes the row where the current button is located:其实就是删除employeeListthe corresponding element in 
            //在employeeListThe array should be deleted according to the subscript
            this.employeeList.splice(i,1)
        },
        insertEmployee(){
    
            //1. Add the contents of the form to the table as a row:It is to add the data of the current form to the array asemployeeList数组的最后一个元素
            this.employeeList.push(this.employee)
            //2. 清空表单内容
            this.employee = {
    }
        }
    }
});

2.14 Vue的生命周期

2.14.1 概念

In the field of programming in various languages,『生命周期』都是一个非常常见的概念.一个对象从创建、初始化、工作再到释放、清理和销毁,会经历很多环节的演变.比如在JavaSEPhases of the thread's life cycle,Vue对象的生命周期,将来还要学习Servlet、Filter等Web组件的生命周期.

2.14.2 Vue对象的生命周期

在这里插入图片描述

2.14.3 生命周期钩子函数

VueAllows to add code through hook functions at specific lifecycle stages.

<div id="app">
    <div id="d1">{
   {city}}</div>
</div>
var vue = new Vue({
    
    "el":"#app",
    "data":{
    
        "city":"武汉"
    },
    //Vue的钩子函数,In fact, it can be thereVue的生命周期的特定阶段执行一些代码
    beforeCreate(){
    
        //输出数据模型city的值
        console.log("在beforeCreate钩子函数中获取city:"+this.city)
    },
    created(){
    
        //输出数据模型city的值
        console.log("在created钩子函数中获取city:"+this.city)
    },
    beforeMount(){
    
        //执行在虚拟视图替换真实视图之前,所以此时真实视图里面不会显示数据模型的数据
        console.log("在beforeMount钩子函数中获取真实视图的内容:"+document.getElementById("d1").innerHTML)
    },
    mounted(){
    
        //执行在虚拟视图替换真实视图之后,所以此时真实视图里面会显示数据模型的数据
        console.log("在mounted钩子函数中获取真实视图的内容:"+document.getElementById("d1").innerHTML)
    }
})

copyright notice
author[aqr-lmy],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/266/202209230621468443.html

Random recommended