前端学习--Vue篇

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 事件修饰符