• Vue


    Vue:渲染、指令、事件、组件、Props

    如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工具,而且没有妨碍我的工作”。每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅。

    以上是我对 Vue 的介绍。在我第一次学习 Vue 的时候,我就想要这样的文章

    我喜欢 Vue 的一点是它吸取了其它框架的优秀之处,并有条不紊的将它们组合在一起。

    具有响应式组件化的虚拟 DOM 只提供视图层, props 和 类 Redux 状态管理与 React 类似。

    条件渲染和服务与 Angular 类似。

    受到 Polymer 简洁及性能方面的启发,Vue 提供了类似的模式,比如 HTML, 样式以及 JavaScript 组合在一起。

    Vue 相比其它框架的优势有: 简洁,提供更多语义化的 API , 比 React 的表现稍好,不像 Polymer 那样使用 polyfill,相比 Angular 有独立的视图。

    我还能举一些例子,但是你最好读一下这篇综合的、社区推动的文章对比其它框架 。这篇文章值得一读,但是如果你想先看代码,你也可以先跳过,以后再读。

    开始吧!
    还是从 "Hello, world!" 的例子开始。运行如下示例:

    HTML:

    {{ text }} Nice to meet Vue.
    CSS:

    复制代码
    body {
    font-family: 'Bitter', serif;
    }

    app {

    text-align: center;
    padding: 70px;
    font-size: 22px;
    max- 360px;
    margin: 0 auto;
    display: table;
    }
    复制代码
    Vue.js

    复制代码
    new Vue({
    el: '#app',
    data: {
    text: 'Hello World!'
    }
    })
    复制代码

    如果你熟悉 React,你会发现两者有很多相同之处。通过 mustache 模板以及使用一个变量,可以避免在内容中使用 JavaScript,但是不同的一点是我们直接书写 HTML 而不是 JSX 。虽然 JSX 易于使用,但是我无需再花时间把 class 改成 className,等等。这样启动及运行会更轻量。

    现在尝试一下我喜欢的 Vue 的特性: 循环以及条件渲染。

    条件渲染
    假如有一组元素,类似导航条,我打算重复利用。合理的做法是放在数组中动态的更新。使用普通的 JS (需要 Babel) ,我们会这样做: 创建一个数组,然后创建一个空字符串,用来存放使用

  • 包裹的元素,再用
      包裹所有内容,使用 innerHTML 方法添加到 DOM 中:

      HTML:

      复制代码

      • {{item}}
      复制代码 Vue.js:

      复制代码
      new Vue({
      el:"#app",
      data:{
      items:[
      'thingie',
      'another things',
      'lots of stuff',
      'yadda yadda'
      ]
      }
      })
      复制代码
      非常简洁。如果你熟悉 Angular,你对此应该不陌生。我发现这种条件渲染的方式简单明了。如果你需要更新内容,修改起来也很简单。

      另外一种好的方式是使用 v-model 进行动态绑定。试试下面的例子:

      HTML:

      Type here:

      {{message}}

      Vue.js

      复制代码
      new Vue({
      el:"#app",
      data:{
      message:"this is a good place top type"
      }
      })
      复制代码
      在这个 Demo 中你会注意到两点。首先,可以直接向书中打字并且动态更新文本。Vue 通过 v-model 非常方便的实现了