【vue】跟着老马学习vue-数据双向绑定

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

学习了node.js教程，只能说是有了一定的了解，之前也了解了webpack和es6的核心内容，也看过vue2.0的官网教程，并结合视频看过项目，但是理解和运用仍然存在很多问题，接下来的一段时间，跟着老马学习vue

学习链接：http://aicoder.com/vue/preview/all.html#1

vue最大的特点就在于它的双向绑定，是一个前端的双向绑定类的框架。

一说到vue我们就应该立刻想到以下几部分：1.数据双向绑定；2.列表渲染、条件渲染；3.事件处理；4.生命周期；5.组件化开发；6.路由；7.vuex

我们也将根据这7个部分进行学习。

1.数据双向绑定

彻底变革了之前Dom的开发方式。 所谓双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化（通过文本框输入）。

绑定文本、绑定属性（简写）、显示原生html、样式绑定（绑定样式对象、绑定样式数组、内联样式绑定）、计算属性、自动响应的实现

2.列表渲染、条件渲染

v-if、v-else、v-for、Template循环渲染多标签

3.事件处理

v-on（缩写@）、添加methods属性、事件修饰符（.stop、..prevent、.capture、.self、.once）、按键修饰符（keyup.enter）

4.vue实例、生命周期

data、computed、methods、watch（deep: true）、el

开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

vue的全局API：Vue.nextTick、Vue.set、Vue.compile

5.组件化开发

Vue.extend、Vue.component

6.路由

1） 引入vue和vue-router包

2）定义路由跳转的组件

3）定义路由规则对象（routes 、path、component）

4） 创建Vue对象，并加载上面创建的路由对象（router）

5）在模板中编写路由跳转链接（使用 router-link 组件来导航、通过传入 `to` 属性指定链接）

this.$route.params.参数名

7.综合实战

vue init webpack my-project

cd my-project

npm install

npm run dev

8.Vuex

集中式存储管理应用的所有组件的状态