基本使用

引入vue

创建vue实例并关联容器

一个Vue实例只应对应一个容器

一个Vue实例可以有多个组件

模板语法

使用Vue实例中数据

root容器中代码被称为vue模板

语法分为插值语法和指令(v-xxx)

插值语法

绑定标签体内容

{{}}中的可以是js表达式（特殊的js代码）

表达式：一个表达式会生成一个值，放在需要值的地方

只需要改变Vue实例中的数据页面内容就会随之改变

指令

v-bind给标签属性绑定值

图中第一种方式会报错

第二种指令的方式会把双引号中内容当作表达式来处理

也可以简写为

---

v-model双向绑定

此时在下面的输入框输入内容，vue实例中i_value的值也发生变化

v-model指令只能用在表单类元素上，可以输入(有value)

简写形式

el与data的第二种写法

 后面用到组件时，会用到函数式data

 MVVM模型

数据代理

什么是数据代理：通过一个对象代理对另一个对象属性的操作

Object.defineProperties

为对象添加属性

将对象属性与变量关联

vue中的数据代理

vue对象和data对象关联

vue对象通过Object.defineProperties将data的属性加入到vue对象中，通过属性的getter，setter操作data中的值

点击会出现invoke property getter

点击即可调用message的getter获取到真正data对象中message的值

事件处理

v-on:click

提示：

vue中方法参数event代表事件状态，方法传参情况下需要在调用处用$event传递

vue中方法中this代表Vue对象

vue中的管理的方法最好不要写成箭头函数，否则在其中调用this就是windows对象了

事件修饰符

可以连用

键盘事件

keyCode指定具体的键  不推荐

给键指定别名

组合键

计算监听属性

计算属性

data中的key:value就是属性名，属性值

简写

方法简写

如果alert报错，说明Vue对象没有window的alert方法

监视属性

 

另一种写法

 

 深度监视

 

简写

不用配置项(deep,immediate)时

 

绑定样式

class

style

条件渲染

 

 列表渲染

也可以用来遍历字符串

key的作用

使用index为key

 

复用效率低，且会出现问题

使用元素唯一标识作key

总结