vue3模板语法

Vue 3 中的模板语法是用于将数据绑定到 DOM 的一种声明式语法。它允许你在 HTML 中嵌入 Vue 的特定指令和表达式，从而实现动态内容的展示。以下是一些常用的 Vue 3 模板语法示例和概念：

插值

1. 文本插值：使用双大括号 {{ }} 来绑定数据。

   <template>
     <div>{{ message }}</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         message: 'Hello, Vue 3!'
       }
     }
   }
   </script>
   

2. HTML 插值：使用 v-html 指令来插入 HTML 内容。

   <template>
     <div v-html="rawHtml"></div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         rawHtml: '<span style="color: red;">This is red text.</span>'
       }
     }
   }
   </script>
   

指令

Vue 提供了一组指令用于执行 DOM 操作。指令以 v- 开头。

1. v-bind：绑定元素属性。

   <template>
     <img v-bind:src="imageSrc" alt="Image">
   </template>
   
   <script>
   export default {
     data() {
       return {
         imageSrc: 'https://example.com/image.png'
       }
     }
   }
   </script>
   

   简写：:src="imageSrc"

2. v-on：绑定事件监听器。

   <template>
     <button v-on:click="handleClick">Click me</button>
   </template>
   
   <script>
   export default {
     methods: {
       handleClick() {
         alert('Button clicked!');
       }
     }
   }
   </script>
   

   简写：@click="handleClick"

3. v-model：双向绑定表单元素。

   <template>
     <input v-model="inputValue" placeholder="Type something...">
     <p>You typed: {{ inputValue }}</p>
   </template>
   
   <script>
   export default {
     data() {
       return {
         inputValue: ''
       }
     }
   }
   </script>
   

4. v-if / v-else-if / v-else：条件渲染。

   <template>
     <div v-if="status === 'success'">Success!</div>
     <div v-else-if="status === 'pending'">Loading...</div>
     <div v-else>Error!</div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         status: 'success'
       }
     }
   }
   </script>
   

5. v-for：列表渲染。

   <template>
     <ul>
       <li v-for="(item, index) in items" :key="index">{{ item }}</li>
     </ul>
   </template>
   
   <script>
   export default {
     data() {
       return {
         items: ['Apple', 'Banana', 'Cherry']
       }
     }
   }
   </script>
   

缩写

• v-bind 缩写为 :

  <a :href="url">Link</a>
  

• v-on 缩写为 @

  <button @click="doSomething">Click me</button>
  

计算属性和侦听器

• 计算属性：用于声明式地计算属性值。

  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
  

• 侦听器（Watchers）：用于对数据变化做出反应。

  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    }
  }
  

这些基本语法构成了 Vue 3 模板语言的基础，它们能够让开发者把 JavaScript 对象的状态直接映射为用户界面。这种方式大大简化了动态内容更新的逻辑。