zoukankan      html  css  js  c++  java

  • 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 非常方便的实现了