zoukankan      html  css  js  c++  java
  • 【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

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

  • 相关阅读:
    2018.9.22 Bubble Cup 11-Finals(Online Mirror,Div.2)
    2018.9.21 Codeforces Round #511(Div.2)
    2018.9.20 Educational Codeforces Round 51
    解题:USACO12OPEN Bookshelf
    解题:CF983B pyramid
    1214. 许可证密钥格式
    1212. 最大连续1的个数
    1270. 勒索信
    1250. 第三大的数
    1218. 补数
  • 原文地址:https://www.cnblogs.com/yujihang/p/7296170.html
Copyright © 2011-2022 走看看