Vue.js第一个应用
Vue.js第一个应用[编辑 | 编辑源代码]
介绍[编辑 | 编辑源代码]
Vue.js是一个渐进式JavaScript框架，用于构建用户界面。本章将引导初学者创建第一个Vue.js应用，展示其核心概念和工作原理。Vue.js通过数据绑定和组件化系统，使开发者能够轻松构建交互式Web应用。
环境准备[编辑 | 编辑源代码]
在开始前，请确保：
- 已安装现代浏览器（如Chrome、Firefox）
- 具备基础HTML、CSS和JavaScript知识
- 可选择以下任一方式引入Vue.js：
- CDN引入（适合快速开始）
- npm安装（适合正式项目）
最简单的Vue应用[编辑 | 编辑源代码]
以下是一个最基本的Vue应用示例：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个Vue应用</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: '你好，Vue.js!'
}
}
}).mount('#app')
</script>
</body>
</html>
代码解析[编辑 | 编辑源代码]
1. CDN引入：通过<script>标签加载Vue.js库
2. 挂载点：
是Vue应用的挂载点
3. 插值表达式：模板:Message显示data中的message属性 4. Vue实例：通过createApp创建Vue应用实例 5. data选项：返回包含响应式数据的对象 6. mount方法：将Vue实例挂载到DOM元素上
响应式数据[编辑 | 编辑源代码]
Vue的核心特性是响应式数据绑定。当数据变化时，视图自动更新：
createApp({
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}).mount('#app')
对应的HTML：
<div id="app">
计数器: {{ counter }}
</div>
输出效果：页面上的数字每秒自动增加1，无需手动操作DOM。
指令系统[编辑 | 编辑源代码]
Vue提供了一系列指令（Directives）来增强HTML功能：
v-bind[编辑 | 编辑源代码]
动态绑定HTML属性：
<div id="app">
<span v-bind:title="message">
鼠标悬停查看动态提示
</span>
</div>
v-if[编辑 | 编辑源代码]
条件渲染：
<p v-if="seen">现在你看到我了</p>
v-for[编辑 | 编辑源代码]
列表渲染：
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
事件处理[编辑 | 编辑源代码]
使用v-on指令监听DOM事件：
<div id="app">
<button v-on:click="reverseMessage">反转消息</button>
<p>{{ message }}</p>
</div>
<script>
createApp({
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
}).mount('#app')
</script>
双向数据绑定[编辑 | 编辑源代码]
v-model指令实现表单输入和应用状态的双向绑定：
<div id="app">
<input v-model="message">
<p>输入的内容是: {{ message }}</p>
</div>
组件化开发[编辑 | 编辑源代码]
Vue应用通常由嵌套组件构成。定义一个简单组件：
const { createApp } = Vue
const app = createApp({})
// 定义一个名为todo-item的新组件
app.component('todo-item', {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
})
app.mount('#app')
使用组件：
<div id="app">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
</div>
生命周期图示[编辑 | 编辑源代码]
以下是Vue实例的生命周期示意图：
实际应用案例[编辑 | 编辑源代码]
待办事项列表是一个展示Vue核心功能的经典案例：
<div id="todo-app">
<input v-model="newTodo" @keyup.enter="addTodo">
<button @click="addTodo">添加</button>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo.text }}
<button @click="removeTodo(index)">×</button>
</li>
</ul>
<p>剩余任务: {{ remaining }} / {{ todos.length }}</p>
</div>
<script>
createApp({
data() {
return {
newTodo: '',
todos: [
{ text: '学习Vue.js', done: false },
{ text: '完成项目', done: false }
]
}
},
computed: {
remaining() {
return this.todos.filter(todo => !todo.done).length
}
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({
text: this.newTodo,
done: false
})
this.newTodo = ''
}
},
removeTodo(index) {
this.todos.splice(index, 1)
}
}
}).mount('#todo-app')
</script>
数学公式示例[编辑 | 编辑源代码]
Vue的响应式系统可以用以下公式表示：
其中：
- 表示用户界面
- 表示应用状态
- 是Vue的渲染函数
总结[编辑 | 编辑源代码]
本章介绍了：
- 如何创建基本Vue应用
- Vue的核心概念：响应式数据、指令、事件处理
- 组件化开发基础
- Vue实例生命周期
- 实际应用案例
通过这个基础，开发者可以继续探索Vue的更高级特性，如单文件组件、Vue Router和Vuex状态管理。