以下是一份Vue.js的实操教程，包含基础语法和核心功能演示，适合快速上手和实践：
Vue.js 实操教程
一、环境搭建
方式1：CDN引入（快速开始）
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<!-- 开发环境版本（包含控制台警告） -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script src="app.js"></script>
</body>
</html>
方式2：Vue CLI（推荐正式项目）
npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve
二、基础语法实操
1. 创建Vue实例
// app.js
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
2. 数据绑定与指令
<div id="app">
<p v-bind:title="hoverText">{{ message }}</p>
<p v-html="rawHtml"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
hoverText: '页面加载于' + new Date().toLocaleString(),
rawHtml: '<span style="color: red">红色文字</span>'
}
})
</script>
3. 事件处理
<div id="app">
<button v-on:click="counter += 1">点击+1</button>
<p>已点击 {{ counter }} 次</p>
<button @click="reverseMessage">反转消息</button>
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0,
message: 'Hello Vue!'
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
三、核心功能演示
1. 条件与循环
<div id="app">
<div v-if="showContent">可见内容</div>
<div v-else>替代内容</div>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index + 1 }}. {{ item.text }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
showContent: true,
items: [
{ text: '学习JavaScript' },
{ text: '学习Vue' },
{ text: '整个项目' }
]
}
})
</script>
2. 表单绑定
<div id="app">
<input v-model="inputText" placeholder="输入内容">
<p>输入内容：{{ inputText }}</p>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选择的值：{{ selected }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
inputText: '',
selected: ''
}
})
</script>
四、组件开发
1. 全局组件
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
new Vue({
el: '#app',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '其他食品' }
]
}
})
<div id="app">
<ol>
<todo-item
v-for="item in groceryList"
:todo="item"
:key="item.id"
></todo-item>
</ol>
</div>
2. 单文件组件（.vue文件）
<template>
<div class="example">
{{ msg }}
<button @click="count++">点击 {{ count }} 次</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello Vue!',
count: 0
}
}
}
</script>
<style>
.example {
color: #42b983;
}
</style>
五、综合案例：TodoList
<div id="app">
<input v-model="newTodo" @keyup.enter="addTodo">
<ul>
<li v-for="(todo, index) in todos" :key="index">
<input type="checkbox" v-model="todo.completed">
<span :class="{ completed: todo.completed }">{{ todo.text }}</span>
<button @click="removeTodo(index)">×</button>
</li>
</ul>
<p>剩余：{{ remaining }} / {{ todos.length }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: '学习Vue', completed: true },
{ text: '练习项目', completed: false }
]
},
computed: {
remaining() {
return this.todos.filter(todo => !todo.completed).length
}
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({
text: this.newTodo,
completed: false
})
this.newTodo = ''
}
},
removeTodo(index) {
this.todos.splice(index, 1)
}
}
})
</script>
<style>
.completed {
text-decoration: line-through;
color: #999;
}
</style>
六、生命周期示例
new Vue({
el: '#app',
data: {
message: '生命周期演示'
},
beforeCreate() {
console.log('实例初始化前')
},
created() {
console.log('实例创建完成，可访问data')
},
mounted() {
console.log('DOM挂载完成')
// 此处可进行DOM操作或API请求
},
updated() {
console.log('数据更新导致DOM重新渲染')
}
})
通过以上示例可以练习以下核心概念：
- 声明式渲染（数据绑定）
- 指令系统（v-if/v-for/v-model等）
- 事件处理（@click）
- 计算属性（computed）
- 组件化开发
- 生命周期钩子
建议按以下步骤实践：
- 从CDN版本开始体验基础功能
- 使用Vue CLI创建正式项目
- 尝试组合各种功能完成复杂组件
- 结合Vue Router和Vuex进行完整项目开发
后续可扩展学习：
- Vue Router实现页面路由
- Vuex进行状态管理
- Vue Devtools调试工具
- 组合式API（Vue3特性）
- 服务端渲染（Nuxt.js）
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。