Vue.js

Vue.js是一套构建用户界面的 渐进式框架。
引入：vuejs文件：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

1、声明式渲染：
绑定插入的文本内容
html:

<div id="app">
  {{message}}
</div>

JS:

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

绑定 DOM 元素属性(v-bind)

<div id="app-2">
  <span v-bind:title="message">
     我是一条消息
  </span>
</div>

js:

var app2 = new Vue({
    el: '#app-2',
    data: {
         message: 'You loaded this page on ' + new Date()
    }
})

2、条件与循环(v-if)：

<div id="app-3">
    <p v-if="seen">显示</p>
</div>

var app3 = new Vue({
    el:'#app-3',
    data:{
         seen:true
    }
 })

v-for 指令可以绑定数据到数组来渲染一个列表

<div id="app-4">
    <ol>
       <li v-for="todo in todos">
            {{ todo.text }}
       </li>
    </ol>
</div>

var app4 = new Vue({
    el:'#app-4',
    data:{
       todos:[
           {text:'学习html'},
           {text:'css'},
           {text:'vue.js'}
       ]
    }
})

3、处理用户输入：
v-on 指令绑定一个监听事件用于调用我们 Vue 实例中定义的方法

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click='reverseMessage'>Reverse Message</button>
</div>

var app5 = new Vue({
    el:'#app-5',
    data:{
          message:'Hello Vue.js!'
    },
    methods:{
          reverseMessage:function(){
                this.message=this.message.split('').reverse().join('');
           }
    }
})

v-model双向数据绑定

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

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

4、组件化应用构建 ：

<div id="app-7">
     <ol>
         <todo-item v-for="item in groceryList" v-bind:todo='item'></todo-item>
      </ol>
</div>

// Define a new component called todo-item

Vue.component('todo-item', {
    props:['todo'],
      template: '<li>{{todo.text}}</li>'
    })
    var app7 = new Vue({
       el:'#app-7',
       data:{
            groceryList:[
                {text:'今天'},
                {text:'明天'},
                {text:'每天'}
             ]
        }
})