当前位置：首页 > news >正文

Vue2基础概念与指令

news 2025/9/8 7:18:33

基本结构

Vue2 应用的基本结构包含四个主要步骤：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Vue2 示例</title></head>
<body><!-- 2. 准备容器 --><div id="app">{{ message }}</div><!-- 1. 引入Vue包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>// 3. 创建Vue实例const app = new Vue({// 4. 指定配置el: '#app', // 挂载元素data: {message: 'Hello Vue!'},methods: {// 方法定义fn() {console.log('方法被调用');}}});</script>
</body>
</html>

插值表达式

插值表达式 {{ }} 是 Vue 中最基本的文本绑定方式：

<div id="app"><p>{{ message }}</p><p>{{ number + 1 }}</p><p>{{ ok ? 'YES' : 'NO' }}</p><p>{{ message.split('').reverse().join('') }}</p>
</div>

注意事项：

使用的 data 数据必须存在
支持表达式，而非语句
不能在标签属性中使用插值表达式

常用指令

v-html：设置元素的 innerHTML

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

data中的rawHtml内容会以html形式解析到该标签中。

v-show 与 v-if：条件渲染

<div v-show="isVisible">v-show 控制显示</div>
<div v-if="isExist">v-if 控制存在</div><!-- v-else 和 v-else-if -->
<div v-if="type === 'A'">类型A</div>
<div v-else-if="type === 'B'">类型B</div>
<div v-else>其他类型</div>

区别：

v-show：通过 CSS display 属性控制显示/隐藏，适合频繁切换的场景
v-if：通过创建/移除 DOM 元素控制存在，适合条件很少改变的场景

v-on：事件处理

<!-- 内联语句 -->
<button v-on:click="count++">增加</button><!-- 方法处理器 -->
<button v-on:click="handleClick">点击</button><!-- 简写形式 -->
<button @click="handleClick">点击</button><!-- 调用传参 -->
<button @click="handleClick('参数', $event)">带参数点击</button>

v-bind：属性绑定

<!-- 绑定属性 -->
<img v-bind:src="imageSrc">
<a v-bind:href="url">链接</a><!-- 简写形式 -->
<img :src="imageSrc">
<a :href="url">链接</a><!-- 绑定 class -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<div :class="[activeClass, errorClass]"></div><!-- 绑定 style -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="[baseStyles, overridingStyles]"></div>

v-for：列表渲染

<ul><li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.text }}</li>
</ul><!-- 遍历对象 -->
<div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}
</div>

重要：始终为 v-for 列表项提供唯一的 :key 属性，以便 Vue 跟踪节点身份，实现高效更新。

v-model：表单输入绑定

<!-- 文本输入 -->
<input v-model="message" placeholder="编辑我">
<p>输入的消息: {{ message }}</p><!-- 多行文本 -->
<textarea v-model="message"></textarea><!-- 复选框 -->
<input type="checkbox" v-model="checked"><!-- 多个复选框 -->
<input type="checkbox" value="Jack" v-model="checkedNames">
<input type="checkbox" value="John" v-model="checkedNames">
<input type="checkbox" value="Mike" v-model="checkedNames"><!-- 单选按钮 -->
<input type="radio" value="One" v-model="picked">
<input type="radio" value="Two" v-model="picked"><!-- 下拉选择 -->
<select v-model="selected"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option>
</select>

计算属性

写在computed内。

作为属性直接使用而不是引用
有缓存，一旦计算出结果就会立刻缓存，下次读取直接读缓存

<div id="app"><p>原始消息: "{{ message }}"</p><p>计算后反转消息: "{{ reversedMessage }}"</p>
</div><script>
const app = new Vue({el: '#app',data: {message: 'Hello'},computed: {// 简写形式（只读）reversedMessage() {return this.message.split('').reverse().join('')},// 完整形式（可读可写）fullName: {get() {return this.firstName + ' ' + this.lastName},set(newValue) {const names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}
})
</script>

指令修饰符

Vue 提供了一些特殊的后缀—修饰符，用于指出一个指令应该以特殊方式绑定。

<!-- 按键修饰符 -->
<input @keyup.enter="submit">
<input @keyup.13="submit"> <!--指定键码 --><!-- 系统修饰键 -->
<input @keyup.ctrl.enter="onCtrlEnter"><!-- 事件修饰符 -->
<div @click.stop="doThis">阻止单击事件继续传播</div>
<form @submit.prevent="onSubmit">提交事件不再重载页面</form>
<a @click.stop.prevent="doThat">修饰符可以串联</div><!-- v-model 修饰符 -->
<input v-model.trim="msg">   <!-- 自动过滤首尾空白字符 -->
<input v-model.number="age" type="number"> <!-- 将输入转为数值类型 -->
<input v-model.lazy="msg">   <!-- 在 change 事件而非 input 事件中同步 -->