文章目录
- [1 Vue框架介绍](#1 Vue框架介绍)
- [2 MVVM模式](#2 MVVM模式)
- [3 Vue快速入门](#3 Vue快速入门)
-
- [3.1 基本用法](#3.1 基本用法)
- [3.2 内容渲染指令](#3.2 内容渲染指令)
- [3.3 属性绑定指令](#3.3 属性绑定指令)
- [3.4 使用JavaScript表达式](#3.4 使用JavaScript表达式)
- [3.5 事件绑定指令](#3.5 事件绑定指令)
- [3.6 条件渲染指令](#3.6 条件渲染指令)
- [3.7 列表渲染指令](#3.7 列表渲染指令)
- [3.8 v-for中的key](#3.8 v-for中的key)
1 Vue框架介绍
- Vue是一套用于构建用户界面的渐进式框架。
- Vue.js提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
- 其目标是通过尽可能简单的API实现响应式的数据绑定和可组合的视图组件。
2 MVVM模式
- MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定。
- Vue提供了MVVM风格的双向数据绑定，核心是MVVM中的VM，也就是ViewModel，ViewModel负责连接View和Model，保证视图和数据的一致性。
3 Vue快速入门
3.1 基本用法
Vue.js 是一个用于构建用户界面的渐进式JavaScript框架。它的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
html
<div id="app">
<p>{{ message }}</p>
</div>
<script>
// 创建Vue应用
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
})
// 挂载到DOM
app.mount('#app')
</script>说明：
Vue.createApp()创建Vue应用实例data()函数返回响应式数据{``{ }}是插值表达式，用于显示数据app.mount('#app')将应用挂载到指定的DOM元素
3.2 内容渲染指令
Vue提供了多种内容渲染指令，用于将数据渲染到模板中。
html
<div id="app">
<!-- 文本插值 -->
<p>{{ message }}</p>
<!-- v-text指令 -->
<p v-text="message"></p>
<!-- v-html指令（注意XSS风险） -->
<p v-html="htmlContent"></p>
</div>
<script>
Vue.createApp({
data() {
return {
message: 'Hello Vue!',
htmlContent: '<strong>加粗文本</strong>'
}
}
}).mount('#app')
</script>说明：
{``{ }}是最基本的文本插值v-text更新元素的textContentv-html更新元素的innerHTML，会解析HTML标签- 注意：
v-html有XSS安全风险，只用于信任的内容
3.3 属性绑定指令
使用 v-bind 或简写 : 可以动态绑定HTML属性。
html
<div id="app">
<!-- 绑定href属性 -->
<a :href="url">访问网站</a>
<!-- 动态绑定class -->
<div :class="{ active: isActive, 'text-danger': hasError }">
动态类名
</div>
<!-- 绑定style -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }">
动态样式
</div>
<!-- 绑定disabled属性 -->
<button :disabled="isDisabled">提交</button>
</div>
<script>
Vue.createApp({
data() {
return {
url: 'https://vuejs.org',
isActive: true,
hasError: false,
textColor: '#3498db',
fontSize: 16,
isDisabled: false
}
}
}).mount('#app')
</script>说明：
:是v-bind:的简写- 可以绑定任何HTML属性
- 动态class可以是对象、数组或字符串
- 动态style可以是对象或数组
3.4 使用JavaScript表达式
Vue模板中支持完整的JavaScript表达式。
html
<div id="app">
<!-- 字符串操作 -->
<p>{{ message.toUpperCase() }}</p>
<!-- 数学运算 -->
<p>数量: {{ count + 1 }}</p>
<!-- 三元表达式 -->
<p>{{ isActive ? '激活' : '未激活' }}</p>
<!-- 方法调用 -->
<p>{{ formatDate(now) }}</p>
<!-- 属性中的表达式 -->
<p :title="'提示: ' + message">悬停查看提示</p>
</div>
<script>
Vue.createApp({
data() {
return {
message: 'hello vue',
count: 5,
isActive: true,
now: new Date()
}
},
methods: {
formatDate(date) {
return date.toLocaleDateString()
}
}
}).mount('#app')
</script>说明：
- 支持完整的JavaScript表达式语法
- 每个绑定只能包含单个表达式
- 不支持语句（如if、for等控制流）
- 可以使用模板中定义的方法
3.5 事件绑定指令
使用 v-on 或简写 @ 来监听DOM事件。
html
<div id="app">
<!-- 基本事件处理 -->
<button @click="handleClick">点击我</button>
<!-- 内联表达式 -->
<button @click="count++">增加: {{ count }}</button>
<!-- 传递参数 -->
<button @click="sayHello('Vue')">打招呼</button>
<!-- 访问事件对象 -->
<button @click="handleEvent($event)">事件对象</button>
<!-- 事件修饰符 -->
<form @submit.prevent="onSubmit">
<input @keyup.enter="submit">
</form>
</div>
<script>
Vue.createApp({
data() {
return {
count: 0
}
},
methods: {
handleClick() {
alert('按钮被点击了!')
},
sayHello(name) {
alert(`Hello, ${name}!`)
},
handleEvent(event) {
console.log('事件类型:', event.type)
},
onSubmit() {
console.log('表单提交被阻止了')
},
submit() {
console.log('按下了回车键')
}
}
}).mount('#app')
</script>说明：
@是v-on:的简写- 可以传递参数和事件对象
- 支持事件修饰符：
.stop、.prevent、.once等 - 支持按键修饰符：
.enter、.esc、.space等
3.6 条件渲染指令
Vue提供了多种条件渲染指令来控制元素的显示与隐藏。
html
<div id="app">
<!-- v-if指令 -->
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>
<!-- v-show指令 -->
<p v-show="isVisible">我会显示/隐藏</p>
<!-- 切换显示 -->
<button @click="toggle">切换显示</button>
<div v-if="show">使用v-if切换</div>
<div v-show="show">使用v-show切换</div>
</div>
<script>
Vue.createApp({
data() {
return {
score: 85,
isVisible: true,
show: true
}
},
methods: {
toggle() {
this.show = !this.show
}
}
}).mount('#app')
</script>v-if vs v-show：
v-if是真正的条件渲染，元素会被销毁/重建v-show只是切换CSS的display属性v-if有更高的切换开销，v-show有更高的初始渲染开销- 频繁切换使用
v-show，很少改变使用v-if
3.7 列表渲染指令
使用 v-for 指令基于数组或对象渲染列表。
html
<div id="app">
<!-- 遍历数组 -->
<ul>
<li v-for="(item, index) in fruits" :key="item.id">
{{ index + 1 }}. {{ item.name }} - ￥{{ item.price }}
</li>
</ul>
<!-- 遍历对象 -->
<ul>
<li v-for="(value, key) in user">
{{ key }}: {{ value }}
</li>
</ul>
<!-- 遍历数字范围 -->
<div>
<span v-for="n in 5" :key="n">⭐</span>
</div>
</div>
<script>
Vue.createApp({
data() {
return {
fruits: [
{ id: 1, name: '苹果', price: 5 },
{ id: 2, name: '香蕉', price: 3 },
{ id: 3, name: '橙子', price: 4 }
],
user: {
name: '张三',
age: 25,
city: '北京'
}
}
}
}).mount('#app')
</script>说明：
v-for可以遍历数组、对象和数字范围- 遍历数组：
(item, index) in items - 遍历对象：
(value, key, index) in object - 遍历数字：
n in 10(从1到10) - 必须为每个项提供
:key属性
3.8 v-for中的key
key 属性是Vue识别节点的通用机制，对v-for的高效更新至关重要。
html
<div id="app">
<h3>没有key的问题（使用索引）</h3>
<button @click="addItemToStart">在开头添加项目</button>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item.name }} <input type="text" placeholder="输入内容">
</li>
</ul>
<h3>正确使用key（使用唯一ID）</h3>
<button @click="addItemToStart2">在开头添加项目</button>
<ul>
<li v-for="item in items2" :key="item.id">
{{ item.name }} <input type="text" placeholder="输入内容">
</li>
</ul>
</div>
<script>
Vue.createApp({
data() {
return {
items: [
{ name: '项目A' },
{ name: '项目B' },
{ name: '项目C' }
],
items2: [
{ id: 1, name: '项目A' },
{ id: 2, name: '项目B' },
{ id: 3, name: '项目C' }
],
nextId: 4
}
},
methods: {
addItemToStart() {
this.items.unshift({ name: '新项目' })
},
addItemToStart2() {
this.items2.unshift({
id: this.nextId++,
name: '新项目'
})
}
}
}).mount('#app')
</script>key的重要性：
- 唯一标识：帮助Vue识别每个节点的身份
- 高效更新：实现高效的虚拟DOM diff算法
- 状态保持：保持组件内部状态（如表单输入值）
使用原则：
- 使用唯一且稳定的值作为key
- 不要使用索引作为key（当列表顺序变化时会有问题）
- 理想情况下，key应该对应数据的唯一标识符（如id）