1. Vue核心
1.1. Vue简介
1.1.1. 官网
中文官网Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
https://cn.vuejs.org/
英文官网
Vue.js - The Progressive JavaScript Framework | Vue.js (vuejs.org)https://vuejs.org/
1.1.2. 介绍与描述
VUE是构建于用户界面的渐进式JavaScript框架
1.1.3. Vue的特点
遵循MVVM模式
体积小、编码简洁，执行效率高，适合移动/PC端开发
1.1.4.与其他JS框架的关联
借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟DOM技术
1.1.5. Vue周边库
vite：vue脚手架
vue-resource
axios
vue-router：路由
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）
1.2. 初识Vue
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>初识vue</title><!-- 引入Vue --><script src="../js/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h1>Hello！{{name}}!</h1></div><script>Vue.config.productionTip = false // vue在启动时生成提示关闭new Vue({el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data:{ //data用于存储数据，数据共el所指定的容器去使用name:'JOJO'}})</script>
</body>
</html>
VUE的基本使用
1.导入vue.js脚本文件
2.在页面声明一个将要被vue控制的区域
3.创建VUE的实例对象
1.3. 模板语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue模板语法</title><script src="../js/vue.js"></script>
</head>
<body><div id="root"><h1>插值语法</h1><h3>你好，{{name}}!</h3><hr><h1>指令语法</h1><a v-bind:href="url">快去看新番！</a><br><a :href="url">快去看新番！</a></div><script>Vue.config.productionTip = false new Vue({el:'#root', data:{ name:'JOJO',url:'https://www.bilibili.com/'}})</script>
</body>
</html>
总结：
Vue模板语法包括两大类：
插值语法：
功能：用于解析标签体内容
写法：{{xxx}}(matches)，xxx是js表达式，可以直接读取到data的数据
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
举例：v-bind:xxx，xxx同样要写js表达式，可以直接读取到data中的属性
1.4数据绑定
<body><div id="root">单向数据绑定：<input type="text" v-bind:value="name"><br>双向数据绑定：<input type="text" v-model:value="name"></div><script>Vue.config.productionTip = false new Vue({el:'#root', data:{name:'JOJO'}})</script>
</body>总结：
Vue有2种数据绑定的方式：
单向绑定（v-bind） 双向绑定（v-model）
备注：
双向数据绑定一般应用在表单类元素上（如：<input>、<select>、<textarea>等）
v-model:value可以简写为v-model，因为v-model默认收集的是value值
1.5. el与data的两种写法
<body><div id="root"><h1>Hello,{{name}}!</h1></div><script>Vue.config.productionTip = false //el的两种写法：// const vm = new Vue({// // el:'#root', //第一种写法// data:{// name:'JOJO'// }// })// vm.$mount('#root')//第二种写法//data的两种写法：new Vue({el:'#root', //data的第一种写法：对象式// data:{// name:'JOJO'// }//data的第二种写法：函数式data(){return{name:'JOJO'}}})</script>
</body>
总结：
el有2种写法：
- 创建Vue实例对象的时用el属性
- 先创建Vue实例，再通过
vm.$mount('#root')指定el的值
data有2种写法：
- 对象式
- 函数式
由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了
1.6. MVVM模型
MVVM模型
M ：model表示在页面渲染时的数据源
V：View表示在页面渲染的DOM结构
VM：实例对象
<body><div id="app"><span ref="span" @click="change($event)">{{ message }}</span><p>{{name}}</p><p>{{ $options}}</p></div>
</body>
总结：
data中所有的属性，最后都出现在了vm身上
vm身上所有的属性 及 Vue原型上所有的属性，在Vue模板中直接使用
1.7. Vue中的数据代理
总结：
Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：更加方便的操作data中的数据
基本原理：
通过object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
 prepare 阶段)
