F's Blog

博客 收藏夹
vue.js

29 Mar 2017

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。

渐进式,字面意思是慢慢的,不一下完成,不需要引入一整套解决方案。需要多少引入多少,架构是分层的。

开始

HTML:

<div id="app">
  
</div>

JS:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

在 html message 就会跟着 js 里的 message 变了。

从上面可以总结出:

指令

指令都带有 v- 前缀。

常用的有:

组件

HTML:

<div id="app-7">
  <ol>
    <!-- 现在我们为每个todo-item提供待办项对象    -->
    <!-- 待办项对象是变量,即其内容可以是动态的 -->
    <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  </ol>
</div>

JS:

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li></li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { text: '蔬菜' },
      { text: '奶酪' },
      { text: '随便其他什么人吃的东西' }
    ]
  }
})

结果:

蔬菜
奶酪
随便其他什么人吃的东西

总结:

参考

本文由 付豪 创作,采用署名 4.0 国际(CC BY 4.0)创作共享协议进行许可,详细声明