一、介绍

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