1. 初识Vue
1.1 一个vue实例只会接管一个容器
上面只会用第一个:
1.2.一个容器只会被一个vue实例接管
结果:
综上,容器和vue实例是一 一对应的关系
1.3.注意 js 表达式 和js 代码的区别
1.4 转大写
- 总结
2. 语法
2.1 v-bind
前面一旦出现 v- 就会把 " " 里面的东西当做js表达式去执行,而不再是字符串
比如下面的会报错:
v-bind: 可以简写为 :
2.2 总结
- 注意vue实例中data 下多级写法:
2.3 数据绑定
- v-bind 属于单向绑定:
- v-model 属于双向绑定
结果:
v-model 是对 value 进行优化的,所以它只能应用于表单类元素,例如输入框,下拉多选框等含有value属性的
简写上面:
2.4 el 与 data 的两种写法
- el :
- data :
后面学习组件后data必须采取函数式
总结:
2.5 MVVM模型
- vm 上有的 都能在模板直接用:
结果:
总结:
2.6 数据代理(ES6中的内容)
给person添加属性:
通过上面方法添加的属性 是不会参与枚举的
Object.keys() : 把属性拿到数组里面
应用:
- get()
- set()
验证:
- vue中的数据代理:
实际上也是读取了_data.name里面的东西,只不过做了数据代理后,不用这样写了,方便了写代码:
2.7 事件处理
2.7.1 事件的基本使用
2.7.2 事件修饰符