Vue学习笔记——第一部分

最新推荐文章于 2024-07-07 21:30:26 发布
最新推荐文章于 2024-07-07 21:30:26 发布
阅读量216 收藏 3
点赞数 1
文章标签： vue.js javascript intellij idea jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/codeqingchen/article/details/120146830
版权

本章目标

•理解MVVM思想

•vue介绍

•掌握Vue指令、计算属性、数据监听

•掌握Vue单向、双向绑定的方法

•理解Vue生命周期

•掌握使用axios进行ajax操作

•掌握Vue组件的定义和注册方式

•掌握父子和子父组件传值

•了解ElementUI中的常用组件

•掌握cli方式搭建项目、安装依赖

•掌握路由的配置跳转和嵌套

•了解使用Vuex实现组件传值

理解MVVM思想

什么是MVVM？MVVM是Model-View-ViewModel的缩写。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

vue.js介绍

•Vue是一套用于构建用户界面的渐进式的轻量级框架

•Vue是MVVM设计模式的具体实现方案

•Vue只关注视图层，便于与第三方库或既有项目整合

•Vue可以与现代化的工具链和各种类库结合使用，为复杂的SPA提供驱动

vue起步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入vue的库文件 -->
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<!-- 显示数据的层 -->
		<div id="app">
			{{message}} <!-- 文本差值表达式 模板语法 {{data的属性名}}-->
		</div>
	</body>
	<script type="text/javascript">
		/* 实例化 vue对象new Vue() 括弧放入json对象（key、value）*/
		var app = new Vue({
			el:"#app",		// 绑定一个页面已经存在的DOM元素作为vue挂载目标
			data:{			//data表示vue实例的数据对象
				message:"hello vue" 
			}
		});
	</script>
</html>

模板语法

•Vue.js中使用的是基于html的模版语法，可以将Dom元素绑定至Vue实例中的数据。

•页面中模版即就是通过{{}}方式来实现模版数据绑定。

•###1、数据绑定的方式

•+ 单向绑定

• 方式1：使用两对大括号{{}}

• 方式2：使用v-text、v-html

•+ 双向绑定：

• v-model指令实现

•

•###2、其他指令

• v-once 数据只绑定一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>单向绑定</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 模板语法 -->
			<!-- 1、单向绑定 双大括号语法 {{data数据属性名}} 插入文本值 -->
			<p>单向绑定大号括号语法：{{message}}</p>
			<!-- v-html指令 插入html代码 -->
			<p>使用v-html指令 插入HTML代码: <span v-html="rawHtml"></span></p>
			<!-- v-text指令 插入文本 -->
			<p>v-text指令 插入文本: <span v-text="rawHtml"></span></p>
			<!-- v-once指令 表示数据只绑定一次 -->
			<p v-once>v-once指令:{{message}} </p>
		</div>
	</body>
	<script type="text/javascript">
		//实例化vue对象
		var app = new Vue({
			el:"#app", //把页面已经存在的dom作为vue挂载目标
			data:{		//vue实例的数据对象
				message:"hello vue", 
				rawHtml:"<a href='http://www.baidu.com'>百度</a>"
			}
		});
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向绑定</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 单行文本 -->
			<input type="text" v-model="message"/>
			<p>message:{{message}}</p>
			<!-- 多行文本 -->
			<textarea v-model="message"></textarea>
			<p>message:{{message}}</p>
			<!-- 单选框 -->
			<input type="radio"  v-model="gender" value="男"/>男
			<input type="radio"  v-model="gender" value="女"/>女
			<p>gender:{{gender}}</p>
			<!-- 复选框 -->
			<input type="checkbox" v-model="hobbies" value="吃"/>吃
			<input type="checkbox" v-model="hobbies" value="喝"/>喝
			<input type="checkbox" v-model="hobbies" value="玩"/>玩
			<input type="checkbox" v-model="hobbies" value="乐"/>乐
			<p>hobbies:{{hobbies}}</p>
			<!-- 下拉菜单 -->
			<select v-model="grade">
				<option value="本科">本科</option>
				<option value="专科">专科</option>
				<option value="高中">高中</option>
			</select>
			<p>grade:{{grade}}</p>
			<hr/>
			<!-- 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 -->
			你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：
			<input type="text" v-model.lazy="message"/>
			<p>message:{{message}}</p>
			可以自动去除用户输入的字符首尾的空白字符，可以给v-model添加trim修饰符：
			<input type="text" v-model.trim="message"/>
			<p>message:{{message}}</p>
			转换用户输入的值为数值类型 ，可以给v-model天剑number修饰符：
			<input type="text" v-model.number="message"/>
			<p>message:{{message}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				message:"初始值",
				gender:"男",
				hobbies:["吃"],
				grade:"本科",
				age:15
			}
		});
	</script>
</html>

常用指令

v-bind

•###1、v-bind

•使用v-bind指令进行DOM属性绑定

•v-bind 用法：

• v-bind:属性名=“属性值”

• ##简写 :属性名=“属性值”

• :src=""

•style和class属性用法：

• style:

• .txt{color:#ff0000;} .bgcolor{background-color: #ccc;}

• html:

• <span :class="{txt:true,bgcolor:true}">文本内容</span>

v-bind属性数据绑定代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-bind:id="dynamicId">使用v-bind指令实现属性数据绑定</p>
			<p :id="dynamicId">使用v-bind指令的简写方式实现属性数据绑定</p>
		</div>
	</body>
	<script type="text/javascript">
		var app =new Vue({
			el:"#app",
			data:{
				dynamicId:"E201503"
			}
		});
	</script>
</html>

v-bind属性操作class和style的实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<style type="text/css">
			.active{
				color: #ff0000;
			}
			.bgcolor{
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div :class="{active:isActive,bgcolor:isBgcolor}">绑定class</div>
			<div :style="{color:activeColor,fontSize:fontSize}">绑定内联样式</div>
			<div v-bind:style="styleObject">绑定内联样式（绑定样式对象，代码更清晰）</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				isActive:true,
				isBgcolor:true,
				activeColor:"blue",
				fontSize:"30px",
				styleObject:{
					fontSize:"30px",
					color:"green"
				}
			}
		});
	</script>
</html>

v-if、v-elseif、v-else

•###2、v-if、v-elseif、v-else

•v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。

•可以使用v-else-if指令来充当 v-if 的“else-if 块”，可以连续使用。

•可以使用 v-else 指令来表示 v-if 的“else块”。

•v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

•v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

•控制切换一个元素是否显示也相当简单：

实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="isBl">显示</div>
			<div>哈哈</div>
			<!-- v-else必须紧跟在v-if或者v-else-if后面-，否则不显示-->
			<div v-else>不显示</div>
			
			<div v-if="type==='A'">A</div>
			<div v-else-if="type==='B'">B</div>
			<div v-else-if="type==='C'">C</div>
			<div v-else>非ABC</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				isBl:false,
				type:'B'
			}
		});
	</script>
</html>

v-for

•###3、v-for

•基于源数据多次渲染元素或模板块，对数组或对象进行循环操作。

•遍历一个数组和数组对象

实例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 1、v-for遍历一个数组 -->
			<!-- v-for 指令需要使用item in items 形式的特殊语法，其中items是元数据数组
			而item 是正在被迭代的数组元素别名-->
			<ul>
				<li v-for="item in arr">
					{{item}}
				</li>
			</ul>
			<!-- 2、v-for支持第二个参数 index表示索引 -->
			<ul>
				<li v-for="(item,index) in arr">
					索引为：{{index}}，元素值为：{{item}}
				</li>
			</ul>
			<!-- 3、v-for遍历一个对象数组 -->
			<ul>
				<li v-for="item in objs">
					{{item.name}}
				</li>
			</ul>
			<!-- 4、v-for遍历一个对象数组 -->
			<ul>
				<li v-for="(item,index) in objs">
					{{index}}--{{item.id}}--{{item.name}}
				</li>
			</ul>
			
			<table border="1px" cellspacing="0px">
				<tr>
					<td>编号</td>
					<td>用户名</td>
				</tr>
				<tr v-for="item in objs">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				//格式：key:value
				info:"父作用域中的属性",
				//value是一个数组，用[]表示一个数组
				arr:['a','b','c'],
				//value是对象数组，[]表示数组，{}表示对象，对象中每一对属性为key和value
				objs:[
					{id:1,name:"A"},
					{id:2,name:"B"},
					{id:3,name:"C"}
				]
			}
		});
	</script>
</html>

v-on

•###4、v-on

•用来绑定事件，用法：v-on:事件=“函数”，简写方式@事件=“函数”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- v-on指令监听DOM事件 -->
			<input type="button" value="事件监听器1(v-on)" v-on:click="method1()"/>
			<input type="button" value="事件监听器2(v-on)" v-on:click="method2('参数')"/>
			<input type="button" value="事件监听器3(v-on)" v-on:click="method3('有返回值')"/>
			<input type="button" value="事件监听器4(v-on)" v-on:click="method4()"/>
			<!-- v-on.once 表示只做一次-->
			<input type="button" value="只做一次事件绑定(v-on.once)" v-on:click.once="method4()" />
			<!-- 使用指令v-on的缩写@绑定事件 属性指令v-bind缩写绑定属性 -->
			<input type="button" value="事件监听器5(v-on缩写@绑定)" @click="method1()" :id="dymId"/>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				dymId:"E23650",
				name:"KING",
				obj:{
					username:"jack",
					password:"12345"
				},
				objs:[
					{
						username:"lucy",
						password:"123"
					},
					{
						username:"tom",
						password:"321"
					}
				]
			},
			methods:{
				method1:function(){
					console.log("method1无参函数");
				},
				method2:function(param){
					console.log("method2有参函数，参数为param:"+param);
				},
				method3:function(param){
					console.log("method3有参数函数，参数param:"+param);
					return "返回值";
				},
				method4:function(){
					//调用当前实例的其他方法  this表示当前实例(method4所在的实例)
					var result = this.method3("method4调用method3");
					console.log("result:"+result);
					//调用当前实例的data数据
					console.log("data:"+this.name);
					console.log("data:"+this.obj);
					console.log("data:"+this.objs);
				}
			}
		});
	</script>
</html>

计算属性

•### 1. 什么是计算属性

•计算属性也是用来存储数据的，但具有以下几个特点：

•

•+ 数据可以进行逻辑处理操作

•+ 可以对计算属性中的数据进行监视

•

•注意：

•

•+ 计算属性是基于它的依赖进行更新的，只有在相关依赖发生改变时才能更新。

•+ 计算属性是缓存的，只要相关依赖没有改变，多次访问计算属性得到的值是之前缓存的计算结果，不会多次执行

•

•get和set方法

•

•计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性的操作。

•默认只有get方法。

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<!--split('')按照字符分割，如果split参数是空字符串，那么就是所有单词分割  -->
		<!-- reverse()把数组的元素反转（数组原地反转） -->
		<!-- join('')把数组的元素按照传入的分隔符拼接,如果参数为空字符串，那么就是把数组元素直接拼接 -->
		<div id="app">
			<p>{{message}}</p>
			<p>{{message.split('').reverse().join('')}}</p>
			<!-- 可以像普通属性一样在模板中绑定计算属性-->
			<p>{{reverseMessage}}</p>
			<p>{{reverseMessage}}</p>
			<!-- 绑定2次数据，缓存关闭控制台打印2次，说明调用了2次 -->
			<p>{{myMessage}}</p>
			<p>{{myMessage}}</p>
			<p>{{reverseMessageMethod()}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				message: "hello" //属性名：属性值（普通数据，对象，数组）
			},
			computed: { //计算属性

				//计算属性缓存：计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
				//这就意味着	message还没有发生改变，多次访问reverseMessage，计算属性立刻返回之前的计算结果，而不必执行函数
				//计算属性就是一个属性，只不过属性值由计算函数得到的
				//格式：属性名:function(){....}
				//这个是计算属性get(计算属性只有一个函数就是默认get)
				reverseMessage: function() {
					console.log("计算属性.....");
					return this.message.split('').reverse().join('');
				},
				myMessage: {
                    //关闭缓存
					cache:false,
					/* 计算属性get */
					get: function() {
						console.log("myMessage的get计算属性..")
						return this.message;
					},
					/* 计算属性set */
					set: function(msg) {
						this.message = msg;
					}
				}
			},
			methods:{
				// reverseMessageMethod是一个方法名
				reverseMessageMethod: function(){
					console.log("调用函数.....")
					return this.message.split("").reverse().join("");
				}
			}
		});
		//app.myMessage="很好好";
	</script>
</html>

监听属性

监听属性watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。Vue实列将会在实例化时调用$watch(), 他会遍历watch对象的每一个属性。

**watch的使用场景是：**当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。

watch分为普通监听和深度监听

普通监听代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>信息：{{message}}</p>
			<!-- 双向绑定数据属性age -->
			<p>年龄：<input type="text" v-model="age"/></p>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				message:"",
				age:31,
				desc:"单身"
			},
			watch:{
				//监听数据属性age,当age发生变化，触发如下的匿名函数，但是第一次加载页面不触发函数
				age:function(newVal,oldVal){
					this.message = '今年'+newVal+"岁,"+this.desc;
				}
			}
		});
	</script>
</html>

理解handler方法及immediate属性

如上watch有一个特点是: 第一次初始化页面的时候, 是不会去执行age这个属性监听的, 只有当age值发生改变的时候才会执行监听计算. 因此我们上面第一次初始化页面的时候, ‘message’ 属性值默认为空字符串。那么我们现在想要第一次初始化页面的时候也希望它能够执行 ‘age’ 进行监听, 最后能把结果返回给 ‘message’ 值来。因此我们需要修改下我们的 watch的方法，需要引入handler方法和immediate属性, 代码如下所示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>信息：{{message}}</p>
			<!-- 双向绑定数据属性age -->
			<p>年龄：<input type="text" v-model="age"/></p>
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				message:"",
				age:31,
				desc:"单身"
			},
			watch:{
				//监听数据属性age,当age发生变化，触发如下的匿名函数，但是第一次加载页面不触发函数
				/* age:function(newVal,oldVal){
					this.message = '今年'+newVal+"岁,"+this.desc;
				} */
				//监听数据属性age，当age发生变化，触发如下的handler函数
				//age监听还加入了immediate为true的属性，表示第一次页面加载的时候也会执行该handler函数的
				age:{
					handler:function(newVal,oldVal){
						this.message = '今年'+newVal+"岁,"+this.desc;
					},
					immediate:true
				}
			}
		});
	</script>
</html>

理解deep属性

watch里面有一个属性为deep，含义是：是否深度监听某个对象的属性的值, 该值默认为false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>信息：{{obj.message}}</p>
			<!-- 双向绑定数据属性age -->
			<!-- <p>年龄：<input type="text" v-model="age"/></p> -->
            <!-- 双向绑定数据属性obj的age属性 -->
			 <p>年龄：<input type="text" v-model="obj.age"/></p> 
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:"#app",
			data:{
				/* message:"",
				age:31,
				desc:"单身" */
				
				//obj包含3个属性对象
				obj:{
					message:"",
					age:31,
					desc:"单身"
				}
			},
			watch:{
				//监听数据属性age,当age发生变化，触发如下的匿名函数，但是第一次加载页面不触发函数
				/* age:function(newVal,oldVal){
					this.message = '今年'+newVal+"岁,"+this.desc;
				} */
				//监听数据属性age，当age发生变化，触发如下的handler方法
				//age监听还加入了immediate为true的属性，表示第一次页面加载的时候也会执行该handler函数的
				/* age:{
					handler:function(newVal,oldVal){
						this.message = '今年'+newVal+"岁,"+this.desc;
					},
					immediate:true
				} */
				//监听obj对象
				obj:{
					handler:function(newVal,oldVal){
						this.obj.message = '今年'+newVal.age+"岁,"+this.obj.desc;
					},
					immediate:true,
					deep:true //需要添加deep为true即可对obj进行深度监听
				} 
			}
		});
	</script>
</html>

如上述代码, 如果我们不把 deep: true添加的话,当我们在输入框中输入值的时候，改变obj.age值后，obj对象中的handler函数是不会被执行到的。受JS的限制, Vue不能检测到对象属性的改变。它只能监听到obj这个对象的变化,比如说对obj变化操作会被监听到，但是对obj的内部属性的值变化监听不到。

watch 和 computed的区别是：

相同点：他们两者都是观察页面数据变化的。

不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。

VUE生命周期钩子

vue数据是怎么驱动视图的?

一堆数据放在那里是不会有任何作用的，它必须通过我们的View Model（视图模型）才能操控视图。

在这里插入图片描述

图中的model其实就是数据，一般我们写成js对象的格式；

中间的这个所谓View Model，就是

var vm = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!'
	}
})

我们把数据放到了vm里，然后把各种directive（命令）放到视图里，这样我们就可以以vm为媒介，通过改变数据来改变视图。

误区

vm实际上是Vue这个类的一个实例，非常容易混淆的是，你会很容易的以为

vm.el == '#app';
vm.data== {
	message: 'Hello Vue!'
};
vm.data.message =='Hello Vue!';

实际上这都是错误的，

以上虽然是错误的写法，有时候我们还是希望获得这些属性的，通过vm你需要这样写：

vm.$el === document.getElementById('app') //结果为true
vm.$data.message ==='Hello Vue!' //结果为true

这个$符代表的就是vm的真实属性了。

那么通过vm读取数据，实际上，vm.messasge == ‘Hello Vue!’, vm的属性是直接跟数据的key绑定的（至于怎样绑定的现在不用管),这是一种代理属性;

vue生命周期钩子

•每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
	data: {
		a: 1
	},
	created: function () {
		// `this` 指向 vm 实例 
		console.log('a is: ' + this.a)
	}
})
// => "a is: 1"

vue实例从创建到销毁的过程，称为生命周期，共有八个阶段
在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/642de4234a7440ea826f5c0983a792a4.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY29kZXFpbmdjaGVu,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期钩子函数</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="message"/>
			{{message}}
		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: {
				message: "hello"
			},
			//生命周期钩子函数
			beforeCreate: function() {
				console.log("beforeCreate 创建前状态======");
				console.log("el=" + this.$el);
				console.log("data=" + this.$data);
				console.log("message=" + this.message);
			},
			created: function() {
				console.log("beforeCreate 创建完毕状态======");
				console.log("el=" + this.$el);
				console.log("data=" + this.$data);
				console.log("message=" + this.message);
			},
			beforeMount:function(){
				console.log("beforeCreate 挂载前状态======");
				console.log("el=" + this.$el);
				console.log("data=" + this.$data);
				console.log("message=" + this.message);
			},
			mounted:function(){
				console.log("beforeCreate 挂载结束状态======");
				console.log("el=" + this.$el);
				console.log("data=" + this.$data);
				console.log("message=" + this.message);
			},
			beforeUpdate:function(){
				console.log("beforeCreate 更新前状态======");
				console.log("el=" + this.$el);
				console.log("data=" + this.$data);
				console.log("message=" + this.message);
			},
			updated:function(){
				console.log("beforeCreate 更新完成状态======");
				console.log("el=" + this.$el);
				console.log("data=" + this.$data);
				console.log("message=" + this.message);
			},
			beforeDestroy:function(){
				console.log("beforeCreate 销毁前状态======");
				console.log("el=" + this.$el);
				console.log("data=" + this.$data);
				console.log("message=" + this.message);
			},
			destroyed:function(){
				console.log("beforeCreate 销毁完成状态======");
				console.log("el=" + this.$el);
				console.log("data=" + this.$data);
				console.log("message=" + this.message);
			}
		});
	</script>
</html>

简化版生命周期

在这里插入图片描述

VUE完整示例new vue()参数详解

•1.1 el:"#id", //DOM成员

•提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。

•1.2 template:"`", //DOM成员

•一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot

•1.3 render: (h)=>{h(App)}, //DOM成员

•字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。

•1.4 data //数据成员

•data():{ return{ } },

•Vue实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化

•1.5 methods //数据成员

•methods:{ func(){ } }

•methods将被混入到 Vue 实例中，可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用

•方法中的 this自动绑定为 Vue 实例

•1.6 watch //数据成员

•watch:{ key:value $route:function (newValue, oldValue) { //监控路由 } }

•整个为一个对象，键是需要观察的表达式，值是对应回调函数

•1.7 computed //数据成员

•computed:{ getTotalCount(){ const totalCount=0; return totalCount; } },

•vue的计算属性，将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例

•1.8 props //数据成员

•props:['counts','ids'],

•用于父子组件的eventbus传值，是数组或对象，props的成员是子组件接收的来自父组件的数据

•1.9 propsData //数据成员

•创建实例时传递 props。主要作用是方便测试

•1.10 filters //资源

•filters('filterName',(input,function(){ return newvalue }))

•包含 Vue 实例可用过滤器的哈希表。

•1.11 directives //资源

•包含 Vue 实例可用指令的哈希表。

•1.12 components //资源

•（即该组件的子实例）这里是包含 Vue 实例可用组件的哈希表。

•1.13 name //杂项

•允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。

•1.14 parent //杂项

•指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

•1.15 mixins //杂项

•mixins 选项接受一个混合对象的数组。Mixin钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。

•1.16 extends //杂项

•允许声明扩展另一个组件。这主要是为了便于扩展单文件组件。这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。

•1.17 delimiters //杂项

•改变纯文本插入分隔符。

•1.18 functional //杂项

•使组件无状态（没有 data ）和无实例（没有 this 上下文）。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">

		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app", // 挂载点，可认为是element的简写，创建一个vue实例得知道是在哪一块元素上创建Vue实例，对哪一块视图进行操作
			data: {}, // 又称内部数据，该属性值可以是对象，也可以是函数，但优先推荐使用函数，对象里的函数又称方法。
			//  并且若是组件中的data则必须使用函数。数据成员,在.vue组件中data是一个函数，要写成data () {}这种方式	
			props: {} // 又称外部数据，一般用于组件中接受外来传递的数据，在组件使用时，通过标签全局属性的方式进行传参
			computed: { // 计算属性
				// 计算属性名: function(){..}
			},
			watch: { // 监视属性

			},
			methods: { // 成员方法
				// 方法名: function(){..}
			},
			template: "" // 模板
			beforeCreate: function() { // 生命构造函数，还有其他7个...

			},
			compontents: {

			},
			// 其他option....
		})
	</script>
</html>

扩展单文件组件。这和 mixins 类似，区别在于，组件自身的选项会比要扩展的源组件具有更高的优先级。

•1.17 delimiters //杂项

•改变纯文本插入分隔符。

•1.18 functional //杂项

•使组件无状态（没有 data ）和无实例（没有 this 上下文）。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">

		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app", // 挂载点，可认为是element的简写，创建一个vue实例得知道是在哪一块元素上创建Vue实例，对哪一块视图进行操作
			data: {}, // 又称内部数据，该属性值可以是对象，也可以是函数，但优先推荐使用函数，对象里的函数又称方法。
			//  并且若是组件中的data则必须使用函数。数据成员,在.vue组件中data是一个函数，要写成data () {}这种方式	
			props: {} // 又称外部数据，一般用于组件中接受外来传递的数据，在组件使用时，通过标签全局属性的方式进行传参
			computed: { // 计算属性
				// 计算属性名: function(){..}
			},
			watch: { // 监视属性

			},
			methods: { // 成员方法
				// 方法名: function(){..}
			},
			template: "" // 模板
			beforeCreate: function() { // 生命构造函数，还有其他7个...

			},
			compontents: {

			},
			// 其他option....
		})
	</script>
</html>
清晨时刻
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习笔记（一）——邂逅Vuejs
01-08
认识Vuejs 1 为什么学习Vuejs？ 前端必备技能，目前非常火，当然最重要的还是提升自己 2.简单认识一下Vuejs Vue是一个渐进式框架，可以将Vue作为应用的一部分嵌入其中，带来更丰富...第一步：浏览器输入：https://cn.v
vue学习笔记之v-if和v-show的区别
12-11
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS ...
vue第五天笔记02——vuex数据仓库练习
08-22
在“vue第五天笔记02——vuex数据仓库练习”中，我们将深入理解Vuex的工作原理和实践应用。 首先，Vuex的核心概念包括状态(state)、派生状态(getters)、 mutations(状态变更函数)、 actions(异步操作) 和模块...
VueBasicLearning:Vue 2.0学习笔记
03-16
以上只是Vue 2.0基础知识的一部分，实际开发中，你还需要学习更多高级特性和最佳实践，例如Vuex的状态管理、Vue CLI的使用、Vue Server Side Rendering等。持续学习和实践，你将成为Vue开发的专家。
Vue2.0使用过程常见的一些问题总结学习
11-26
最近在学习Vue，今天正好写个学习笔记，把以前遇到的错误给总结一下。 Vue目前的的开发模式主要有两种： 1.直接页面级的开发，script直接引入Vue 2.工程性开发，webpack+loader或者直接使用脚手架工具Vue-cli，...
Vue3+Element-plus的表单重置
weixin_49352307的博客
07-04 282
1.创建表单,绑定表单数据对象model,并且每一表单需要绑定prop。作用:简化代码,重置表单数据。
Vue前端打包
weixin_63680330的博客
07-04 257
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
新建Vue工程的几种方法
黔肆的博客
07-04 284
新建vue工程的几种方法，关键词：@vue/cli ,vite , parcel , webpack
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 289
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
vue2 中如何使用 vuedraggable 库实现拖拽功能
微光无限的博客
07-02 276
vue2 中如何使用 vuedraggable 库实现拖拽功能（详细Demo，容易理解）
vue 跳转新窗口的方法
m0_67880202的博客
07-03 285
适用于有新的完整的链接跳转，将新链接的url放入open中即可。2.使用$router.resolve。适用于@绑定了点击事件需要跳转的场景。1.使用router-link。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 81
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
Vue笔记12-新的组件
最新发布
王劭阳的博客
07-07 160
是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态，需要结合异步依赖，才能看到效果。在Vue3中，可以没有div根标签，如果没有的话，Vue3会将多个标签包装在一个。在Vue2中，template标签内，必须有一个div标签，作为根标签。是一个内置组件，可以将一个组件内部的模板传送到该组件DOM外部的位置去。
Vue 文件下载
猫脸码客的博客
07-03 235
【代码】Vue 文件下载。
Vue 数据大屏适配
FitnessSnail的博客
07-02 280
不会因为在某一维度上缩放过大而导致元素在另一维度上超出视口。.dataScreen-content 盒子内容根据设计稿给的。（默认为 1920x1080）计算缩放比例，并。的缩放比例，那么元素可能会在某一维度上。，这在很多情况下是不希望发生的。的缩放比例的目的是为了保证。单位进行正常的布局就行。在水平和垂直方向上都。
Vue 与 OpenAI 接口交互实战：发送请求的全流程解析（一）
舜意的博客
07-07 371
这篇文章主要讲解了如何在项目中与 OpenAI 的 API 进行交互通过API的调用可以为我们的项目提供更强大的功能和交互能力相信看到这里的你一定能够有所收获的，赶紧动手将你的项目也结合AI实现智能化吧！！！
【区分vue2和vue3下的element UI Badge 标记组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-03 603
在 Vue 2 和 Vue 3 中，Element UI 和 Element Plus 提供了类似的 Badge 标记组件，用于给元素一个额外的状态标识。不过，需要注意的是，在 Vue 2 中，我们通常使用 Element UI，而在 Vue 3 中，我们则使用 Element Plus。虽然这两个库的功能相似，但在一些属性和实现细节上可能存在差异。
vue css 链式布局模式
qq_27806371的博客
07-04 167
vue css 链式布局模式
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
九日的博客
07-04 342
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。
小实训学习资料整理（第七月）.docx
06-27
想学习HTML的可以看看，里面有我长久以来做的详细笔记，保证小白可看懂的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值