Vue 技术

第 1 章：Vue 核心

1.1. Vue 简介

1.1.1. 官网

英文官网: https://vuejs.org/
中文官网: https://cn.vuejs.org/

1.1.2. 介绍与描述

动态构建用户界面的渐进式 JavaScript 框架
作者: 尤雨溪

1.1.3. Vue 的特点

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.4. 与其它 JS 框架的关联

借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟 DOM 技术

1.1.5. Vue 周边库

vue-cli: vue 脚手架
vue-resource
axios
vue-router: 路由
vuex: 状态管理
element-ui: 基于 vue 的 UI 组件库(PC 端)

1.2. 初识 Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>初识vue</title>
		<!-- 引入vue -->
		<script type="text/javascript" src="../Js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<!-- 插值语法 -->
			插值语法:<h3>hello,{{name}}!</h3>
			<!-- 指令语法 -->
			指令语法: <br><a v-bind:href="school.url">单击跳转到百度</a>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
			//创建vue实例
			new Vue({
				el:'#root',
				data:{
					name:'ZZY',
					school:{
						url:"http://baidu.com"
					}
				}
			})
		</script>
	</body>
</html>

1.3. 模板语法

1.3.1. 效果

在这里插入图片描述

1.3.2. 模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

插值语法（双大括号表达式）
指令（以 v-开头）

1.3.3. 插值语法

功能: 用于解析标签体内容
语法: {{xxx}} ，xxxx 会作为 js 表达式解析

1.3.4. 指令语法

功能: 解析标签属性、解析标签体内容、绑定事件
举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析
说明：Vue 中有有很多的指令，此处只是用 v-bind 举个例子

1.3.5 el与data的两种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el与data的两种写法</title>
		<script type="text/javascript" src="../Js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>你好，{{name}}!</h1>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			//1、el
			//new Vue({
				// el:'#root',
				// data:{
				// 	name:'zzy'
				// }
			//})
			//2、$mount挂载（更加灵活）
			// const x = new Vue({
			// 	data:{
			// 		name:'zzy'
			// 	}
			// })
			// x.$mount('#root');
			// data的两种写法：1.对象式，即之前的方式
			//2.函数式
			const x = new Vue({
				data:function(){
					//不能写箭头函数data:()=>{}
					//简写 data(){}
					return{
						name:'zzy'
					}
				}
			})
			x.$mount('#root');
		</script>
	</body>
</html>

1.4. 数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script type="text/javascript" src="../Js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>你好，{{name}}!</h1>
			<!-- 单向数据绑定 v-bind -->
			单向数据绑定姓名：<input type="text" v-bind:value="name" /><br>
			<!-- 简写 -->
			性别：<input type="text" :value="sex" /><br>
			<!-- 双向数据绑定 v-model -->
			双向数据绑定姓名：<input type="text" v-model:value="name" /><br>
			<!-- 简写 -->
			性别：<input type="text" v-model="sex" /><br>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip == false ;
			new Vue({
				el:'#root',
				data:{
					name:'曾紫钰',
					sex:'女'
				}
			})
		</script>
	</body>
</html>

1.4.1. 效果

在这里插入图片描述

1.4.2. 单向数据绑定

语法：v-bind:href =“xxx” 或简写为 :href
特点：数据只能从 data 流向页面

1.4.3. 双向数据绑定

语法：v-model:value=“xxx” 或简写为 v-model=“xxx”
特点：数据不仅能从 data 流向页面，还能从页面流向 data

1.5. MVVM 模型

M：模型(Model) ：对应 data 中的数据
V：视图(View) ：模板
VM：视图模型(ViewModel) ： Vue 实例对象

在这里插入图片描述

**1.5 .数据代理*

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据代理</title>
<!-- 		<script type="text/javascript" src="../Js/vue.js"></script>
 -->	</head>
	<body>
		<script type="text/javascript">
			//Vue.config.productionTip == false ;
			let num = 18;
			let person = {
				name:'zzy',
				sex:'女',
			}
			Object.defineProperty(person,'age',{
				//value:18,
				//enumerable:true,//控制属性是否可以枚举，即不表示为...，默认值是false
				//writable:true,//控制属性是否可以被修改，默认值为false,注意修改的是person.age
				//configurable:true//控制属性是否可以被删除，默认值为false
				//当有人读取age时，get函数(getter)被调用，且返回值是age的值
				get(){
					console.log('有人读取age属性了')
					return num
				},
				set(value){
					console.log('有人修改age属性了,且值为',value)
					num = value
				}
			})
			console.log(person);
		</script>
	</body>
</html>

数据代理：通过一个对象代理对另一个对象中的属性的操作（读、写）。如上述代码中，let了两个对象，一个num，一个person，通过getter和setter对num进行读写，从而修改person对象中的age属性。

下面是更为简单的一个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>何为数据代理</title>
	</head>
	<body>
		<script type="text/javascript">
			let obj1={x:100}
			let obj2={y:100}
			Object.defineProperty(obj2,'z',{
				get(){
					return obj1.x
				},
				set(value){
					obj1.x = value
				}
			})
		</script>
	</body>
</html>

vue中的数据代理：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../Js/vue.js"></script>
	</head>
	<body>
		<!-- 1.vue中的数据代理：
			通过vm对象来代理data对象中属性的操作（读写）
		2.vue中数据代理的好处：
			更加方便的操作data中的数据
		3.基本原理：
			通过Object.defineProperty()把data对象中所有属性添加到vm中
			为每一个添加到vm上的属性，都指定一个getter和setter
			在getter和setter内部去操作(读写)data中对应的属性 -->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>地址：{{address}}</h2>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					name:'湖南科技大学',
					address:'湖南湘潭'
				}
			})
		</script>
	</body>
</html>