zoukankan      html  css  js  c++  java
  • Vue.js学习笔记(一)

    来自于《前端乱炖》里尤老师的基础教程;

      Vue.js 不是一个框架,它只是一个提供 MVVM 风格的双向数据绑定的库,专注于 UI 层面。Vue.js 提供的核心是 MVVM 中的 VM,也就是 ViewModel。ViewModel 负责连接 View 和 Model,保证视图和数据的一致性。

      在 Vue.js 的定义中,View 就是用户实际看到的 DOM 元素,而 Model 就是原生的JavaScript 对象。作为开发者,真正需要关注的只有 ViewModel,也就是 Vue.js 所提供的 Vue 构建函数:

    var vm = new Vue({
        // 选项...
    })

      1.ViewModel 连接 View 和 Model 。假设我们有这样的 HTML:

      

    <div id="demo">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

      然后有这样的数据:

    var data = {
        message: 'Hello Vue.js!'
    }

      我们要做的就是这样:

    var demo = new Vue({
        el: '#demo',
        data: data
    })

      效果如下:

      看上去就像是渲染了个模板而已,但其实 Vue.js 已经建立了 DOM 和数据之间的连接,此时任何对 data.message 的改动,都会触发 DOM 的更新。而更神奇的是 v-model 这条 directive 是双向的数据绑定,当用户在输入栏里打字的时候,数据会被同步回 data.message 当中去。

      另外方便的是,返回的 demo 这个 ViewModel 对象会自动代理 data 上的属性,所以你可以直接运行 demo.message = 'what!',能够得到和直接操作数据一样的结果。这个特点在之后会常常用到。

      除了直接绑定一个数据值之外,你还可以在绑定中使用表达式:

    <div id="demo">
        <p>{{message.split('').reverse().join('')}}</p>
        <input v-model="message">
    </div>

      效果如下:

    来自于《前端乱炖》里尤老师的基础教程;

  • 相关阅读:
    11. Container With Most Water
    9. Palindrome Number
    375. 猜数字大小 II leetcode java
    leetcode 72 编辑距离 JAVA
    73. 矩阵置零 leetcode JAVA
    快速排序 JAVA实现
    63. 不同路径 II leetcode JAVA
    重写(override)与重载(overload)
    62 不同路径 leetcode JAVA
    leetcode 56 合并区间 JAVA
  • 原文地址:https://www.cnblogs.com/oygg/p/5435652.html
Copyright © 2011-2022 走看看