vue入门学习知识要点总结（一），理解Vue及其语法特点
这是Vue学习第一篇博文，主要是Vue的基础理解。后面会保持更新
Vue总结一的目录
1.1 简介
Vue.js 是什么
Vue 是一套用于动态构建用户界面的渐进式框架。
- 通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目。换而言之，就是一开始不需要你完全掌握它的全部功能特性，可以后续逐步增加功能。没有多做职责之外的事情（你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分。）
初始Vue
- 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
//创建Vue实例
new Vue({
el:'#root', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'hello',
address:'广州'
}
})
- root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法，root容器里的代码被称为【Vue模板】；
<!-- 准备好一个容器 -->
<div id="demo">
<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
-
Vue实例和容器是一一对应的。真实开发中只有一个Vue实例，并且会配合着组件一起使用；
-
{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
JS表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方，eg: a, a+b, demo(1)
JS语句：执行一些操作，eg: if(){}, for(){}…
- 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
Vue 的特点
- 遵循 MVVM 模式
-
Model-View-ViewModel，本质上就是MVC 的改进版。核心理念就是通过 声明式的数据绑定 来实现 View 层和其他层的分离。
声明式就像你告诉你朋友画一幅画，你不用去管他怎么画的细节
命令式就像按照你的命令，你朋友一步步把画画出来
-
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
-
本身只关注 UI, 也可以引入其它第三方库开发项
与其它 JS 框架的关联
- 借鉴 Angular 的模板和数据绑定技术
- 借鉴 React 的组件化和虚拟 DOM 技术
Vue 周边库
-
vue-cli: vue 脚手架
-
vue-resource
-
axios
-
vue-router: 路由
-
vuex: 状态管理
-
element-ui: 基于 vue 的 UI 组件库(PC 端)
1.2 模板语法
1）插值语法（双大括号表达式）
-
<h3>插值语法，你好，{{name}}</h3> //data内应有name数据，或computed中有...等 -
功能: 用于解析标签体内容
-
语法: {{xxx}} ，xxxx 是js表达式，且可以直接读取到data中的所有属性。
2）指令语法（以 v-开头)
-
<a v-bind:href="school.url.toUpperCase()">点我去学校学习</a> //v-bind:的简写为: -
功能: 解析标签属性、解析标签体内容、绑定事件
-
语法：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析 ,且可以直接读取到data中的所有属性。
-
说明：Vue 中有很多的指令，此处只是用 v-bind 举个例
1.3 数据绑定
1）单向数据绑定
-
<input type="text" v-bind:value="name"> //单向数据绑定 <!-- 简写：<input type="text" :value="name"><br/> --> -
语法：v-bind:href =“xxx” 或简写为 :href
-
特点：数据只能从 data 流向页面
2）双向数据绑定
-
<input type="text" v-model:value="name"> //双向数据绑定 <!-- 简写：<input type="text" v-model="name"><br/> --> -
语法：v-mode:value=“xxx” 或简写为 v-model=“xxx” 2
-
特点：数据不仅能从 data 流向页面，还能从页面流向data
-
双向绑定一般都应用在表单类元素上（如：input、select、value等）
1.4 el和data
1）选项/DOM：el
类型：string | Element
限制：只在用 new 创建实例时生效。
详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
//el的两种写法
const vm = new Vue({
//el:'#root', //第一种写法,实例化时存在这个选项，实例立即进入编译过程
data:{
name:'尚硅谷'
}
})
console.log(vm) //vue的实例对象
vm.$mount('#root') //第二种写法,显式调用 vm.$mount() 手动开启编译
2）选项/数据：data
类型：Object | Function
限制：组件的定义只接受 function。
详细：Vue 实例的数据对象。
Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据，不推荐观察拥有状态行为的对象。一旦观察过，你就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前，就声明所有的根级响应式 property。
实例创建之后，可以通过 vm.$data 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 vm.a 等价于访问 vm.$data.a。
以 _ 或 $ 开头的 property 不会被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。
当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象。
如果需要，可以通过将 vm.$data 传入 JSON.parse(JSON.stringify(...)) 得到深拷贝的原始数据对象。
new Vue({
el:'#root',
//data的第一种写法：对象式
/* data:{
name:'尚硅谷'
} */
//data的第二种写法：函数式
data(){
console.log('@@@',this) //此处的this是Vue实例对象
return{
name:'尚硅谷'
}
}
})
1.5 MVVM 模型
MVVM
- M：模型(Model) ：对应 data 中的数据
- V：视图(View) ：模板代码
- VM：视图模型(ViewModel) ： Vue 实例
观察发现
- data中所有的属性，最后都出现在了vm身上。
- vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
1.6 数据代理
回顾Object.defineproperty方法
let number = 18,person = {}
Object.defineProperty(person,'age',{
// value:18,
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log('get')
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，get不被调用，且会收到修改的具体值
set(value){
console.log('set',value)
number = value
}
})
console.log(person.age) //get 18
console.log(person.age = 10) // set 10 10
console.log(person.age) // get 10
拓展：
- 对象常量
结合writable:false和configurable:false就可以创建一个真正的常量属性（不可修改、重定义或者删除）：
var myObject = {};
Object.defineProperty(myObject, "FAVORITE NUMBER", {
value: 42,
writable: false,
configurable: false
} );
- 禁止扩展
如果你想禁止一个对象添加新属性并且保留已有属性，可以使用Object.preventExtensions(…)：
var myObject = {
a:2
};
Object.preventExtensions(myObject);
myObject.b = 3; //在非严格模式下，创建属性b会静默失败。在严格模式下，将会抛出TypeError错误。
myObject.b; // undefined
-
密封
Object.seal(…)会创建一个“密封”的对象，这个方法实际上会在一个现有对象上调用Object.preventExtensions(…)并把所有现有属性标记为configurable:false。
所以，密封之后不仅不能添加新属性，也不能重新配置或者删除任何现有属性（虽然可以修改属性的值）。 -
冻结
Object.freeze(…)会创建一个冻结对象，这个方法实际上会在一个现有对象上调用Object.seal(…)并把所有“数据访问”属性标记为writable:false，这样就无法修改它们的值。 -
以上操作都只会影响目标对象和它的直接引用对象。如果目标对象引用了其他对象，其他对象的内容不受影响，仍然是可变的。
数据代理
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
-
let obj = {x:100} let obj2 = {y:200} Object.defineProperty(obj2,'x',{ get(){ console.log('get'); return obj.x }, set(value){ console.log('set') obj.x = value } })
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写），好处是更方便操作data中的数据
基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。
本文参考了vue官方文档及尚硅谷张天禹老师的vue教程及资料。
欢迎交流