vue简介
vue是一套用于构建用户界面的渐进式JavaScript框架。
渐进式：Vue可以自底向上逐层的应用。
特点：
- 采用组件化模式，提高代码复用率、且让代码更好维护。
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
模板语法
- 插值语法：
用于解析标签体内容
<div id="app"> <h1>{{name}}</h1> <p>{{name}}</p> </div>
- 指令语法：
用于解析标签（包括：标签属性、标签体内容、绑定事件）
<div id="app"> <a v-bind:href="url">去百度</a> <a :href="url">去百度</a> </div>
绑定
两种绑定方式
- 单向绑定（v-bind）：数据只能从data流向页面。
- 双向绑定（v-model）：数据既可以从data流向页面，也可以从页面流向data。
备注：
- 双向绑定一般应用在表单类元素上（如：input、select等）
- v-model：value可以简写为v-model，因为v-model默认收集的就是value值。
单向数据绑定：<input type="text" :value="name"><br> 双向数据绑定：<input type="text" v-model="name"/>
el与data的两种写法
- el的两种写法
- new的时候配置el属性
- 先创建Vue实例，随后再通过vm.$mount('#root')制定el的值
<script type="text/javascript"> new Vue({ el: '#app', data:{ name: 'dyy' } }); const vm = Vue({ data:{ name: 'dyy' } }); vm.$mount('#app'); </script>
- data的两种写法
- 对象式
- 函数式（使用组件时使用函数式）
<script type="text/javascript"> //1. new的时候赋值data new Vue({ el: '#app', data:{ name: 'dyy' } }); //2. 利用函数赋值data（两种同样效果） new Vue({ el: '#app', data:function(){ return { name: 'dyy' } } }); //或 new Vue({ el: '#app', data(){ return { name: 'dyy' } } }); </script>
注意：由Vue管理的函数，一定不要写成箭头函数，箭头函数的this不再是vue实例了。
MVVM模型
- M：模型（model）：对应data中的数据
- V：视图（View）：模板
- VM：视图模型（ViewModel）：Vue实例对象
注意：
- data中所有的属性，最后都出现在了vm身上。
- vm身上所有的属性及Vue原型上所有属性，在vue模板中都可以直接使用。
数据代理
通过一个对象代理对另一个对象中的属性的操作（读/写）
<script> let obj = { x: 100 }; let obj2 = { y: 200 }; Object.defineProperty(obj2, 'x', { get() { return obj.x; }, set(value) { obj.x = value; } }) </script>
