What do you want to see ?
It is recommended to see the official Vue documentation!
学习思路：
1、是什么
2、怎么用
3、为什么这么用【架构设计、原理】
学习前需要掌握的JavaScript知识：
- ES6语法规范
- ES6模块化
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promis
- …
下载Vuejs文件 installaiton
也可以直接在浏览器输入下边的地址，然后新建一个js文件，将内容拷贝进去，使用时引入新建的js文件就行。
- 开发版 有换行
https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
- 生产环境，无换行，密密麻麻的那种
https://cdn.jsdelivr.net/npm/vue@2.6.14
视频教程 video
简介 index
以下内容为个人理解类容，谨慎参考！有误可指正。
Vue核心MVVM模型，即Model、View、ViewModel。model表示数据模型、view表示视图，可以理解为各种的UI组件、ViewModel是一个同步View和 model的对象，相当与一个中间件 ，架构中，View和Model互不关联，通过ViewModel进行交互。
Vue中的Vm缩写就是ViewModel。
Vue的一大亮点，“双向绑定”就是基于架构中的ViewModel，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
参考博文：vue mvvm原理及实现
关键字：mvvm、数据劫持、双向绑定、模板语法、申明式渲染。
特点：
- 采用组件化的方式，提高代码复用率，让代码更好的维护。
- 声明式编码，无需直接操作DOM，提高开发效率。
- 使用虚拟DOM+Diff算法，尽可能的服用DOM节点。
个人理解虚拟DOM+Diff：
虚拟DOM是将DOM文件以数据的形式缓存，在页面DOM元素发生改变时先在虚拟DOM数据中检查是否已有该DOM元素数据，要是没有以数据的形式添加进来以待复用，要是有这里就需要用到Diff算法去比较是否有改变、更新、添加元素，未改变的元素不重新生成直接复用，有改变的元素添加到DOM元素中，然后将改变的DOM在页面展示。
.vue文件：
.vue文件就是一个vue的组件，这个里面就包括组件功能中的html、css、js。
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="../js/vue.js">
</script>
<body>
<!-- vue容器 ,容器里面的内容被称为【Vue模板】-->
<div id="root">
<h1>Hello {{name}}</h1>
</div>
</body>
<script>
Vue.config.productionTip = false;//关闭控制台警告
// 创建vue实例,传入的对象是配置对象
new Vue({
el:"#root",//值类型为String，指定vue实例的容器，一般为css选择器字符串. 这里绑定的容器是id="root"的元素。
data:{//一般值类型为对象，在组件中时，值类型为Function；为容器提供数据存储，里面的数据提供给el绑定的容器使用。
name:"中国！"
}
})
</script>
</html>
语法：
new Vue({
//选项
el:"#xxx",
data:object | function,
mounted: function,
motheds:{function}
})
API导航
选项
常用选项：
el:实例容器 查看API
显示调用代码示例👇：
<body>
<div id="app">
<h4> Hello {{message}} !</h4>
</div>
</body>
<script>
//#1 创建Vue实例时没有绑定容器el
const vm = new Vue({
data:{
message:" Jack !"
}
});
//#2 Vue实例创建完成后，显式调用，手动开启编译。
vm.$mount("#app");
</script>
data: 容器数据 查看API
data的类型可以是对象也可以是一个函数，组件情况下使用函数，下为简单的示例👇：
<body>
<div id="app">
<h4> Hello {{message}} !</h4>
</div>
</body>
<script>
const vm = new Vue({
el:"#app",
data:function(){//一般情况可以但不建议这样写，组件定义的情况下只能写Function
return{
message:' 中国 !'
}
}
});
</script>
区别监听属性和计算属性：查看示例
监听属性watch：监听对象change，立即执行；
计算属性computed：依赖对象change，立即执行。敌不动我不动，敌动了我才动。
7826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
