在这个系列中，我们将从Vue的基础开始，逐步介绍如何使用Vue进行项目开发。这将是一个全面的指南，涵盖Vue的核心概念，包括响应式系统、组件、指令、过滤器和过渡效果等。
第一部分：Vue基础
- 安装Vue
npm install vue
- 创建一个简单的Vue实例
// main.js
import Vue from 'vue'
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
- 在HTML中显示数据
<!-- index.html -->
<div id="app">
{{ message }}
</div>
- 响应式数据和方法
// main.js
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
})
- 显示列表和使用
v-for
<!-- index.html -->
<div id="app">
<ul>
<li v-for="item in items">{{ item.text }}</li>
</ul>
</div>
// main.js
new Vue({
el: '#app',
data: {
items: [
{ text: 'Item 1' },
{ text: 'Item 2' },
{ text: 'Item 3' },
]
}
})
- 事件绑定和
v-on:click
<!-- index.html -->
<div id="app">
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
第二部分：Vue进阶
- 计算属性
// main.js
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('');
}
}
})
- 类绑定和样式绑定
<!-- index.html -->
<div id="app">
<div :class="{ red: isRed }">Text</div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Text</div>
</div>
// main.js
new Vue({
el: '#app',
data: {
isRed: true,
activeColor: 'green',
fontSize: 30
}
})
- 条件渲染和
v-if
<!-- index.html -->
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
// main.js
new Vue({
el: '#app',
data: {
seen: true
}
})
- 列表渲染和
v-for
<!-- index.html -->
<div id="app">
<ul>
<li v-for="(item, index) in items">{{ index }}: {{ item.text }}</li>
</ul>
</div>