Vue.js 模板语法基础

Vue.js 使用基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 模板都是合法的 HTML，能被遵循规范的浏览器和 HTML 解析器解析。

插值

• 文本插值：使用双大括号 {{ }} 绑定数据，内容会被替换为对应属性的值。

  <span>{{ message }}</span>
  

• 原始 HTML：使用 v-html 指令输出原始 HTML，避免 XSS 攻击风险。

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

指令

• 指令是带有 v- 前缀的特殊属性，其值预期是单个 JavaScript 表达式（v-for 例外）。

  <p v-if="seen">现在你看到我了</p>
  <a v-bind:href="url">链接</a>
  <button v-on:click="doSomething">按钮</button>
  

常用指令详解

条件渲染

• v-if：根据表达式值的真假条件性地渲染元素。

  <div v-if="type === 'A'">Type A</div>
  <div v-else-if="type === 'B'">Type B</div>
  <div v-else>Type C</div>
  

列表渲染

• v-for：基于源数据多次渲染元素或模板块。

  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }} - {{ item.message }}
    </li>
  </ul>
  

事件处理

• v-on：监听 DOM 事件并执行相应方法。

  <button v-on:click="counter += 1">Add 1</button>
  <button v-on:click="greet">Greet</button>
  

计算属性和侦听器

计算属性

• 使用 computed 处理复杂逻辑，结果会被缓存。

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

侦听器

• 使用 watch 观察数据变化并执行异步或开销较大的操作。

  watch: {
    question: function (newVal, oldVal) {
      this.getAnswer()
    }
  }
  

表单输入绑定

双向绑定

• v-model 在表单输入元素上创建双向数据绑定。

  <input v-model="message" placeholder="edit me">
  <textarea v-model="message"></textarea>
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
  </select>
  

样式和类绑定

动态类名

• 通过对象语法或数组语法动态切换 class。

  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :class="[activeClass, errorClass]"></div>
  

内联样式

• 使用对象语法或数组语法绑定样式。

  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  <div :style="[baseStyles, overridingStyles]"></div>
  

组件通信

Props

• 父组件通过 props 向子组件传递数据。

  props: ['title', 'content']
  

自定义事件

• 子组件通过 $emit 触发父组件监听的事件。

  this.$emit('enlarge-text', 0.1)
  

插槽

• 使用 <slot> 分发内容，实现组件内容组合。

  <alert-box>
    Something bad happened.
  </alert-box>
  

高级模板特性

动态组件

• 使用 <component> 元素动态切换不同组件。

  <component :is="currentComponent"></component>
  

过渡效果

• 使用 <transition> 包裹元素实现进入/离开过渡。

  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
  

指令修饰符

• 修饰符是以点开头的特殊后缀，用于指出指令应该以特殊方式绑定。

  <form v-on:submit.prevent="onSubmit"></form>
  <input v-model.trim="msg">
  

以上内容涵盖了 Vue.js 模板语法的核心概念和常用功能，通过灵活组合这些特性可以构建复杂的交互式界面。