Vue.js 内置指令

Vue.js 内置了一系列指令，这些指令可以让你更容易地操作DOM。下面是一些常用的Vue.js内置指令：

1. v-text: 用于更新元素的文本内容。

<span v-text="msg"></span>

new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

2. v-html: 用于更新元素的innerHTML，可以解析HTML标签。

<div v-html="rawHtml"></div>

new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color: red;">This should be red.</span>'
  }
})

3. v-if: 根据表达式的值的真假来有条件地渲染元素。如果值为false，则元素不会被渲染到DOM中。

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

new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

4. v-show: 根据表达式的值的真假，切换元素的display CSS属性。如果值为false，元素会被隐藏。

<p v-show="isShow">这段文本会被显示</p>

new Vue({
  el: '#app',
  data: {
    isShow: true
  }
})

5. v-for: 用来遍历数据数组来渲染一个列表。

<ul>
  <li v-for="item in items">{{ item.text }}</li>
</ul>

new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Item 1' },
      { text: 'Item 2' },
      { text: 'Item 3' }
    ]
  }
})

6. v-on: 用来监听DOM事件，比如点击事件。

<button v-on:click="doSomething">点击我</button>

new Vue({
  el: '#app',
  methods: {
    doSomething: function() {
      console.log('Something done!');
    }
  }
})

7. v-bind: 用来动态地绑定一个或多个属性，或一个组件prop到表达式。

<img v-bind:src="imageSrc">

new Vue({
  el: '#app',
  data: {
    imageSrc: 'path_to_image.jpg'
  }
})

8. v-model: 创建数据双向绑定，用于表单输入等元素。

<input v-model="message">

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

9. v-prev: 用来绑定元素的内容，作为后备内容，在宿主元素被移除时显示。

<span v-prev>{{ msg }}</span>

new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

10. v-once: 只执行一次内容的绑定，一旦绑定完成，就不再响应数据的变化。

<span v-once>{{ msg }}</span>

new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
})

这些是Vue.js中的内置指令，每个指令都有特定的用途，可以根据需要选择