Vue 指令

vue 指令介绍

     指令带有前缀  v- ，以表示它们是 Vue 提供的特殊特性。 它们会在渲染的 DOM 上应用特殊的响应式行为。

1. v-bind 主要用于属性的绑定

    例： 给元素添加一个title 属性

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

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

在这里，使用 v-bind  指令的意思是：“将  <span>  这个元素节点的  title  特性和 Vue 实例的  message  属性保持一致”。

   

2. v-if 主要用于条件判断

    例： 控制切换一个元素是否显示

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

var app2 = new Vue({
  el: '#app2',
  data: {
    seen: true
  }
})

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性，还可以绑定到 DOM 结构。




3. v-for 指令可以循环遍历绑定数据

    例： 用绑定数组的数据来渲染一个项目列表

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

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

 

4. v-on 指令用于事件监听，通过它来调用在Vue实例中定义的方法

    例： 用事件监听调用在Vue实例中定义的方法

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

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

5. v-model 指令用于可以轻松的实现双向数据绑定

    例：实现表单输入和应用状态之间的双向绑定

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

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




    例：  控制切换一个元素是否显示