vue基础
vue是什么
构建用户界面的渐进式js库
尤雨溪开发
特点
组件化模式
声明式编码
虚拟dom diff算法
初始vue
想让vue工作,就必须创建一个vue实例,且要传入一个配置对象
root容器里的代码符合heml规范,只不过混入一些特殊的vue语法
root容器里的代码被称为 vue模板
容器与实例一一对应
真实开发中只有一个vue实例,并且会配合组件一起使用
{
{xxx}}中要写js表达式,且xxx可以自动读取到data中的所有属性
一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新
vue模板语法
插值语法:{
{}},用于解析标签体内容,常用在标签体中
指令语法:v-bind:,可以简写为:,用于解析标签,常用于标签属性
数据绑定
单向绑定:v-bind
双向绑定:v-model,只能应用在表单类(输入类)元素中,默认收集value值,可以简写为v-model
el与data两种写法
el :‘ ’ == .$mount(‘ ’)
data:{ } ==data:function(){ return{ }}
mvvm模型
数据代理
为对象添加属性
Object.defineProperty( ,,{ },)(对象名,对象属性名,{对象属性值})
所添加的属性不能被遍历,{对象属性名,enumerable:ture}表示可遍历,默认为false。{对象属性名,writable:true}表示可修改,默认为false。{对象属性名,configurable:true}表示可删除,默认为false。还有get()、set()、分别在读取和修改是调用
数据代理
通过一个对象代理对另一个对象中属性的操作
vue中通过vm来数据代理data中的数据
可以更加方便操作data中的数据
基本原理
- 通过Object.defineProperty()把data对象中所有属性添加到vm上
- 为每一个添加到vm上的属性都指定一个getter、setter
- 在getter/setter内部擦奥祖data中对应的属性
事件处理
- 使用v-on:xxx或@xxx绑定事件,其中xxx是事件名
- 事件的回调需要配置在methods对象中,最红会在vm上
- methods中配置的函数&#x