三阶段--day05--Vue.js MVVM 基本语法 分支结构 循环结构 form表单数据绑定 表单修饰符 计算属性 数组操作方式 vue生命周期

于 2021-07-27 13:13:30 发布
阅读量677 收藏 1
点赞数
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58580280/article/details/119141475
版权

目录

一、Vue JS

1、VUE介绍

2、 VUE组件说明

二、VUE基本语法

1 入门案例

2 数据显示

3 双向数据绑定

1）双向数据绑定原理

 4 MVVM设计思想

5 事件绑定v-on:

6 按键触发

7 计算器

8 按键修饰符

9 属性绑定v-bind:

10 分支结构语法

11 循环结构

12 form表单数据绑定

13 表单修饰符

14  计算属性与执行方法的区别

15 js数组操作

三 VUE的生命周期

1.生命周期函数:

2.生命周期函数的作用:

一、Vue JS

1、VUE介绍

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

Vue.js就是一个MV VM的实现者， 它的核心就是实现了DOM监听与数据绑定
Vue.js学习笔记:

JT-VUE课堂DEMO_闪耀太阳的博客-CSDN博客

2、 VUE组件说明

在这里插入图片描述

二、VUE基本语法

1 入门案例


入门案例步骤:
1.导入vue.js文件   html下部编辑
2.指定区域进行渲染  需要准备div vue.js代码
3.创建VUE.js对象 指定渲染区域 动态调用

知识点：插值表达式：{{key}}

el的作用: Vue实例挂载的元素节点，值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
	</head>
	<body>
		
		<!-- 
			入门案例步骤:
				1.导入vue.js文件   html下部编辑
				2.指定区域进行渲染  需要准备div vue.js代码
				3.创建VUE.js对象 指定渲染区域 动态调用
		 -->
		
		<!-- 2.指定区域 -->
		<div id="app">
			<!-- 在div中展现msg属性 
				插值表达式: {{key}}
			-->
			<h1>{{msg}}</h1>
		</div>
		
		
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			/**
			 * 语法:
			 * 		1.const 定义常量的
			 * 		2.let: 作用和var类似, 有作用域的概念
			 * 		3.var 特点:没有作用域
			 */
			const APP = new Vue({
				//1.指定区域
				el: "#app",
				//2.定义属性
				data: {
					//key:value
					msg: "您好VUE"
				}
			})
		</script>
		
	</body>
</html>

2 数据显示

命令: v-text /v-html/ v-once/ v-pre 指令，作用看注解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<titleVUE入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 特点：如果页面没有渲染完成，则直接展现给用户，刷新页面能看到代码
			 插值表达式需要直接显示
			 注意事项：只有显示时才用，输入操作不可使用-->
			<h1>{{msg}}</h1>
			
			<!-- 指令1.v-text指令：渲染就是虚拟DOM转为真实DOM的过程
			如果页面没有渲染完成，则不显示信息，刷新页面能看不到代码 -->
			<h1 v-text="msg"></h1>
			
			<!-- 指令2.v-html指令：直接渲染html标签 -->
			<div v-html="h3Html"></div>
			
			<!-- 指令3.v-pre指令：跳过预编译，显示标签体本身，要求显示log时 -->
			<div v-pre>{{msg}}</div>
			
			<!-- 指令4.v-once指令：只渲染一次 -->
			<div v-once>{{once}}</div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			 const APP=new Vue({
				 el:"#app",
				 data:{
					 msg:"您好VUE",
					 h3Html:"<h3>需要渲染</h3>",
					 once:"只渲染一次"
				 }
			 })
		</script>
	</body>
</html>

3 双向数据绑定

双向数据绑定: 实现了页面与数据的绑定. 页面变数据变 / 数据变页面变.

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据显示</title>
	</head>
	<body>
		<div id="app">
			<!-- 双向数据绑定 v-model
				1.数据端---页面
				2.页面-----数据
			   -->
			<input name="msg" v-model="msg"/><br>
			{{msg}}
			
		</div>
		<!-- 1.导入JS文件 -->
		<script src="../js/vue.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					msg: "数据随时修改"
				}
			})
		</script>	
	</body>
</html>

1）双向数据绑定原理

原理步骤:
1.用户修改页面时,通过DOM的监听器感知用户的修改行为,之后通过虚拟DOM对象,第一时间更新Model中的属性.
2.当数据发生变化,由虚拟DOM根据数据绑定的规则,第一事件通知真实的DOM对象.至此页面数据发生变化.

在这里插入图片描述

 4 MVVM设计思想

知识回顾: MVC模式 核心思想 减少代码的耦合性
M Model:封装的数据
V View 视图层: 数据的展现
C Contro 控制层 程序的流转的过程
衍生: 3层代码的结构 Controller—Service–Mapper/Dao
针对于: 后端服务器.

MVVM思想说明:
M: Model 封装的数据. 数据层
V: View 数据的展现 视图层
VM: viewModel视图数据的控制层 控制数据流转
MVVM设计思想是前端模拟后端为了解耦的一种设计思想.

5 事件绑定v-on:

  1.  语法：v-on：click="函数/直接计算"
  2.  简化语法：v-on: 可以简化为@click="函数/直接计算"
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<titleVUE入门案例</title>
	</head>
	<body>
		<div id="app">

			<!-- 需求：实现数据自增操作 
			      1.语法：v-on：click="函数/直接计算"
				  2.简化语法：v-on: 可以简化为@-->

		<h3>数值：{{num}}</h3>
		<br>
		<button v-on:click="num++">自增</button>
		<button @click="num++">自增简化</button>

		<!-- 如果没有参数则括号可以省略 -->
		<!-- <button @click="addNum()">计算</button> -->

		<button @click="addNum">自增方法</button>
		<button @click="subtractNum2()">简化自减的方法</button>
		</div>
		
		<script src="../js/vue.js"></script>
		
		<script>
			
			 const APP=new Vue({
				 //1.指定区域，element缩写
				 el:"#app",
				 //2.定义属性
				 data:{
					 //key:value
					 num:100
				 },
				 methods:{
					 //key 方法名:value 方法体
					 //调用自己的属性和方法使用this
					 addNum:function(){
						 this.num++
					 },
					 //方法的简化，因为JS脚本的支持
					 subtractNum2(){
						 this.num--
					 }
				 }
			 })
		</script>
	</body>
</html>

6 按键触发

种类:

<div>
	<input name="username" type="text" @keyup.enter="handler" value="回车触发"/>
	<input name="username" type="text" @keyup.space="handler" value="空格触发"/>
	<input name="username" type="text" @keyup.delete="handler" value="删除键触发"/>
	<input name="username" type="text" @keyup.left="handler" value="<-触发"/>
	<input name="username" type="text" @keyup.right="handler" value="->键触发"/>
</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<titleVUE入门案例</title>
	</head>
	<body>
		
		
		<div id="app">
			
			<!-- 
			   语法：v-on:keydown=""按下触发
			           v-on:keyup=""弹起来触发
			           v-on:keypress=""小键盘触发
			   需求：用户通过按钮输入，按特殊键位触发函数
			   要求1：按钮实现加法操作 num+=num2
			   要求2：用户按回车按钮实现触发
			   要求3：用户按空格键触发-->
			<h3>用户数据：{{num}}</h3>
			<!-- <input type="text" v-model="num2"/> -->
			<input type="text" v-model="num2" v-on:keyup.enter="addNum()"/>
			<!-- <button @click="addNum">计算</button> -->
		</div>
		
		
		<script src="../js/vue.js"></script>
		
		<script>
			
			 const APP=new Vue({
				 //1.指定区域，element缩写
				 el:"#app",
				 //2.定义属性
				 data:{
					num:100,
					num2:0
				 },
				 methods:{
					 addNum(){
						 //parseInt()将字符串转化为整数类型
						 this.num+=parseInt(this.num2)
					 }
				 }
			 })
		</script>
	</body>
</html>

7 计算器

使用双向数据绑定v-model和按键绑定v-on:keyup.enter

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<titleVUE入门案例</title>
	</head>
	<body>
		
		
		<div id="app">
			<!-- 注意事项：input框默认是字符串 -->
			请输入第一个数：<input type="text"  v-model="num1"/><br>
			请输入第二个数：<input type="text" v-model="num2" v-on:keyup.enter="addNum()"/><br>
			结果：{{count}}<br>
			<button @click="addNum">计算</button>
		</div>
		
		
		<script src="../js/vue.js"></script>
		
		<script>
			
			 const APP=new Vue({
				 //1.指定区域，element缩写
				 el:"#app",
				 //2.定义属性
				 data:{
					//num:100,
					count:0,
					num1:0,
					num2:0
				 },
				 methods:{
					 addNum(){
						 //parseInt()将字符串转化为整数类型
						 //this.num+=parseInt(this.num2)
						 this.count=parseInt(this.num1)+parseInt(this.num2)
					 }
				 }
			 })
		</script>
		
	</body>
</html>

页面效果:

8 按键修饰符

1) 阻止冒泡 .stop

  1. 难点: 元素可能需要嵌套,事件可能嵌套
  2. 说明: 如果事件嵌套则必然带来事件的冒泡.
  3. 解决方案: 阻止事件冒泡 .stop属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键修饰符</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 难点: 元素可能需要嵌套,事件可能嵌套
				 说明: 如果事件嵌套则必然带来事件的冒泡.
				 解决方案: 阻止事件冒泡  .stop属性
			 -->
			数值: {{num}}
			<div @click="num++">
				嵌套结构
				<button @click.stop="num++">计算</button>
			</div>
		<script src="../js/vue.js"></script>
		
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					num: 0
				},
				methods: {
					
				}
			})
		</script>	
	</body>
</html>

2) 阻止默认行为 .prevent

			<!-- 需求2:
				 a标签作用中的href的跳转是默认规则
				 要求: 用户点击a标签 不跳转页面,同时触发事件
				 解决: 阻止标签的默认行为  @click.prevent	
			 -->
			<a href="http://baidu.com" @click.prevent="aClick">百度</a>
			
			<!-- 用途: prevent阻止页面跳转  a标签/form表单 action同步请求 -->

9 属性绑定v-bind:

  1. 属性绑定 v-bind:xxxx 动态为属性赋值
  2. class绑定 如果用户需要切换class 则可以使用该操作
  3. class绑定 数据是否展现 可以通过 {class类型: true/false}

练习:

  1. a标签的绑定
  2. class类型绑定
  3. 属性切换
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>
			
			/* red 红色 宽度50  高度50 */
			.red {
				background-color: red;
				width: 50px;
				height: 50px;
			}
			
			.blue {
				background-color: aqua;
				width: 100px;
				height: 100px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- a标签的属性绑定
				需求: href中的属性动态赋值
				语法: v-bind:href="VUE中的属性"
			 -->
			<a v-bind:href="url">百度</a>
			<!-- 简化写法 -->
			<a :href="url">百度</a>
			<hr />
			
			<!-- 2.class类型绑定 
				class中可以定义多个样式.简化程序的调用
				需求: 需要动态的为class赋值
				规则: :class是属性的绑定,绑定之后查找对应的属性
				colorClass: "blue" 之后根据value值 blue 查找对应的CSS样式
				15上课
			-->
			<div :class="colorClass">我是class修饰</div>
			<hr >
			
			<!-- 3. 属性切换 
				    需求: 通过按钮控制样式是否展现 属性
					语法: :class={class类型的名称: false}
			-->
			<div :class="{red: flag}">我是class修饰</div>//单色切换
            <div :class="{red:flag,blue:!flag}" >我是class1修饰符</div>//双色切换
			<button @click="flag = !flag">切换</button>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					url: "http://www.baidu.com",
					colorClass: "blue",
					flag: true
				}
			})
		</script>	
	</body>
</html>

10 分支结构语法

用法: 如果数据为真则展现html标签
语法: v-if/v-else-if/v-else
要求: v-if可以单独使用
另外2个必须与v-if连用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 分支结构
				语法: 
					1.v-if   如果为真则展现标签
					2.v-else-if  必须与v-if连用
					3.v-else 	 必须与v-if连用	取反
				案例:
					要求: 按照用户的考试成绩 评级
						  >=90分  优秀
						  >=80分  良好
						  >=70分  中等
						  >=60分  及格
						  否则    不及格
			 -->
			<h3>评级</h3>
			请录入分数: <input v-model="score" />
			<div v-if="score >= 90 ">优秀</div>
			<div v-else-if="score >= 80 ">良好</div>
			<div v-else-if="score >= 70 ">中等</div>
			<div v-else-if="score >= 60 ">及格</div>
			<div v-else>不及格</div>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					score: 70
				}
			})
		</script>	
	</body>
</html>

页面效果:

11 循环结构

用法: 通过循环 展现标签+数据
语法:
v-for((value,index) in array)
v-for((value,key,index) in obj)
v-for(user in userList) 后续通过user.属性取值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 
				1.什么时候使用循环
					多次重复的执行同一个操作.
				2.什么数据使用循环
					1.数组
					2.对象
					3.数组套对象(集合)
			 -->
			 
			 <!--
					1. 遍历数据 将数组中的数据在页面中展现
			  -->
			 <p v-for="item in array" v-text="item">
				<!-- {{item}} -->
			 </p>
			 
			 <!-- 2. 获取下标  30上课
				  语法: v-for="(遍历的元素,遍历的下标) in array"
			  -->
			 <p v-for="(item,index) in array">
					下标:{{index}}~~~数据值:{{item}}
			 </p>
			 <hr >

			 <!-- 2. 遍历对象 
				v-for="(value,key,index下标)
			 -->
			 <p v-for="(value,key,index) in user">
				 下标:{{index}}~~属性:{{key}}~~值:{{value}}
			 </p>
			 
			 
              <!-- 3.1 遍历"集合" -->
			 <div v-for="user in userList">
				 ID: {{user.id}}
				 | name: {{user.name}} 
				 | age:{{user.age}}

              <!-- 3.2 遍历"集合"中的元素 -->
			 <p v-for="(value,key,index) in user">
				下标:{{index}}~~属性:{{key}}~~值:{{value}}
				 </p> -->
			 </div>
			 
			 <!-- 总结:
				 1. 如果遍历数组 参数 (value,index)
				 2. 如果遍历对象 参数 (value,key,index)
				 特点: 遍历数据在页面中展现
                 3.div标签盒子模型可以嵌套div等标签,而p标签内不能再嵌套p标签
			 -->
			 
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					array: ["郭晶晶","马龙","姚明"],
					user: {
						id: 100,
						name: "tomcat",
						age: 18
					},
					userList: [
						{
							id: 100,
							name: "tomcat",
							age: 18
						},
						{
							id: 200,
							name: "mysql",
							age: 20
						}
					]
				}
			})
		</script>	
	</body>
</html>

页面效果:

12 form表单数据绑定

  1. 一般数据进行提交时都会使用表单
  2. 每个表单几乎都写action,action现在几乎不用(同步操作),一般通过 阻止默认行为的方式 禁用action,之后手写点击事件后续操作(Ajax)
  3. 用户录入标签体:1.文本框2.单选3.多选4.下拉框5.文本域
  4. 掌握各个标签的双向数据绑定的写法:值有多个,使用数组
  5. 表单修饰符:1.number 2. trim 3.lazy

主要练习: form表单中如何实现双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用表单属性</title>
	</head>
	<body>
		<h1>本案例练习 表单提交数据时  数据如何与vue进行数据绑定</h1>
		<div id="app">
			<form id="userForm"action="http://www.baidu.com">
				<div>
					<span>
						姓名:
					</span>
					<span>
						<input type="text" name="name" v-model="name"/>
					</span>
				</div>
				<div>
					<span>性别:</span>
					<span>
						<!-- 单选框: name属性必须一致 -->
						<input type="radio" name="gender" value="男" id="man" v-model="gender"/>
						<label for="man">男</label>//使得选择"男"字即可选择,提供效率
						<input type="radio" name="gender" value="女" id="women" v-model="gender"/>
						<label for="women">女</label>
					</span>
				</div>
				<div>
					<span>爱好:</span>
					<input type="checkbox" name="hobbies" value="吃" v-model="hobbies"/>吃
					<input type="checkbox" name="hobbies" value="喝" v-model="hobbies"/>喝
					<input type="checkbox" name="hobbies" value="玩" v-model="hobbies"/>玩
				</div>
				<div>
					<span>职业</span>
					<!-- 如果需要设置为多选 则添加属性 -->
					<select name="occupation" v-model="occupation" multiple="true">
						<option value="工人">工人</option>
						<option value="教师">教师</option>
						<option value="工程师">工程师</option>
					</select>
				</div>
				<div>
					<span>个人简介</span>
					<textarea name="userInfo" style="width: 200px;height: 50px;" v-model="userInfo"></textarea>
				</div>
				<div>
					<!-- 阻止默认提交事件 -->
					<input type="submit"  value="提交" v-on:click.prevent="submitForm"/>
				</div>
			</form>
		</div>
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					name: '输入名称',
					gender: '女',
					//多个数据定义时 应该使用数组
					hobbies:	['吃','喝','玩'],
					occupation: ['工人'],
					userInfo: ''
				},
				methods: {
					submitForm(){
						//数据提交
						console.log("姓名:"+this.name)
						console.log("性别:"+this.gender)
						console.log('爱好:'+this.hobbies)
						console.log('职业:'+this.occupation)
						console.log('用户详情:'+this.userInfo)
						console.log('封装好数据之后,可以使用ajax方式实现数据提交')
					}
				}
			})
		</script>
	</body>
</html>

13 表单修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符</title>
	</head>
	<body>
		<h1>表单修饰符number/trim/lazy</h1>
		<div id="app">
			<!-- 
				语法:
					.number 只能输入数值类型
					.trim   去除左右两端空格
					.lazy   离焦事件才触发
			 -->
			 <h3>数据展现: {{age}}</h3>
			 年龄: <input type="text" v-model.number="age" />
			 <button @click="addNum">增加</button>
			 <hr />
			 用户输入的长度: {{name.length}} <br>
			 用户名: <input type="text" v-model.trim="name" />	
			 <hr />
			 展现数据lazy~~{{msg}}  <br>
			 <input type="text" v-model.lazy="msg"/>
		</div>
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					age: 18,
					name: '',
					msg: ''
				},
				methods: {
					addNum(){
						this.age += 1
					}
				}
			})
		</script>
	</body>
</html>

页面效果:

14  计算属性与执行方法的区别

为什么需要计算属性?

由于业务需要,表达式的业务逻辑可能比较复杂 阅读起来不够简洁,通过计算属性可以优化代码结构

1)复杂的操作如果通过插值表达式{{ }}封装,比较冗余

2)如果将复杂的操作封装为方法,调用一次执行一次,效率低

3)计算属性:

  1. 可以封装复杂操作
  2. 内部有缓存机制,只需要计算一次,多次调用,效率高

用户输入的内容进行反转(逆序):"Hello".split('').reverse().join('')

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<h1></h1>
		<div id="app">
			<!-- 需求:
				 将用户的输入内容进行反转
				 API:
					1.字符串转化为数组 拆串 split('')
					2.将数组倒序		.reverse()
					3.将数组转化为字符串 .join('')
					
				 计算属性功能用法:
					1.插值表达式中应该写简单的算数计算,如果复杂应该封装
					2.如果数据操作相同则应该简化过程.
				 总结: 计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)
			 -->
			<h3>数据展现:</h3> 
			{{reverse()}}<br>  <!-- 方法多次执行-->
			{{reverse()}}<br>
			{{reverse()}}<br>
			{{reverse()}}<br>
			{{reverseCom}}<br> <!-- 计算属性只执行一次-->
			{{reverseCom}}<br>
			{{reverseCom}}<br>
			{{reverseCom}}<br>
			<input type="text" v-model="msg"/>
		</div>
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					msg: 'abc'
				},
				methods: {
					reverse(){
						 console.log("方法执行!!!!!")
						 return this.msg.split('').reverse().join('')
					}
				},
				computed: {
					//key:value  必须添加返回值
					reverseCom(){
						console.log("计算属性!!!!")
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

 控制台效果:计算属性相对于方法 效率高(从虚拟DOM中直接获取结果)

15 js数组操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组操作</title>
	</head>
	<body>
		<h1>数组操作</h1>
		<div id="app">
			
			<!-- 数组的方法  java中的叫法push:入栈 pop弹栈
				push() 	在结尾追加元素
				pop()	删除最后一个元素
				shift()	删除第一个元素
				unshift() 在开头追加元素
				splice() 替换数组中的数据 !!!!
				sort()	 数据排序
				reverse() 数组反转
			 -->
			 输入框: <input type="text" v-model="msg"/><br>
			<span v-for="(value) in array">
				{{value}},
			</span><br>
			<button @click="push">push</button>
			<button @click="pop">pop</button>
			<button @click="shift">shift</button>
			<button @click="unshift">unshift</button>
			<button @click="splice">替换</button>
			
		</div>
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el:	"#app",
				data: {
					array: ["a","b","c"],
					msg: ''
				},
				methods: {
					push(){
						this.array.push(this.msg)
					},
					pop(){
						//数组数据会自动的更新
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						//在开头追加
						this.array.unshift(this.msg)
					},
					splice(){
						/**
						 * 参数: 3个参数
						 * 		arg1: 操作数据的起始位置 从0开始
						 * 		arg2: 操作的数量     阿拉伯数字
						 * 		arg3: 替换后的数据.可以有多个(可变参数类型)
						 * 案例:
						 * 		1.将第一个元素,替换为msg
						 * 			this.array.splice(0,1,this.msg)
						 * 		2.将前2个元素替换为msg
					*this.array.splice(0,2,this.msg) 前两个替换成一个msg,相当于改值+删除
				    *this.array.splice(0,2,this.msg,this.msg) 前2个替换,补齐2个数据,改值
						 * 		3.将最后一个替换为msg
						 * 			let index = this.array.length - 1;
									this.array.splice(index,1,this.msg)
								4.删除第二个元素
						 */
							//如果只有2个参数,则表示删除下标为1的值
							this.array.splice(1,1) 
					}
				}
			})
		</script>
	</body>
</html>

三 VUE的生命周期

1.生命周期函数:

1)初始化周期

  1. beforeCreate: vue对象实例化之前(刚开始)
  2. created
  3. beforeMount
  4. Mounted: 执行到这一步时,说明vue对象实例化成功(DIV渲染完成)

2)修改周期

  1. beforeUpdate:用户修改之前
  2. updated:用户修改数据之后

3)销毁周期

beforeDestroy:vue对象销毁前

destroyed:vue对象销毁后(最后一步)

2.生命周期函数的作用:

如果需要对vue对象中的数据进行额外的操作,则使用生命周期函数,目的是使框架的扩展性更好(实现定制化)

在这里插入图片描述

心猿意码~~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值