整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
言
Hi，大家好，我是希留。
上篇文章帶大家認(rèn)識(shí)了Vue，以及初始化了一個(gè)Vue工程的項(xiàng)目。今天繼續(xù)介紹一下Vue的一些基礎(chǔ)用法。
目錄
使用開發(fā)工具（idea、webstorm、vscode…）打開Vue項(xiàng)目。由于后端用idea的比較多，這里以idea為例（需要安裝Vue.js插件）,打開后目錄結(jié)構(gòu)如下：
如上圖所示，Vue的目錄結(jié)構(gòu)主要由以下部分組成：
my-vue-project
├--- build
├--- config
├--- node_modules
└--- src
├--- assets
└--- components
├--- router
└--- App.vue
├--- main.js
├--- static
└--- package.json
build ：構(gòu)建相關(guān)，用來存放項(xiàng)目構(gòu)建腳本，對(duì)項(xiàng)目進(jìn)行編譯打包
config ：配置相關(guān)，用來存放基本的配置文件
node_modules ：用來存放的是項(xiàng)目的所有依賴
src ：存放項(xiàng)目的源碼
assets ：主題 字體等靜態(tài)資源
components ：全局公用組件
router ：路由
App.vue ：入口頁面
main.js ：入口 加載組件 初始化等
static ：第三方不打包資源
package.json ：定義了項(xiàng)目的所有依賴，包括開發(fā)時(shí)依賴和發(fā)布時(shí)依賴
你看到的 v-bind 特性被稱為指令。指令帶有前綴 v-
除了使用插值表達(dá)式{{}}進(jìn)行數(shù)據(jù)渲染，也可以使用 v-bind指令，它的簡(jiǎn)寫的形式就是一個(gè)冒號(hào)（:）
代碼如下：
<template>
<div class="hello">
<!-- 如果要將模型數(shù)據(jù)綁定在html屬性中，則使用 v-bind 指令
此時(shí)title中顯示的是模型數(shù)據(jù)-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- v-bind 指令的簡(jiǎn)寫形式：冒號(hào)（:） -->
<h1 :title="message">
{{content}}
</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
content: '我是標(biāo)題',
message: '頁面加載于 ' + new Date().toLocaleString()
}
}
}
</script>
運(yùn)行項(xiàng)目，瀏覽器打開地址，可看到頁面正常渲染出來數(shù)據(jù)。
雙向數(shù)據(jù)綁定和單向數(shù)據(jù)綁定；
使用 v-model 進(jìn)行雙向數(shù)據(jù)綁定：
<template>
<div class="hello">
...
!-- v-bind:value只能進(jìn)行單向的數(shù)據(jù)渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以進(jìn)行雙向的數(shù)據(jù)綁定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查詢的是：{{searchMap.keyWord}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
...
searchMap: {
keyWord: '希留'
}
}
}
}
</script>
使用v-bind綁定的數(shù)據(jù)是單向的，并不會(huì)隨著輸入值的改變而改變
使用 v-model 指令 才能把數(shù)據(jù)雙向綁定
修飾符 (Modifiers) 是以半角句號(hào)（.）指明的特殊后綴，用于指出一個(gè)指令應(yīng)該以特殊方式綁定。
例如，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()方法
(即阻止事件原本的默認(rèn)行為)
示例代碼如下：
<template>
<div class="hello">
...
<!-- 修飾符用于指出一個(gè)指令應(yīng)該以特殊方式綁定。
這里的 .prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用js的 event.preventDefault()方法
（該方法表示阻止表單提交的默認(rèn)行為） -->
<form action="save" v-on:submit.prevent="onSubmit">
<label for="username">
<input type="text" id="username" v-model="user.username">
<button type="submit">保存</button>
</label>
</form>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
...
user: {}
}
},
methods: {
onSubmit() {
if (this.user.username) {
console.log('提交表單')
} else {
alert('請(qǐng)輸入用戶名')
}
}
}
}
</script>
當(dāng)在方法上加了.preven修飾符后，點(diǎn)擊保存只會(huì)執(zhí)行onSubmit方法。若沒加，則會(huì)先執(zhí)行onSubmit方法在執(zhí)行action里的方法。
v- 前綴作為一種視覺提示，用來識(shí)別模板中 Vue 特定的 attribute。Vue 為 v-bind 和 v-on 這兩個(gè)最常用的指令，提供了特定簡(jiǎn)寫，它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對(duì)于 attribute 名來說都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會(huì)出現(xiàn)在最終渲染的標(biāo)記中。
v-bind 縮寫
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
<!-- 動(dòng)態(tài)參數(shù)的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>
<!-- 縮寫 -->
<a @click="doSomething">...</a>
<!-- 動(dòng)態(tài)參數(shù)的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)。
所以Vue提供了計(jì)算屬性。對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性。且計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值。
示例代碼如下：
<template>
<div class="hello">
...
<p>原始值: "{{ message }}"</p>
<!-- 1、插值數(shù)據(jù)綁定中使用表達(dá)式 -->
<p>反轉(zhuǎn)消息: {{ message.split('').reverse().join('') }}</p>
<!-- 2、使用計(jì)算屬性 -->
<p>反轉(zhuǎn)消息: "{{ reversedMessage }}"</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
...
message: '上海自來水來自海上 haha'
}
},
computed: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
}
}
</script>
雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器。這就是為什么 Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的。
示例代碼如下：
<template>
<div class="hello">
...
<p>
Ask a yes/no question:
<input v-model="question">
<button @click="getAnswer()">提問</button>
</p>
<p>{{ answer }}</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HelloWorld',
data () {
return {
...
message: '上海自來水來自海上 haha'
}
},
methods: {
getAnswer() {
var vm=this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer=_.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer='網(wǎng)找不到API接口. ' + error
})
}
},
watch: {
// 如果 `question` 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行
question: function (newQuestion, oldQuestion) {
this.answer='等待您停止輸入...'
this.getAnswer()
}
}
}
</script>
在這個(gè)示例中，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 (訪問一個(gè) API)，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無法做到的。
v-if 指令用于條件性地渲染一塊內(nèi)容。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染。
v-if 是一個(gè)指令，所以必須將它添加到一個(gè)元素上。v-else-if，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用；
v-else 指令來表示 v-if 的“else 塊”，必須緊跟在帶 v-if 或者 v-else-if 的元素的后面，否則它將不會(huì)被識(shí)別。
另一個(gè)用于根據(jù)條件展示元素的選項(xiàng)是 v-show 指令。用法大致一樣，不同的是帶有 v-show 的元素始終會(huì)被渲染并保留在 DOM 中。v-show 只是簡(jiǎn)單地切換元素的 CSS property display。v-show 不支持 元素，也不支持 v-else。
兩者對(duì)比：
我們可以用 v-for 指令基于一個(gè)數(shù)組來渲染一個(gè)列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。
為了給 Vue 一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一 key attribute，建議盡可能在使用 v-for 時(shí)提供 key attribute，因?yàn)樗?Vue 識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制，key 并不僅與 v-for 特別關(guān)聯(lián)。
示例代碼如下：
<!-- 1、遍歷數(shù)據(jù)列表 -->
<table border="1">
<tr v-for="(item, index) in userList" :key="item.id">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<script>
export default {
name: 'HelloWorld',
data () {
return {
...
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}
},
}
</script>
過濾器常用來處理文本格式化的操作。過濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式
過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示
```javascript
<!-- 1、遍歷數(shù)據(jù)列表 -->
<table border="1">
<tr v-for="(item, index) in userList" :key="item.id">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
<!-- | 管道符號(hào)：表示使用后面的過濾器處理前面的數(shù)據(jù) -->
<td>{{item.gender | genderFilter}}</td>
</tr>
</table>
<script>
export default {
name: 'HelloWorld',
data () {
return {
...
userList: [
{ id: 1, username: 'helen', age: 18 ,gender: 1},
{ id: 2, username: 'peter', age: 28 ,gender: 1},
{ id: 3, username: 'andy', age: 38 ,gender: 0}
]
}
},
// filters 定義局部過濾器，只可以在當(dāng)前vue實(shí)例中使用
filters: {
genderFilter(gender) {
return gender===1 ? '男' : '女'
}
}
}
</script>
結(jié)語
好了，以上就是今天要講的內(nèi)容，本文簡(jiǎn)單介紹了Vue的基礎(chǔ)使用，相信大家對(duì)Vue有了進(jìn)一步的認(rèn)識(shí)了，趕快動(dòng)手操作起來吧，gogogo。
然 vue-router 4 大多數(shù) API 保持不變，但是在 vue3 中以插件形式存在，所以在使用時(shí)有一定的變化。接下來就學(xué)習(xí)學(xué)習(xí)它是如何使用的。
安裝最新版本的 vue-router
npm install vue-router@4
或
yarn add vue-router@4安裝完成之后，可以在 package.json 文件查看vue-router的版本
"dependencies": {
"vue": "^3.2.16",
"vue-router": "4"
},新建 router 文件夾，新建 index.js文件：
import { createRouter,createWebHashHistory } from "vue-router";
const routes=[
{
path:'',
component:()=>import("../views/login/index.vue")
},
{
path:'/home',
component:()=>import("../views/home/index.vue")
}
]
const router=createRouter({
history:createWebHashHistory('/'),
routes
})
export default router然后在main.js 中引入 router 。
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index"
const app=createApp(App)
app.use(router)
app.mount('#app')注意：之前 component 引入組件的時(shí)候，后邊可以省略 .vue 后綴，但在 vue-router 4這不能省略后綴，否則就報(bào)錯(cuò)了。
2.1、動(dòng)態(tài)路由
addRoute 動(dòng)態(tài)添加路由時(shí)，有兩種情況，分別為：
//動(dòng)態(tài)添加路由--默認(rèn)添加到根
router.addRoute({
path:'/my',
name:'my',
component:()=>import("../views/my/index.vue")
})
//動(dòng)態(tài)添加子路由
router.addRoute('my',{
path:'/info',
component:()=>import("../views/my/info.vue")
})添加子路由時(shí)，第一個(gè)屬性值是父級(jí)路由的 name 屬性值。
2.2、與 composition 組合
在 事件中獲取 router ，進(jìn)行路由跳轉(zhuǎn)等操作。
<template>
<button @click="backToHome">跳轉(zhuǎn)到首頁</button>
</template>
<script>
import { useRouter } from "vue-router"
export default {
setup(){
const router=useRouter()
return{
backToHome(){
router.push("/")
},
}
}
}
</script>通過 useRouter 獲取到路由之后再進(jìn)行操作。也可以對(duì)當(dāng)前路由route進(jìn)行操作。以下是監(jiān)聽route.query的案例：
<template>
<div>監(jiān)聽路由變化</div>
</template>
<script>
import { useRouter,useRoute } from "vue-router"
import { watch } from "@vue/runtime-core"
export default {
setup(){
const route=useRoute()
//route時(shí)響應(yīng)式對(duì)象，可監(jiān)控變化
watch(()=>route.query,query=>{
console.log('最新的',query)
})
}
}
</script>導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航，有很多種方式植入路由導(dǎo)航中：全局的、單個(gè)路由獨(dú)享的或者組件級(jí)的。
3.1、全局守衛(wèi)
router.beforeEach((to,from,next)=>{
console.log('全局前置守衛(wèi)');
})
router.afterEach((to,from)=>{
console.log('全局后置鉤子');
})與之前的使用都一樣，沒有任何變化。
3.2、路由獨(dú)享守衛(wèi)
router.addRoute({
path:'/my',
name:'my',
component:()=>import("../views/my/index.vue"),
beforeEnter:(to,from)=>{
console.log('路由獨(dú)享守衛(wèi)');
}
})3.3、組件內(nèi)的守衛(wèi)
組件內(nèi)的守衛(wèi)與之前使用不同，vue-router4中，需要從vue-router內(nèi)引入需要的插件。
<script>
import { onBeforeRouteLeave } from "vue-router"
export default {
setup(){
onnBeforeRouteLeave((to,from)=>{
const answer=window.confirm('是否確認(rèn)離開')
if(answer){
console.log('不離開');
return false
}
})
}
}
</script>4.1、實(shí)例創(chuàng)建方式
//以前創(chuàng)建方式
const router=new VueRouter({
})
new Vue({
router,
render:h=>h(App)
}).$mount("#app")
//vue-router4創(chuàng)建方式
import { createRouter } from "vue-router"
const router=createRouter({
})
createApp(App).use(router).mount("#app")4.2、模式聲明方式改變
//之前
const router=new VueRouter({
mode:"hash"
})
//新的
import { createRouter, createWebHashHistory } from "vue-router"
const router=createRouter({
history:createWebHashHistory()
})之前的mode替換成了 history ，它的選項(xiàng)變化分別為：
4.3、base屬性被合并
base 選項(xiàng)被移至 createWebHistory 中。
//之前
const router=new VueRouter({
base:"/"
})
//新的
import { createRouter, createWebHashHistory } from "vue-router"
const router=createRouter({
history:createWebHashHistory('/')
})4.4、通配符 * 被取消
//之前
{
path:'*',
component:()=>import("../components/NotFound.vue")
}
//vue-router 4
{
path:'/:pathMatch(.*)*',
component:()=>import("../components/NotFound.vue")
}
//是一個(gè)正則表達(dá)式4.5、isReady() 替代 onReady
//之前
router.onReady(onSuccess,onError)//成功和失敗回調(diào)
//vue-router 4
router.isReady().then(()=>{
//成功
}).catch(err=>{
//失敗
})4.6、scrollBehavior 變化
const router=createRouter({
scrollBehavior(to, from, savedPosition) {
// 始終滾動(dòng)到頂部
return { top: 0, left:0 }
},
})
//之前使用的{ x:0, y:0 } 替換成了 { top: 0, left:0 }4.7、keep-alive 和 transition 必須用在 router-view 內(nèi)部
//之前
<keep-alive>
<router-view />
</keep-alive>
//vue-router 4
<router-view v-slot="{component}">
<keep-alive>
<component :is="component" />
</keep-alive>
</router-view>4.8、router-link 移除了一部分屬性
//之前
<router-link to="child" append >跳轉(zhuǎn)<router-link>
//vue-router 4
<router-link :to="append( $route.path , 'child' )" append >跳轉(zhuǎn)<router-link>//之前
<router-link to="/" tag="span">跳轉(zhuǎn)</router-link>
//vue-router 4
<router-link to="/" custom>
<span>跳轉(zhuǎn)</span>
</router-link>4.9、route 的 parent 屬性被移除
4.10、pathToRegexpOptions選項(xiàng)被移除，其他內(nèi)容替換
4.11、routes選項(xiàng)是必填項(xiàng)
4.12、跳轉(zhuǎn)不存在的命名路由報(bào)錯(cuò)
之前跳轉(zhuǎn)到不存在的路由，頁面是空的，會(huì)重定向根路徑，這是不合理的，所以vue3報(bào)錯(cuò)了。
4.13、缺少必填參數(shù)會(huì)拋出異常
4.14、命名子路由如果 path 為空的時(shí)候，不再追加 /
之前生成的 url 會(huì)自動(dòng)追加一個(gè) / ，如："/dash/"。副作用：給設(shè)置了 redirect 選項(xiàng)的子路由帶來副作用。
識(shí)星球：寫代碼那些事
----
如果你有收獲｜歡迎｜點(diǎn)贊｜關(guān)注｜轉(zhuǎn)發(fā)
----
這里會(huì)定期更新｜大廠的開發(fā)｜架構(gòu)｜方案設(shè)計(jì)
這里也會(huì)更新｜如何摸魚｜抓蝦
歡迎來到寫代碼那些事 ！在現(xiàn)代Web開發(fā)領(lǐng)域，Vue.js已經(jīng)成為最受歡迎的JavaScript框架之一。Vue3作為Vue.js的最新版本，引入了許多強(qiáng)大的特性和改進(jìn)，使得構(gòu)建現(xiàn)代化的Web應(yīng)用更加簡(jiǎn)單、高效。本教程將帶您深入了解Vue3的核心概念、特性和最佳實(shí)踐，幫助您快速上手并構(gòu)建出色的Web應(yīng)用。
目錄：
Vue3作為Vue.js的最新版本，不僅保留了Vue.js的優(yōu)點(diǎn)，還引入了許多性能優(yōu)化和新特性，如編譯優(yōu)化、Composition API等。這些改進(jìn)使得Vue3在開發(fā)大型Web應(yīng)用時(shí)更具競(jìng)爭(zhēng)力。
1. 編譯優(yōu)化： Vue3引入了一種新的編譯器，稱為“基于Proxy的編譯器”，它能夠生成更高效、更精簡(jiǎn)的渲染函數(shù)代碼。這意味著在運(yùn)行時(shí)，Vue3可以更快地解析和渲染模板，從而提升應(yīng)用的性能。
2. Composition API： Vue3引入了Composition API，這是一種全新的API風(fēng)格，使得組件邏輯更加清晰、可復(fù)用。相比于Vue2的Options API，Composition API允許開發(fā)者更自由地組織組件代碼，將相關(guān)邏輯聚集在一起，提高了代碼的可維護(hù)性和可測(cè)試性。
3. 更好的TypeScript支持： Vue3對(duì)TypeScript的支持更加友好。通過Composition API和TypeScript結(jié)合使用，開發(fā)者可以在編碼過程中獲得更好的類型提示和錯(cuò)誤檢查，減少潛在的bug。
4. 更小的包體積： Vue3優(yōu)化了包的體積，使得下載和加載速度更快。這對(duì)于提升用戶體驗(yàn)和移動(dòng)端應(yīng)用尤為重要。
5. 更快的渲染性能： Vue3在渲染性能方面進(jìn)行了優(yōu)化，比Vue2更快地更新視圖，從而提升了應(yīng)用的響應(yīng)速度。
6. 改進(jìn)的響應(yīng)式系統(tǒng)： Vue3的響應(yīng)式系統(tǒng)使用了Proxy代理對(duì)象，使得數(shù)據(jù)的響應(yīng)式追蹤更精確，減少了不必要的渲染。
7. Teleport組件： Vue3引入了Teleport組件，可以輕松實(shí)現(xiàn)Portal功能，將組件的內(nèi)容渲染到DOM的不同位置，方便處理彈出層等場(chǎng)景。
8. 兼容Vue2： Vue3在設(shè)計(jì)時(shí)考慮到了與Vue2的兼容性，因此可以逐步升級(jí)現(xiàn)有的Vue2項(xiàng)目到Vue3，而不需要全部重寫代碼。
學(xué)習(xí)Vue3的核心概念，包括Vue實(shí)例、模板語法、指令等。通過示例代碼，演示如何創(chuàng)建一個(gè)簡(jiǎn)單的Vue3應(yīng)用。
步驟 1：引入Vue3
首先，你需要在項(xiàng)目中引入Vue3。你可以通過以下方式獲取Vue3的CDN鏈接：
<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.min.js"></script>
步驟 2：創(chuàng)建Vue實(shí)例
在HTML文件中，我們創(chuàng)建一個(gè)容器元素，用于渲染Vue應(yīng)用。然后，你可以在JavaScript文件中創(chuàng)建Vue實(shí)例，并將其與容器元素關(guān)聯(lián)起來。
<!DOCTYPE html>
<html>
<head>
<title>Vue3 Demo</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.min.js"></script>
<script src="app.js"></script>
</body>
</html>
// app.js
const app=Vue.createApp({
data() {
return {
message: 'Hello, Vue3!'
};
}
});
app.mount('#app');
在這個(gè)示例中，我們使用Vue.createApp創(chuàng)建了一個(gè)Vue應(yīng)用實(shí)例，并將其關(guān)聯(lián)到id為app的HTML元素上。data選項(xiàng)定義了我們需要在應(yīng)用中使用的數(shù)據(jù)，這里是一個(gè)簡(jiǎn)單的message。
Vue的模板語法允許我們將數(shù)據(jù)綁定到DOM元素上，實(shí)現(xiàn)動(dòng)態(tài)更新。
在上面的示例中，我們?cè)?lt;div id="app">內(nèi)部使用了雙大括號(hào){{ }}來綁定數(shù)據(jù)。這樣，當(dāng)message數(shù)據(jù)發(fā)生變化時(shí)，頁面上的文本也會(huì)隨之更新。
<div id="app">
{{ message }}
</div>將上述HTML和JavaScript代碼保存為相應(yīng)的文件，然后在瀏覽器中打開HTML文件。你將看到頁面上顯示著"Hello, Vue3!"，這是由Vue實(shí)例中的message數(shù)據(jù)驅(qū)動(dòng)的。
這只是一個(gè)簡(jiǎn)單的Vue3應(yīng)用示例，但它涵蓋了Vue的核心概念：創(chuàng)建Vue實(shí)例、使用模板語法綁定數(shù)據(jù)。通過這個(gè)基礎(chǔ)示例，你已經(jīng)邁出了學(xué)習(xí)Vue3的第一步。隨著深入學(xué)習(xí)，你將學(xué)會(huì)更多關(guān)于指令、組件、狀態(tài)管理等方面的知識(shí)，從而能夠構(gòu)建更復(fù)雜、更強(qiáng)大的Vue應(yīng)用。
了解Vue3中組件化開發(fā)的重要性，學(xué)習(xí)如何創(chuàng)建可復(fù)用的組件。介紹單文件組件的概念，以及如何使用Vue CLI來構(gòu)建項(xiàng)目。
組件化開發(fā)有許多優(yōu)勢(shì)：
在Vue3中，組件可以通過單文件組件的方式創(chuàng)建，這是一種將模板、腳本和樣式封裝在一個(gè)文件中的方式。單文件組件的后綴通常是.vue，它包括三個(gè)部分：
Vue CLI是一個(gè)用于快速構(gòu)建Vue項(xiàng)目的腳手架工具。它提供了項(xiàng)目初始化、開發(fā)服務(wù)器、打包等一系列功能，讓你能夠?qū)Ｗ⒂陂_發(fā)而不用搭建開發(fā)環(huán)境。
以下是使用Vue CLI構(gòu)建項(xiàng)目的簡(jiǎn)要步驟：
npm install -g @vue/clivue create my-projectcd my-project npm run serve<template>
<div>
<!-- 模板內(nèi)容 -->
</div>
</template>
<script>
export default {
// 腳本內(nèi)容
}
</script>
<style>
/* 樣式內(nèi)容 */
</style>
使用Vue CLI構(gòu)建項(xiàng)目，配合單文件組件的方式，可以讓你更加高效地開發(fā)Vue應(yīng)用。同時(shí)，這也符合現(xiàn)代前端開發(fā)中組件化的趨勢(shì)，讓你的代碼更具可維護(hù)性和擴(kuò)展性。
深入探討Vue3的響應(yīng)式數(shù)據(jù)原理，以及如何使用Vuex進(jìn)行全局狀態(tài)管理。示例代碼將帶您一步步構(gòu)建一個(gè)簡(jiǎn)單的任務(wù)管理應(yīng)用。
Vue3的響應(yīng)式數(shù)據(jù)原理
Vue3采用了Proxy代理對(duì)象來實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)。當(dāng)你訪問代理對(duì)象的屬性時(shí)，會(huì)自動(dòng)進(jìn)行依賴收集，當(dāng)屬性被修改時(shí)，會(huì)自動(dòng)觸發(fā)依賴更新。
下面是一個(gè)簡(jiǎn)單的示例，演示了如何在Vue3中創(chuàng)建響應(yīng)式數(shù)據(jù)：
import { reactive, readonly } from 'vue';
const state=reactive({
count: 0,
});
// 訪問屬性，觸發(fā)依賴收集
console.log(state.count);
// 修改屬性，觸發(fā)依賴更新
state.count++;
// 使用readonly創(chuàng)建只讀的響應(yīng)式數(shù)據(jù)
const readOnlyState=readonly(state);
Vuex是Vue官方提供的狀態(tài)管理庫，用于管理全局的狀態(tài)。它可以幫助你在應(yīng)用中集中管理和共享狀態(tài)，使得狀態(tài)變化更可預(yù)測(cè)、可追蹤。
以下是一個(gè)簡(jiǎn)單的步驟，演示如何使用Vuex構(gòu)建一個(gè)簡(jiǎn)單的任務(wù)管理應(yīng)用：
npm install vuex創(chuàng)建Vuex Store： 在項(xiàng)目中創(chuàng)建一個(gè)Vuex store，定義應(yīng)用的狀態(tài)和相關(guān)操作。
// store.js
import { createStore } from 'vuex';
export default createStore({
state() {
return {
tasks: [],
};
},
mutations: {
addTask(state, task) {
state.tasks.push(task);
},
},
actions: {
addTask({ commit }, task) {
commit('addTask', task);
},
},
});
在應(yīng)用中使用Vuex： 在應(yīng)用的入口文件中引入Vuex store，然后將它注冊(cè)到Vue實(shí)例中。
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
const app=createApp(App);
app.use(store);
app.mount('#app');
在組件中使用Vuex： 在組件中使用mapState、mapMutations等輔助函數(shù)來訪問和修改Vuex中的狀態(tài)。
<template>
<div>
<ul>
<li v-for="task in tasks" :key="task.id">{{ task.text }}</li>
</ul>
<input v-model="newTask" @keyup.enter="addNewTask" />
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['tasks']),
},
data() {
return {
newTask: '',
};
},
methods: {
...mapMutations(['addTask']),
addNewTask() {
this.addTask({ id: Date.now(), text: this.newTask });
this.newTask='';
},
},
};
</script>
通過上述步驟，你可以構(gòu)建一個(gè)簡(jiǎn)單的任務(wù)管理應(yīng)用，使用Vuex來管理全局狀態(tài)。Vuex的核心概念包括state、mutations、actions等，它們協(xié)同工作，使得狀態(tài)管理更加結(jié)構(gòu)化和可維護(hù)。
總結(jié)起來，Vue3的響應(yīng)式數(shù)據(jù)原理基于Proxy代理，可以輕松地創(chuàng)建響應(yīng)式數(shù)據(jù)。而使用Vuex進(jìn)行全局狀態(tài)管理可以幫助你更好地管理應(yīng)用的狀態(tài)，讓代碼更加可預(yù)測(cè)和可追蹤。
介紹Vue Router的使用，展示如何在Vue3中實(shí)現(xiàn)頁面路由和導(dǎo)航。通過示例代碼，創(chuàng)建一個(gè)多頁面的應(yīng)用。
Vue Router是Vue官方提供的路由管理器，用于在單頁面應(yīng)用中實(shí)現(xiàn)頁面路由和導(dǎo)航。它允許你根據(jù)不同的URL路徑加載不同的組件，實(shí)現(xiàn)多頁面的效果。
以下是一個(gè)簡(jiǎn)單的步驟，演示如何在Vue3中使用Vue Router創(chuàng)建一個(gè)多頁面的應(yīng)用：
安裝Vue Router： 在命令行中運(yùn)行以下命令來安裝Vue Router。
npm install vue-router創(chuàng)建路由配置： 在項(xiàng)目中創(chuàng)建一個(gè)路由配置文件，定義不同URL路徑和對(duì)應(yīng)的組件。
// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';
const routes=[
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/contact', component: Contact },
];
const router=createRouter({
history: createWebHistory(),
routes,
});
export default router;
在應(yīng)用中使用Vue Router： 在應(yīng)用的入口文件中引入Vue Router配置，并將其注冊(cè)到Vue實(shí)例中。
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app=createApp(App);
app.use(router);
app.mount('#app');
在組件中實(shí)現(xiàn)導(dǎo)航： 在組件中使用<router-link>組件來實(shí)現(xiàn)導(dǎo)航鏈接，使用<router-view>組件來渲染路由對(duì)應(yīng)的組件。
<template>
<div>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
</nav>
<router-view></router-view>
</div>
</template>
通過上述步驟，你可以在Vue3中使用Vue Router創(chuàng)建一個(gè)多頁面的應(yīng)用。Vue Router的核心概念包括<router-link>用于導(dǎo)航鏈接，<router-view>用于渲染路由組件，以及路由配置等。
在這個(gè)多頁面應(yīng)用中，不同的URL路徑會(huì)對(duì)應(yīng)不同的組件，用戶可以通過導(dǎo)航鏈接在不同的頁面之間進(jìn)行切換。
了解Vue3中的生命周期和Hooks函數(shù)，掌握如何在不同階段執(zhí)行自定義操作。比較Vue2的Options API與Vue3的Composition API。
在Vue3中，生命周期鉤子函數(shù)的命名和觸發(fā)時(shí)機(jī)與Vue2相比有所改變。同時(shí)，Vue3引入了Composition API，這是一種新的組合式API，與Vue2中的Options API有所不同。
Vue3中的生命周期鉤子函數(shù)名稱和觸發(fā)時(shí)機(jī)有所調(diào)整，主要有以下幾點(diǎn)變化：
在Vue3中，新增了一些更細(xì)粒度的生命周期鉤子函數(shù)：
Composition API是Vue3中引入的一種全新的API風(fēng)格，旨在提供更靈活、可組合的代碼復(fù)用方式。相對(duì)于Vue2的Options API，Composition API更加強(qiáng)調(diào)邏輯的組合和復(fù)用，使得代碼更易維護(hù)和擴(kuò)展。
Composition API的特點(diǎn)：
下面是一個(gè)簡(jiǎn)單的對(duì)比示例，展示Vue2的Options API和Vue3的Composition API的差異：
Vue2中使用Options API：
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
mounted() {
this.count++;
},
};
</script>
Vue3中使用Composition API：
<template>
<div>{{ count }}</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const count=ref(0);
onMounted(()=> {
count.value++;
});
return { count };
},
};
</script>
總結(jié)而言，Vue3中的生命周期鉤子函數(shù)名稱和Composition API帶來了一些變化，讓開發(fā)者能夠更加靈活地組織和復(fù)用代碼邏輯。Composition API可以使代碼更加模塊化，方便維護(hù)和拓展。
總結(jié)：
Vue3作為最新的Vue.js版本，帶來了眾多的改進(jìn)和新特性，使得開發(fā)現(xiàn)代化的Web應(yīng)用更加高效和便捷。通過本教程，您將深入學(xué)習(xí)Vue3的核心概念、語法和最佳實(shí)踐，掌握構(gòu)建出色Web應(yīng)用的技能。無論您是初學(xué)者還是有經(jīng)驗(yàn)的開發(fā)者，都能在這里找到有價(jià)值的內(nèi)容，開啟現(xiàn)代Web開發(fā)之旅。
#vue#?
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
