2020-10-16

weixin_49188643

于 2020-10-16 21:02:12 发布

阅读量125

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_49188643/article/details/109121829

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

VUE基础

1. 简介

VUE是一个渐进式JavaScript框架：
所谓的渐进式：类似于迭代开发（如：手机系统版本的更替）
vue.js 只是一些核心代码，可以让用户去搭建基本的页面结构；如果需求的是功能更为丰富的页面，那么就不得不引入一些插件去完成了。
需要注意的是：对于低版本浏览器（IE8及以下版本），vue.js是不支持的。

2. 原生js vs VUE

在介绍vue的基本使用步骤之前，我们先要探讨一下，程序员抛弃原生js和jQuery，而选择vue的原因：
首先，通过一段代码，先来看一下在框架引入之前，我们想要给某个标签添加内容时的操作：

<div id="root">
	<p id="pNode"></p>
</div>

<script>
// 这里是原生JS操作DOM元素，为p标签添加内容
	var pNode = document.getElementById("pNode");
	pNode.innerHTML = "这是一个p标签中的内容";
// 使用jQuery来操作p标签
	$("#pNode").text("这里使用jQuery来操作p标签")
</script>

从上面这段代码可以看出，不论是原生JS还是使用jQuery，其实都是在直接操作DOM元素，进而对元素进行更改。

那么这种操作有什么不好呢？
这里就不得不提到，浏览器的渲染过程：

将HTML结构解析成DOM树
将CSS 样式解析成CSSOM样式树
之后将DOM树和CSSOM样式树合并成为渲染树
遍历渲染树后进行布局
将渲染树的所有节点都绘制到屏幕上去

当我们直接操作DOM元素时，浏览器就会将整个流程重新执行一次，操作了几个DOM元素，整个流程就会重新执行几次。这样一来，性能上就会大大受到影响。
于是，就有了框架的用武之地。
相比于传统的获取DOM对象，再对其进行赋值，事件绑定等操作；
Vue采取的是将数据和js对象进行绑定，之后直接对数据进行操作的方式（即人们常说的数据驱动）来修改js对象的值。

3. VUE的使用

1）安装

安装：到VUE官网官网地址
下载开发环境版本，点开之后右键另存为，将vue.js文件保存到项目中
在xxx.html文件中引入这个js文件，就可以了。

2）语法

首先是vue的挂载和数据显示语法

<!-- 需要设置一个根标签，用来给后面的vue设置挂载点 -->
<div id="root">
	<!-- 引入vue之后，挂载点内部就不再是单纯HTML结构了，而是模板（html+js） -->
 	<!-- 模板语法：插值语法{{}}专门用来解析元素内容 -->
	<p>{{msg}}</p>
</div>

<script>
// 这里Vue对象是以构造函数调用的，里面传入一个配置对象
	new Vue({
		// 第一个属性，用来指定挂载点，告诉vue和哪个元素挂载
		el:"#root",
		// data中是请求回来的数据和初始化状态数据
		data:{
			msg:"message",
		}
	})
</script>

挂载点内部就不再是单纯的HTML结构了，而是有HTML和JS混合而成的模板；
模板语法分为：插值语法 & 指令语法
插值语法使用双大括号来包裹要解析的元素内容
指令语法是专门用来解析元素的（当要操作标签中的属性值时）

3) 数据绑定

单向数据绑定（数据只能从data流向模板页面）

<div id="root">
	<!-- 指令语法 v-bind进行单向数据绑定，href中写的是data中定义的url属性 -->
	<a v-bind:href="url">点我跳转</a>
	<!-- 简写形式，可省略v-bind，直接用冒号 -->
	<a :href="url">省略形式跳转</a>
</div>

<script>
	new Vue({
		el:"#root",
		data:{
			url:"https://www.baidu.com"
		}
	})
</script>

双向数据绑定（一般都是针对表单类元素的）

	<div id="root">
	<!-- 使用v-model将data中的msg和input绑定起来，无论哪个改变了，另一个都会跟着变化 -->
		<input type="text" v-model="msg" />
		<p>我爱{{msg}}</p>
	</div>
	<script>
		new Vue({
			el:"#root",
			data:{
				msg:"大河北"
			}
		})
	</script>

4）事件绑定

<button v-on:click="test">点我</button>
<!-- 简写形式，可以将v-on：直接写一个@代替 -->
<button @click="test">简写button</button>
<script>
new Vue({
	methods:{
		test(){
			console.log("点击成功了")
		}
	}
})
</script>

5）computed属性

使用这个属性的情况是：当我们需要某个数据但是又没有，而这个数据和已有数据还存在着关系时

<div id="root">
	<p>{{fullName}}</p>
</div>
<script>
	new Vue({
		el:"#root",
		data:{
			firstName:"liu",
			lastName:"lang"
		}
		computed:{
			fullName(){
				return this.firstName + " " + this.lastName
 			}
		}
	})
</script>

6）watch属性

使用watch属性的情况：这个数据必然是存在的，才可以对这个数据进行监视

<div id="root">
	<p>{{fullName}}</p>
</div>
<script>
	new Vue({
		el:"#root",
		data:{
			firstName:"liu",
			lastName:"lang",
			// 先定义一个空字符串的属性
			fullName2:""
		}
		watch:{
			firstName:{
			// 这个属性让页面在刚一开始就先调用一次handler函数
				immediate: true,
			// 被监视对象中都有一个handler函数，一旦数据发生改变就调用这个函数
				handler(newValue,oldValue){
					this.fullName2 = newValue + " " + this.lastName
				}
			}
		}
	})
</script>