Vue介绍
Vue是一个JavaScript框架。作用 ：构建用户页面，将数据渲染到页面。 特点：渐进式。
vue是MVVM设计模式的框架
-
MVVM设计模式：一种软件架构模式，决定了写代码的方式。
- M：model数据模型(ajax获取到的数据)
- V：view视图（页面）
- VM：ViewModel 视图模型(vue实例)
-
MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）
Vue指令介绍
| 指令名称 | 指令作用 | 示例 | 简写形式 |
|---|---|---|---|
| v-text | 设置元素的innerText | v-text="111" | 无 |
| v-html | 设置元素的innerHTML | v-html="<p>111</p>" | 无 |
| v-on | 给元素绑定事件 | v-on:click="doClick" | @click="doClick" |
| v-bind | 设置元素的原生属性 | v-bind:src="./logo.png" | :src="./logo.png" |
| v-for | 列表渲染 | <li v-for=(item,index) in list></li> | 无 |
vue方法中的this
-
1.vue事件方法中的this指向 ：
vue实例 -
2.vue事件方法中访问data对象中的成员 :
this.属性名- vue会将data对象与methods对象中的成员
平铺到 vue实例中
- vue会将data对象与methods对象中的成员
-
3.注意点： 如果事件处理代码没有写到methods中，而是写在行内则不需要this 就可以访问data对象中的成员
