vue入門學習教程

????????一、介紹

? ? ? ?vue是一款用于構建用戶界面的 JavaScript 框架。基于標準 HTML、CSS 和 JavaScript 構建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發用戶界面。

二、使用和安裝

方法1：在html代碼中直接使用<script>導入，對于初學者可以這樣。

<div id="app">{{ message }}</div><script>const { createApp, ref } = VuecreateApp({setup() {const message = ref('Hello vue!')return {message}}}).mount('#app')
</script>

方法2：使用npm構建vue項目，這種方法要求有es5，typescript基礎。

第一步：安裝nodejs，nodejs自帶nmp工具

nodejs下載地址：Node.js — Download Node.js?

第二步：設置npm代理地址。

npm config set registry https://registry.npmmirror.com

第三步：創建vue應用

npm create vue@latest

第四步：啟動項目，運行以下命令

（1）安裝npm相關工具：npm install

（2）已開發環境運行項目：npm run dev

終端提示如下：

（）（3）打開瀏覽器，輸入http://localhost:5173打開項目。

項目中應用vue框架配置。

三、項目結構（方法2中項目結構）

四、核心知識

Vue3的核?是通過createApp函數創建?個應?實例，在這個實例中構建各種應?。(main.ts中)

每個vue?件就是?個??上的組件，組件可以嵌套使?。vue中的組件分為<template>??模板，<script>腳本和<style>樣式三個部分。Vue2中要求<template>下必

須有?個唯?的根元素，Vue3中則沒有了這個限制。

1.數據雙向綁定（vue3,組合式數據綁定）

雙向綁定是指網頁代碼中的數據與腳本代碼中的數據建立關系，修改一個兩個一起修改而且值是一樣的。例如下圖標記。

實現數據綁定：在HTML中使用v-model指令，腳本代碼中是ref函數傳遞變量值，修改變量值需要使用變量的value屬性，如上圖。

（1）變量綁定使用ref函數，代碼如下：

html:<input v-model="userName" />

腳本：let userName = ref("張勝男");

（2）對象使用reactive函數，代碼如下

html:<input v-model="userInfo.userName" />

腳本：

import {reactive} from "vue"let userInfo=reactive({userName:"小伙子"
})

（3）綁定html dom元素，代碼如下：

html:?

<input ref="elementDom"/>

腳本：

import {ref} from "vue"
let elementDom=ref();
function showDom(){console.log(elementDom)//reflmpl對象console.log(elementDom.value)//input元素console.log(elementDom.value.value)//input的value值
}

dom綁定之后可以對dom元素進行很多操作。?

2.數據傳遞

假設一個項目里面，app.vue為父組件，User.vue為子組件。

（1）子組件傳遞到父組件

User.vue

<template><div>姓名：<input type="text" v-model="userName"></div><div>年齡: <input type="number" v-model="age"></div>
</template><script lang="ts">
//組件名默認是?件名。如果不希望??件名，也可以?定義
export default {name: "User"
}
</script><script setup lang="ts">import {ref} from "vue"let userName=ref()let age=ref()defineExpose({userName,age})//暴露子組件屬性
</script>

app.vue

<template><User ref="userInfo"></User><!--使用User組件，并綁定User組件數據到userInfo對象--><button @click="showUserInfo">點一下試試</button>
</template>
<script setup lang="ts">
import User from "./components/User.vue"
import {ref} from "vue"
let userInfo=ref()function showUserInfo(){console.log(userInfo)//ref對象console.log(userInfo.value)//子組件數據對象console.log(userInfo.value.userName)//console.log(userInfo.value.age)//
}
</script>

?（2）父組件到子組件

app.vue：

<template><User :user-Info="userMsg"></User>{{ userMsg }}<button @click="changeUserInfo">點一下試試</button>
</template>
<script setup lang="ts">
import User from "./components/User.vue"
import { reactive } from "vue"let userMsg = reactive({userName: "張三",age: 20})function changeUserInfo() {userMsg.age+=1
}
</script>

User.vue :

<template><div>姓名：<input type="text" v-model="userInfo.userName"></div><div>年齡: <input type="number" v-model="userInfo.age"></div>
</template><script setup lang="ts">
defineProps(["userInfo"])
</script>

界面效果圖：

3.生命周期

生命周期是指項目啟動和工作過程中，文件狀態變化的過程，使用函數可在各個狀態前后添加自己的操作。?

創建階段： setup

掛載階段： onBeforeMount 、 onMounted

更新階段： onBeforeUpdate 、 onUpdated

卸載階段： onBeforeUnmount 、 onUnmounted

代碼如下：

import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

onBeforeMount(()=>{

console.log('掛載之前')

})

onMounted(()=>{

console.log('掛載完畢')

})

onBeforeUpdate(()=>{

console.log('更新之前')

})

onUpdated(()=>{

console.log('更新完畢')

})

onBeforeUnmount(()=>{

console.log('卸載之前')

})

onUnmounted(()=>{

console.log('卸載完畢')

})

4.路由

Vue項?雖然只有index.html?個??，但是可以通過多路由機制實現多??跳轉的效果。訪問不同鏈接，展示

不同的??內容，形成多??的效果。在終端輸入以下指令：

npm install vue-router@4

（1）路由配置

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter,createWebHistory } from "vue-router";
import HomePage from "@/pages/Home.vue"
import AboutPage from "@/pages/About.vue"
import NewsPage from "@/pages/News.vue"
//配置路由規則
const routes = [
{ path: '/',redirect: '/home'}, //默認跳轉都??
{ path: '/home', component: HomePage },
{ path: '/about', component: AboutPage, name:'about' }, //命名路由
{ path: '/news', component: NewsPage },
]
//創建路由器
const router = createRouter({
history: createWebHistory(),//路由器?作模式
routes,
})
//項?中，通常將兩個配置項放到單獨的ts?件中
const app = createApp(App)
//加載路由器
app.use(router)
app.mount('#app')

App.vue

<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使? router-link 組件進?導航 -->
<!-- 通過傳遞 `to` 來指定鏈接 -->
<!-- `<router-link>` 將呈現?個帶有正確 `href` 屬性的 `<a>` 標簽 -->
<router-link to="/home">??</router-link> <!-- 直接跳轉 -->
<router-link :to="{ path:'/about'}">關于</router-link> <!-- 路徑跳轉 -->
<router-link replace :to="{ name:'news'}">新聞</router-link> <!-- 命名跳轉 -->
</p>
<div class="content">
<!-- 路由出? -->
<!-- 路由匹配到的組件將渲染在這? -->
<router-view></router-view>
</div>
</div>
</template>
<!-- vue3寫法 -->
<script lang="ts" setup >
</script>
<style>
a{ 
margin: 10px;}
.content{
background: yellowgreen;
widows: 10%;
height: 400px;
border: 1cap;
border-radius: 10px;}
</style>

?路由知識點說明：

路由?作模式

在router配置中的history項為路由?作模式。Vue提供了兩種?作模式：

history模式

訪問路徑：URL不帶#，斜杠鏈接，接近傳統?站。缺點：容易產?404錯誤。

hash模式

訪問路徑：URL帶有#。缺點：對SEO不太友好。?較適合內部系統。

replace屬性

<route-link>標簽可以添加replace屬性。有兩種可選配置： push和replace

push 追加瀏覽器歷史記錄(默認值)。追加歷史記錄后，可以使?瀏覽器的返回按鈕，跳回歷史?

replace 替換瀏覽器歷史記錄。替換歷史記錄后，瀏覽器的返回按鈕不可?。

路由嵌套

<route-view>標簽嵌?的??中?持進?步嵌套?菜單。例如，新聞?希望進?步嵌套新聞路由。新聞?有多條新聞，希望在新聞?展示多條新聞的標題。點擊標題，可以查看對應新聞的詳情。路由配置如下：

const routes = [{ path: '/',redirect: '/home'}, //默認跳轉都??{ path: '/home', component: HomePage }, { path: '/about', component: AboutPage, name:'about' }, //命名路由{ 
path: '/news', 
component: NewsPage, 
name:'news',
children:[ //?路由{
name: "xinwen1",
path: "1",
component: News1},{
name: "xinwen2",
path: "2",
component: News2}] },]

組件代碼：

<ul>
<li><RouterLink to="/news/1">新聞1</RouterLink></li>
<li><RouterLink to="/news/2">新聞2</RouterLink></li>
</ul>
<!-- 展示區 -->
<div class="news-content">
<RouterView></RouterView>
</div>

（2）路由傳參

Vue3中提供了兩種傳參?式，query傳參和param傳參。

query傳參：

new.vue組件

<!-- 字符串傳參 -->
<router-link to="/news/1?id=1&title=新聞1&content=asdfasdf"
<!-- 對象傳參 -->
<RouterLink
:to="{
path:'/news/1',
query:{
id:'1',
title:'新聞1',
content:'asdfasdf'
}
}">新聞1
</RouterLink>

detaiPage .vue

import {useRoute} from 'vue-router'
import {toRefs} from 'vue'
const route = useRoute()
// 打印query參數
console.log(route.query)
//配置雙向綁定數據
let {query} = toRefs(route)

params傳參

params傳參?式表示所有參數都拼接到URL上。

main.ts

{ 
path: '/news', 
component: NewsPage, 
name:'news',
children:[ //?路由{
name: "xinwen2",
// Param傳參，URL預設占位符，?表示參數可選
path: "2/:id/:title/:content",
component: News2}] },

newPage.vue

{ 
path: '/news', 
component: NewsPage, 
name:'news',
children:[ //?路由{
name: "xinwen2",
// Param傳參，URL預設占位符，?表示參數可選
path: "2/:id/:title/:content",
component: News2}] },

detailPage.vue

import {useRoute} from 'vue-router'
import {toRefs} from 'vue'
const route = useRoute()
// 打印params參數
console.log(route.params)
//配置雙向綁定數據
let {params} = toRefs(route)

5.pinia數據存儲

pinia用于項目中界面組件之間數據共享，比如說登錄之后的用戶信息。

開始 | Pinia