Vue.js之核心语法与指令

一、核心语法

1. 数据绑定

• 插值表达式：用 {{ }} 直接渲染数据，支持表达式计算。
  示例：<p>{{ message }}</p>，若 data 中 message: "Hello"，则渲染为 <p>Hello</p>。
• 响应式原理：数据变化时自动更新视图，无需手动操作 DOM。

2. 指令系统

指令以 v- 开头，用于实现动态逻辑，核心指令及示例：

• 条件渲染

  • v-if：根据条件决定是否渲染元素（完全销毁/重建）。
    示例：

    <p v-if="isVisible">显示内容</p>
    <p v-else>隐藏内容</p>
    

    若 isVisible: true，则渲染第一段文字，否则渲染第二段。
  • v-show：通过 display 切换显示/隐藏（不销毁 DOM）。
    示例：<p v-show="isVisible">内容</p>，适合频繁切换的场景。

• 列表渲染

  • v-for：遍历数组/对象生成元素，需配合 :key 优化性能。
    示例：

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

    若 items: [1, 2, 3]，则渲染为 3 个列表项。

• 事件绑定

  • v-on（简写 @）：监听 DOM 事件，执行方法。
    示例：

    <button @click="handleClick">点击</button>
    

    在 methods 中定义 handleClick 方法处理点击逻辑。

• 属性绑定

  • v-bind（简写 :）：动态绑定 HTML 属性。
    示例：<img :src="imageUrl" :alt="imageAlt">，绑定图片路径和描述。

• 双向绑定

  • v-model：实现表单输入与数据的同步。
    示例：

    <input v-model="message" placeholder="输入内容">
    <p>输入的内容是：{{ message }}</p>
    

    输入框内容变化时，message 数据自动更新。

3. 特殊指令

• v-pre：跳过编译，保留原始模板语法（如显示 {{ }}）。
  示例：<span v-pre>{{ 这是未解析的内容 }}</span>。
• v-cloak：防止页面加载时闪烁，需配合 CSS [v-cloak] { display: none }。
  示例：

  <div v-cloak>{{ message }}</div>
  

  当 Vue 实例编译完成后，v-cloak 属性会被移除。

二、完整示例

<div id="app"><!-- 插值表达式 --><p>{{ title }}</p><!-- 属性绑定 --><img :src="logo" alt="Logo" width="100"><!-- 条件渲染 --><p v-if="isLoggedIn">欢迎回来，{{ username }}！</p><p v-else>请先登录</p><!-- 列表渲染 --><ul><li v-for="(item, index) in products" :key="index">{{ item.name }} - ¥{{ item.price }}</li></ul><!-- 事件绑定 --><button @click="addItem">添加商品</button><!-- 双向绑定 --><input v-model="newItem" placeholder="输入商品名称">
</div><script>const app = new Vue({el: '#app',data: {title: "Vue.js 示例",logo: "https://vuejs.org/logo.png",isLoggedIn: true,username: "张三",products: [{ name: "商品1", price: 99 },{ name: "商品2", price: 199 }],newItem: ""},methods: {addItem() {if (this.newItem) {this.products.push({ name: this.newItem, price: 0 });this.newItem = "";}}}});
</script>