Vue指令指令大全

Vue指令是Vue.js的核心特性之一，为Vue.js提供了非常灵活和强大的操作DOM的能力。下面是Vue.js中常用的指令指令：

v-text

指令格式：v-text

功能：用于在元素中输出文本内容，和插值表达式{{}}相同

示例：

<!-- Vue实例 -->
<div id="app">
  <p v-text="message"></p>
</div>

<!-- 脚本 -->
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

v-html

指令格式：v-html

功能：用于在元素中输出HTML代码片段

示例：

<!-- Vue实例 -->
<div id="app">
  <p v-html="htmlMessage"></p>
</div>

<!-- 脚本 -->
<script>
  var app = new Vue({
    el: '#app',
    data: {
      htmlMessage: '<span style="color:red;">Hello Vue!</span>'
    }
  })
</script>

v-bind

指令格式：v-bind:属性名

简写：:属性名

功能：用于动态绑定元素的属性值

示例：

<!-- Vue实例 -->
<div id="app">
  <img :src="imgSrc">
</div>

<!-- 脚本 -->
<script>
  var app = new Vue({
    el: '#app',
    data: {
      imgSrc: 'https://vuejs.org/images/logo.png'
    }
  })
</script>

v-on

指令格式：v-on:事件名

简写：@事件名

功能：用于绑定元素的事件

示例：

<!-- Vue实例 -->
<div id="app">
  <button @click="showMessage">点击我</button>
</div>

<!-- 脚本 -->
<script>
  var app = new Vue({
    el: '#app',
    methods: {
      showMessage: function () {
        alert('Hello Vue!')
      }
    }
  })
</script>

以上是Vue.js中常用的指令，更多指令可以查看Vue.js官方文档。