Vue.js 简介
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。
什么是 Vue.js
Vue.js 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue 的特点
Vue.js 具有以下特点：响应式数据绑定、组件化开发、虚拟 DOM、单文件组件、路由管理、状态管理等。
Vue 基础
学习 Vue 的基本语法和概念。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
<div id="app">
{{ message }}
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello Vue!"
}
}
})
app.mount("#app")
</script>数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生"响应"，即匹配更新为新的值。
const app = Vue.createApp({
data() {
return {
count: 4
}
}
})
const vm = app.mount("#app")
console.log(vm.$data.count) // => 4
console.log(vm.count) // => 4模板语法
Vue.js 使用基于 HTML 的模板语法。
插值
使用双大括号进行文本插值。
<span>Message: {{ msg }}</span>指令
指令是带有 v- 前缀的特殊 attribute，用于在表达式改变时产生响应式更新。
<p v-if="seen">现在你看到我了</p> <a v-bind:href="url">...</a> <button v-on:click="doSomething">...</button>
计算属性
计算属性是基于它们的响应式依赖进行缓存的。
计算属性用法
计算属性用于处理复杂的数据逻辑，会基于响应式依赖进行缓存。
<div id="app">
<p>原始消息: "{{ message }}"</p>
<p>反转消息: "{{ reversedMessage }}"</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
message: "Hello Vue"
}
},
computed: {
reversedMessage() {
return this.message.split("").reverse().join("")
}
}
})
</script>Class 与 Style 绑定
动态切换元素的 class 和 style。
绑定 Class
使用 v-bind:class 动态绑定 class。
<div :class="{ active: isActive, error: hasError }">
内容
</div>绑定 Style
使用 v-bind:style 动态绑定内联样式。
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
内容
</div>条件渲染
根据条件显示或隐藏元素。
v-if 指令
v-if 指令用于条件性地渲染一块内容。
<h1 v-if="awesome">Vue 很棒！</h1> <h1 v-else>Oh no 😢</h1>
v-show
v-show 用于根据条件展示元素，元素始终会被渲染并保留在 DOM 中。
<h1 v-show="ok">Hello!</h1>
列表渲染
使用 v-for 指令渲染列表。
v-for 遍历数组
使用 v-for 基于一个数组来渲染一个列表。
<ul>
<li v-for="item in items" :key="item.id">
{{ item.message }}
</li>
</ul>v-for 遍历对象
可以使用 v-for 来遍历一个对象的 property。
<ul>
<li v-for="(value, key) in object">
{{ key }}: {{ value }}
</li>
</ul>事件处理
使用 v-on 指令监听 DOM 事件。
监听事件
使用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<button v-on:click="counter += 1">加 1</button> <button @click="greet">打招呼</button>
表单输入绑定
使用 v-model 指令创建双向数据绑定。
基础用法
v-model 指令可以在表单 input、textarea 及 select 元素上创建双向数据绑定。
<input v-model="message" placeholder="编辑我">
<p>消息是: {{ message }}</p>组件基础
组件是 Vue 最强大的功能之一。
组件注册
组件是可复用的 Vue 实例。
const app = Vue.createApp({})
app.component("my-component", {
template: "<div>这是一个组件</div>"
})使用组件
在模板中使用组件。
<div id="app"> <my-component></my-component> </div>