工作之余不忘学习，不怕学得晚，就怕不坚持。加油！

1、vue.js——双向绑定 （v-model：P和input内容同步更新）

html:

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

js:

new Vue({
  el:'#app',
  data:{
    message:'hello vue.js!'
  }
});

el:为实例提供挂载元素。值可以是 CSS 选择符，或实际 HTML 元素，或返回 HTML 元素的函数。

2、vue.js——渲染列表（v-for：循环遍历填充）

2.1、v-for 指令基于一个数组渲染一个列表

html:

<div id="app2">
   <ul>
      <li v-for="todo in todos">
         {{ todo.text }}
      </li>
   </ul>
</div>

js:

new Vue({
  el:'#app2',
  data:{
    todos:[
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
});

在v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：

html:

<ul id="example">
   <li v-for="item in items">
      {{ parentMessage }} - {{ $index }} - {{ item.message }}
   </li>
</ul>

js：

var example = new Vue({
  el: '#example',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
});

结果：

• Parent - 0 - Foo
• Parent - 1 - Bar

从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：

<div v-for="item of items"></div>

2.2、也可以使用 v-for 遍历对象。除了 $index 之外，作用域内还可以访问另外一个特殊变量$key。

html:

<ul id="repeat-object" class="demo">
   <li v-for="value in object">
      {{ $key }} : {{ value }}
   </li>
</ul>

js:

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
});

结果：

• FirstName : John
• LastName : Doe
• Age : 30

3、vue.js——处理用户输入

可以用 v-on 指令监听 DOM 事件：我们绑定了一个单击事件处理器到一个方法  reverseMessage

split() 方法用于把一个字符串分割成字符串数组。reverse() 方法用于颠倒数组中元素的顺序。join() 方法用于把数组中的所有元素放入一个字符串。

html:

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

js:

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

4.vue.js——小例子

html:

<div id="app">
   <input v-model="newTodo" v-on:keyup.enter="addTodo">
   <ul>
      <li v-for="todo in todos">
         <span>{{ todo.text }}</span>
         <button v-on:click="removeTodo($index)">X</button>
      </li>
   </ul>
</div>

js:

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  }
});