VUE 是一款友好的。多用途且高性能的JavaScript框架。它能够帮助你创建可维护性和可测试性更强的代码库。
VUE是渐进式的JavaScript框架。
在使用vue框架时需要先引入vue库：
Vue.js库官网下载：https://cn.vuejs.org/v2/guide/installation.html
方式一 通过本地文件夹引入
<!-- 引入vue.js文件 -->
<!-- 开发版本 -->
<script src="../js/vue.js"></script>
<!-- 生产版本 -->
<!-- <script src="../js/vue.min.js"></script> -->
方式二 通过CDN引入
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
CDN官方网址：https://www.bootcdn.cn/
vue官方文档：https://cn.vuejs.org/
一、vue的使用
1、准备一个容器
<div id="app">
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<!-- v-on:指令用于绑定事件 调用的方法的括号可以省略 -->
<button v-on:click="updataName">修改姓名</button>
<button v-on:click="updataAge">修改年龄</button>
</div>
2、创建一个Vue对象
let vm = new Vue({
// 指定当前vue对象操作的DOM容器
el:'#app',
// 定义当前vue对象管理的数据
data:{
name:'张三',
age:18,
},
// 定义当前vue对象管理的方法
methods:{
// 修改姓名的方法
updataName(){
this.name = '李四'
},
// 修改年龄的方法
updataAge(){
this.age = 19
}
}
})
首次使用vue，控制台会出现以下两个提示：
image.png
这两个提示可以通过安装vue-devtools扩展程序和以下代码进行解决
// 关闭生产提示
Vue.config.productionTip = false
如果网站已经上线运行，就选择生产版本vue.min.js使用
vue-devtools扩展程序下载网址：https://www.extfans.com/web-development/ljjemllljcmogpfapbkkighbhhppjdbg/
image.png
image.png
二、vue的响应式原理
1、对代理对象的基本理解
//1、定义源对象
let obj1 = {
name:'张三',
age:20
}
//2、定义代理对象
let obj2 = obj1
console.log("obj2:",obj2);
// 代理对象修改了源对象的数据
obj2.name = '李四',
obj2.age = 30
console.log('obj1',obj1); //obj1,{name:'张三'，age:20}
2、vue的data选项和_data属性
// 1、定义源对象
let myData = {
name:'张三',
age:18
}
let vm = new Vue({
// 2、将源对象传递给vue的data选项，背后做了两件事情
// (1) 设置vue实例的_data属性，作为当前源对象的代理对象（响应式核心）
// (2) 将_data属性里面代理的所有数据，再添加到当前vue实例（为了Vue实例方便调用数据）
data:myData
})
vm._data.name = '李四'
vm._data.age = 19
console.log(myData);
3、给对象添加属性的几种方式
方式1 使用 . 添加
let obj3 = {}
obj3.name = '张三'
方式2 使用中括号[ ]添加
obj3['age'] = 20
方式3 通过Object对象的defineProperty方法，给指定的对象添加指定的属性
Object.defineProperty(obj3,'sex',{
// 属性值
value:"男",
// 允许被枚举
enumerable:true,
// 允许被删除
configurable:true
})
console.log(obj3);
// 枚举出对象的所有属性（其实就是遍历出对象的所有属性名）
for(let key in obj3){
console.log(key); //name age
}
// 通过delete关键字，可以删除对象身上的指定属性
delete obj3.age
delete obj3.sex
console.log(obj3); //{name: '张三', sex: '男'}
4、vue的响应式原理
// 01、定义一个源对象
let data = {
name:'张三',
age:20
}
// 在页面中，显示姓名和年龄
document.querySelector('#name').innerHTML = data.name
document.querySelector('#age').innerHTML = data.age
// 02、定义一个代理对象（使用_data去代理data）
let _data = {}
// 03、使用object.defineProperty给代理对象添加属性
Object.defineProperty(_data,'name',{
// get() 方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
get(){
return data.name
},
// set() 方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
set(val){
//console.log('set方法执行了');
data.name = val
//当代理对象，监听到数据发生变化了，就会重新渲染页面
document.querySelector('#name').innerHTML = data.name
}
})
Object.defineProperty(_data,'age',{
// get() 方法，用于返回属性的值（当我们调用name属性获取值时，会调用get方法）
get(){
return data.age
},
// set() 方法，用于设置属性的值（当我们调用name属性设置值时，会调用set方法）
set(val){
data.age = val
//当代理对象，监听到数据发生变化了，就会重新渲染页面
document.getElementById('age').innerHTML = data.age
}
})
// 改变代理对象_data的数据，页面会重新渲染
_data.name="李四"
_data.age=30
