Vue常用指令

本文章会持续更新，欢迎大家在评论区提供些自己常用到的指令！

1.v-bind: title   绑定标签属性

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

2. v-if、v-else、v-else-if条件    

  仔细说下：v-show也可以控制元素是否可见，用法和v-if大致相同。区别主要有两个地方：

1.作用域：v-show 不可用在template上面 ，v-if可以

2.实现原理：v-show控制是否可见是将元素全部渲染出来，只是控制元素css的display改变，从而控制元素显示或者隐藏。

v-if则是可以控制元素是否渲染，如果为false则元素不会被渲染，页面加载会加快

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

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

3. v-for 循环语句   标准写法应该配备key    ：key ="todo.text"

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

var app4 =new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

4. v-on 绑定事件（很常用）

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({

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

5. 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!'
  }
})