vue.js前端开发技术读书笔记二：vue数据绑定

最新推荐文章于 2022-12-08 00:24:47 发布

尾迹双冒号

最新推荐文章于 2022-12-08 00:24:47 发布

阅读量705

点赞数 1

分类专栏： # web前端 # 读书文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_51188461/article/details/121693038

版权

web前端同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

读书

6 篇文章 0 订阅

订阅专栏

文章目录

1.vue模板语法
2.响应式声明渲染机制
3.vue属性绑定
4.vue双向数据绑定
5.vue计算属性
6.计算属性与methods区别
7.vue生命周期

❤️❤️❤️vue模板语法？响应式声明渲染机制？vue属性绑定？vue双向数据绑定？vue计算属性？计算属性与methods区别？vue生命周期？

1.vue模板语法

vue核心是允许开发者使用简洁的模板语法声明式地将数据渲染进DOM的系统，即将模板中文本数据放入DOM中，可使用mustache语法{{}}完成


<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>	
		<div id="app">
			
			{{ text }}
			
		</div>
	
	<script>
		
		 var vm = new Vue({
			el: '#app',
			data:{text:'文本数据被渲染到HTML中了哦！'}
		
		
			
		})
		</script>

效果图如下：
在这里插入图片描述
{{}}将数据解析为纯文本，如果要解析为HTML，需要使用v-html


		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>	
		<div id="app">
			
		<div v-html="message"></div>
			
		</div>
	
	<script>
		
		new Vue({
			el: '#app',
			data:{message:'用户名：<input type="text" value="中文名"/>'+
			'密码：<input type="password"/>'}
			//不支持换行，换行需要用单引括号括起来后用+连接
		
		
			
		})
		</script>

效果图如下：
在这里插入图片描述
vue支持JavaScript所有表达式，对于JavaScript表达式在模板语法中的使用，只适用于简单的表达式，复杂的可以使用后面要学的计算属性computerd,切记：每个绑定都只能包含单个表达式

{{var a = 1}}<!--为语句非表达式无效-->
{{if(ok){retrun message}}}<!--无效可以改为三元表达式-->

2.响应式声明渲染机制

vue工作原理是当把一个普通的JavaScript对象传给vue实例的data选项时，vue就会遍历此对象的所有属性，在属性被访问和修改时通知变化，并把数据渲染进DOM

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>	
		<div id="myapp">
			
		<p> {{message}}</p>
			
		</div>
	
	<script>
		var mydata = {
			message:'Hello vue'
		}
		
		var app = new Vue({
			el: '#myapp',
			data:mydata
		
		
			
		})
		</script>
	</body>
</html>

打开浏览器控制台，修改app.message=hello vue.js，页面中p标签中数据会自动更新。
v-on:click可以绑定事件，缩写形式@click

3.vue属性绑定

页面需要超链接，那么需要用vue属性绑定
vue属性绑定

<div id='myAPP'>
<a v-blind:href="url"></a><!--缩写为<a:href="url"></a>-->

</div>

<script>
var app=new Vue({
el:"myAPP",
data:{bookName:'vue.js编程入门'，
url:'https://cn.vuejs.org/'
}
})
</script>

若需要将bookname绑定到文本框

<p v-html="urlTag"></p>
var app=new Vue({
el:'myAPP',
data:{urlTag:'<a href=https://cn.vuejs.org/>vue.js</a>'}})

要绑定一段html,则用v-html指令
若要显示超链接，则用v-blind指令

4.vue双向数据绑定

对DOM元素来说，有数据双向绑定，vue是一个MVVM框架，及DOM数据双向绑定，当数据发生变化，视图也会发生变化，当视图发生变化，数据也会同步变化

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title></title>
		
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
		<div id="app">
			<span>欢迎词：</span>
			代表地球人：{{ message }}
			<div>
				{{ message }}
			</div>
			<button id="btn">点击改变</button>
			<hr>
			请输入：<input type="text" id="keywords" v-model="keywords">
			<button id="btnSearch">点击搜索</button>
			<form>
				<input type="text" v-model="in1">
				<input type="text" v-model="in2">
				<input type="text" v-model="in3">
				<input type="text" v-model="in4">
				<input type="text" v-model="in5"><!--5个文本框也已经绑定了数据模型中的值-->
			</form>
			
		</div>
	
	<script>
		var dat = {
			message: 'Hello vue!',
			keywords: '关键词',
			in1: '1',
			in2: '2',
			in3: '3',
			in4: '4',
			in5: '5'
			
		}
		
		var app = new Vue({
			el: '#app',
			data: dat
		
		})
		
		</script>
		
		<script>
			var btnE1 = document.getElementById("btn");
			btnE1.onclick = function(){
				app.message = "你好，潜力无限";
				
			}
			</script>
			<script>
				var btnSearchE1 = document.getElementById("btnSearch");
				btnSearchE1.onclick=funtion(){
					alert(app.message);
				}
				</script>
	</body>
</html>

效果图：

在这里插入图片描述

通过结果可以发现数据实现了双向绑定，把data下的数据放到页面上，并且可以把data里的数据和页面上的元素产生一一对应的关系。绑定方式有两种：一是{{}}，可以由模板引擎根据数据实时进行修正，vue负责驱动模板把数据渲染到DOM上，一种是属性名也是一种指令，如v-model就是双向绑定。

5.vue计算属性

一般模板只用于简单的运算，计算属性computed可将复杂逻辑放入计算中进行处理，同时computed有缓存功能，可防止复杂计算逻辑多次调用引起的性能问题

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>演示计算属性</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
		<div id="app">
			<h2>图书</h2>
			
			<div>
				您购买了{{book.name}}共{{book.count}}本===¥{{book.price}}/本
			</div>总价：{{totalPrice}}</div>
		</div>
	
	<script>
		
		var vm = new Vue({
			el: '#app',
			data: {
				book:{id:1,price:10,name:'vue入门',count:1},
				discount:0.8,
				deliver:12
			},
			computed:{
				totalPrice(){
				return (this.book.price*this.book.count)*this.discount+this.deliver;
			}
			}
		
		})
		</script>
		
	</body>
</html>

效果图
在这里插入图片描述
注意：常见代码书写错误1.message名称2.逗号问题3.标签成对出现

6.计算属性与methods区别

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>演示methods</title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
		<div id="app">
			<h2>图书</h2>
			
			<div>
				您购买了{{book.name}}共{{book.count}}本===¥{{book.price}}/本
			</div>总价：{{totalPrice()}}</div>
		</div>
	
	<script>
		
		var vm = new Vue({
			el: '#app',
			data: {
				book:{id:1,price:10,name:'vue入门',count:1},
				discount:0.8,
				deliver:12
			},
			methods:{
				totalPrice:function(){return (this.book.price*this.book.count)*this.discount+this.deliver;}
			}
		})
		</script>
	</body>
</html>

效果图：
在这里插入图片描述
由演示结果可知，可将计算总价定义为一个方法，而不是一个计算属性。两种方法结果相同，而计算属性是基于它们的依赖进行缓存的，简言之，多次访问totalprice计算属性会立即返回之前的计算结果，而不必再次执行函数
而每当触发重新渲染时，调用方法将总是再次执行函数，若有一个性能开销比较大的计算属性，还需要其他计算属性依赖他，如果没有缓存，将不可避免多次执行，methods没有缓存，每次访问都要重新执行。如果不需要缓存，就使用methods
💜💜💜
【计算属性特点】
1.计算属性使处理结构清晰
2.依赖于数据，若数据更新，则处理结果自动更新
3.计算属性内部this指向vm实例
4.在模板调用时，直接写计算属性名即可
5.常用的是getter方法，用于获取数据，也可以使用setter方法改变数据
6.相较于methods，不管依赖的数据是否改变，methods都会重新计算，但是依赖数据不变的时候，computed从缓存中获取，不会重新计算。

7.vue生命周期

生命周期：开始创建–>初始化数据–>编译模板–>挂载DOM,渲染–>更新–>渲染到卸载一系列过程。
vue生命周期可以分为8个阶段：
beforeCreate,created（创建后）,beforeMount,mounted(载入后)，beforeUpdate,updated(更新后)，beforeDestroy,destroyed(销毁后)
vue官方称这些为钩子函数
在这里插入图片描述