学习Vue的第二天

最新推荐文章于 2022-01-09 19:36:18 发布

碌碌无为的勤劳家

最新推荐文章于 2022-01-09 19:36:18 发布

阅读量272

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/wildwofe/article/details/106557834

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

生命周期函数

在创建Vue实例对象时，有两个阶段：

第一阶段是初始化时间绑定机制、初始化生命周期的循环。初始化之后会触发beforeCreate()回调函数
第二个阶段是初始化注入器、初始化实体对象，此时表示Vue实例对象已经创建成功，初始化之后会触发created()回调函数

8个生命周期函数

beforeCreate() Vue实例对象创建之前，此时el属性和data属性均为空（undefined）
（类比：电脑组装之前）
created() Vue实例对象创建之后，此时el属性为空，data属性已经存在
（类比：电脑组装之后）

在创建el属性之前首先执行beforeMount() 在创建el属性并与DOM进行绑定之后才会触发mounted()

beforeMount() View和model绑定完成之前的回调，存在Vue实例对象和文档节点挂载之前，此时el属性为绑定之前的值（也就是el和data还没有联系）
（类比：电脑主机还没有与显示器连接）
mounted() View和model绑定之后的回调存在于Vue实例对象和文档节点挂载之后，
此时的el为绑定之后的值（el和data中的数据有了联系）
（类比：电脑主机已经和显示器连接）
beforeUpdate() View视图更新之前的回调，此时el属性为更新之前的值
（类比：给电脑安装新软件，还未安装成功之前）
updated() View视图跟新之后的回调，此时el属性为更新之后的值
（类比：软件安装完成，桌面出现快捷图标）
beforeDestroy() Vue实例对象销毁之前的回调，此时el属性和data属性仍具有原始值
（类比：电脑关机之前的提示）
destroyed() Vue实例对象销毁之后的回调，后续在修改model将不会改变View
（类比：电脑已经关机）

生命周期函数的书写格式及位置：

var vm = new Vue({
	el: '#app',
	data: {},
	beforeCreate:function(){},
	created:function(){},
	beforeMount:function(){},
	mounted:function(){},
	beforeUpdate:function(){},
	updated:function(){},
	beforeDestroy:function(){},
	destroyed:function(){}
});

生命周期图解：
在这里插入图片描述

模板语法

何为模板语法？简单地说就是如何在HTML中输出Vue实例对象的数据。

输出模板变量

使用的是“Mustache”语法（双大括号）的文本插值形式在html中输出模板变量
变量包括：普通变量（基本数据类型）、对象变量、数组变量

<body>
		<div id="app">
			<div>name = {{name}}</div>
			<div>
				user.name = {{user.name}}<br/>
				user.desc = {{user.desc}}
			</div>
			<ul>
				<li>{{names[0]}}</li>
				<li>{{names[1]}}</li>
				<li>{{names[2]}}</li>
			</ul>
		</div>
	</body>
	
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//准备双向绑定的数据
		var data = {
				name:'vue',//普通变量
				user:{     //对象
					name:'vue',
					desc:'this is vue'
				},
				names:['vue','react','angular']
			}
		
		var vm = new Vue({
			el:'#app',
			data:data
		})
	</script>

输出结果：
在这里插入图片描述

在html元素中输出Vue实例对象的变量

使用v-html指令用于输出HTML代码，若数据变量是HTML源代码，默认输出HTML；若解析HTML代码输出可以使用v-html指令。

	<body>
		<div id="app">
			<div>
				{{html}}
			</div>
			<div v-html="html"></div>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var data = {
			html:'<font color="red">这是红色字体</font>'
		}
		
		var vm = new Vue({
			el:'#app',
			data:data
		})
	</script>

输出结果：
在这里插入图片描述

html属性中输出Vue实例对象的变量

在某些情况下，需要在HTML元素属性中输出变量，此时使用v-bind指令

具体的语法形式：

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

注意: 若动态属性的变量值为false、null、undefined ，则该属性的值不存在。

	<body>
		<div id="app">
			<div>
				<a v-bind:href="link.link" :class="myclass">全写:{{link.name}}</a>
			</div>
			<div>
				<a :href="link.link">简写:{{link.name}}</a>
			</div>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var data = {
			myclass:false,
			link:{
				name:'Vue框架开发',
				link:'http://www.baidu.com'
			}
		}
		var vm = new Vue({
			el:'#app',
			data:data
		})
	</script>

输出结果：
在这里插入图片描述

表达式

Vue框架中提供了JavaScript表达式、四则运算、条件控制、字符串处理等等。
同样v-bind绑定中也可以进行一些运算。
同样对于所有数据绑定(无论HTML元素还是HTML属性) vue都提供了完整的JavaScript表达式。

	<body>
		<div id="app">
			{{5+5}}<br/>
			{{ok?'YES':'NO'}}<br />
			{{message.split('').reverse().join('')}}<br />
			<div v-bind:id="'list-'+id">百度地图</div>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var data = {
			ok:false,
			message:'今天晚上吃什么',
			id:1
		}
		var  vm = new Vue({
			el:'#app',
			data:data
		})
	</script>

输出结果：
在这里插入图片描述

计算属性

为什么使用计算属性？
在模板中可以使用JavaScript表达式做一些简单的运算，设计它的初衷是用于
简单计算，但在模板中放入太多处理逻辑会让模板过于难以维护。

例:在外卖系统中，怎么计算用户订单金额:商品个数count，商品平均价格price，折扣率discount，配送费freight等等
用JavaScript表达式，视图部分会变得越来越复杂，不符合vue实例对象的简洁设计原则。订单金额 = {{countpricediscount+freight}}

为了解决过于复杂的计算我们引入了计算属性 computed
在使用时先定义计算属性将复杂的计算在计算属性中直接计算完成，然后再给视图使用就可以了。

需要注意点是：

computed是由一系列json方法组成的，表示一系列计算属性
每一计算属性都是一个function，这个函数必须有return，返回计算属性的值。
计算属性的使用和data属性一致，改变计算属性的参数，其数字也会发生变化，其实就是定义不同
当原始数据发生改变时计算属性的值也会发生改变
计算属性也可以使用在html代码，但是在模板中引用时要使用v-html引用

	<body>
		<div id="app">
			<p>商品总价:<span v-html="allPrice"></span></p>
			<p>订单金额:{{amount}}</p>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//双向绑定数据
		var data = {
			count:5,//商品个数
			price:11.5,//商品平均价格
			discount:0.85,//折扣率
			freight:3.5   //运费
		}
		var vm = new Vue({
			el:'#app',
			data:data,
			computed:{
				//每一计算属性值时已函数形式，并且有返回值
				amount:function(){
					//this代表当前vue实例对象
					//this.$data 表示当前Vue实例对象装载的双向绑定数据
					//代理: this.$data.count <=> this.count
					console.log("haode");
					return this.$data.count*this.$data.price*this.$data.discount+this.$data.freight;
				},
				//计算商品总价
				allPrice:function(){
					return '<span>'+ this.$data.count*this.$data.price+'</span>';
				}
			}
		})
	</script>

输出结果：
在这里插入图片描述

methods方法

在vue中可以使用methods编写自定义函数 methods用法与computed相同，它也是由一系列json方法组成的。

特别注意：计算属性与methods本质区别是，计算属性只有其相关依赖发生改变时才会重新计算，当data发生改变计算属性才会重新计算，大幅度提升了程序执行的效率，节省内存空间。但是methods只要调用，无论data是否改变它都会重新计算所以在使用中优先使用计算属性。

	<body>
		<div id="app">
			<p>订单金额(函数形式):{{getAmount()}}</p>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var data = {
			count:10,
			price:12.5,
			discount:0.75,
			freight:30
		}
		var vm = new Vue({
			el:'#app',
			data:data,
			methods:{
				getAmount:function(){
					console.log("nihao");
					return this.count*this.price*this.discount+this.freight;
				}
			}
		})
	</script>

输出结果：
在这里插入图片描述

数组元素和对象元素的渲染（列表渲染）

列表的渲染就是如何在Vue中渲染输出数组元素和对象元素，同时在列表的渲染过程中会同时使用计算属性。

列表渲染主要的应用场景就是循环输出一组相同个数的数据将商品输出在同一个列表中。

在模板中，使用v-for指令循环输出某一组数据，基本语法如下:
v-for = "item in items"
这里item表示输出的某一条数据，items表示一组数据(可能是对象可能是数组)。

当v-for渲染数组时，可以给出index参数，表示渲染数组的元素下标信息从0开始
v-for="(item,index) in items"
v-for还可以渲染对象渲染对象时会遍历出对象所有的属性值
key -> 键/属性 value -> 值 index –> 属性索引
key、value和index在括号中的顺序最好不要改变
v-for="(value,key,index) in object"

	<div id="app">
			<ul>
				<li v-for="good in goodsList">{{good.name}}==={{good.price}}</li>
				
				<li v-for="good in goodsList">
					<span>{{good.name}}</span>
					<span style="color: red;">{{good.price}}</span>
				</li>
				
				<li v-for="(good,index) in goodsList">{{index+1}} - {{good.name}}</li>
				
				<li v-for="good in goodsList">
					<span v-for="(value,key,index) in good">{{key}}--{{value}}<br/></span>
				</li>
			</ul>
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			var data = {
				goodsList:[
							{name:'iphone',price:'8888',color:'红色'},
						  	{name:'mp3',price:'888',color:'橙色'},
						  	{name:'vidio',price:'88',color:'粉色'}
				]
			}
			var vm = new Vue({
				el:"#app",
				data:data
			})
	</script>

输出结果：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200604212704993.png

碌碌无为的勤劳家

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习Vue的第二天

生命周期函数在创建Vue实例对象时，有两个阶段：第一阶段是初始化时间绑定机制、初始化生命周期的循环。初始化之后会触发beforeCreate()回调函数第二个阶段是初始化注入器、初始化实体对象，此时表示Vue实例对象已经创建成功，初始化之后会触发created()回调函数8个生命周期函数beforeCreate() Vue实例对象创建之前，此时el属性和data属性均为空（undefined）（类比：电脑组装之前）created() Vue实例对象创建之后，此时el属性为空，data属
复制链接

扫一扫

专栏目录