当前位置： 首页 > news >正文

vue入门学习教程

news 2025/7/12 17:02:13

        一、介绍

       vue是一款用于构建用户界面的 JavaScript 框架。基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。

二、使用和安装

方法1：在html代码中直接使用<script>导入，对于初学者可以这样。

<head><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head>

<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

http://www.dtcms.com/a/275174.html

相关文章：

  • Go语言中的组合式接口设计模式
  • Go·并发处理http请求实现
  • Python Day10
  • C语言初阶4-数组
  • UE5多人MOBA+GAS 18、用对象池来设置小兵的队伍的生成，为小兵设置一个目标从己方出生点攻打对方出生点，优化小兵的血条UI
  • Xavier公式的原理
  • 备案是联系主机商还是域名商
  • ESP32语音唤醒
  • 【B题解题思路】2025APMCM亚太杯中文赛B题解题思路+可运行代码参考（无偿分享）
  • 【内赠门票】GoGoGo！NetMarvel邀您出发ChinaJoy啦！
  • UniHttp中HttpApiProcessor生命周期钩子介绍以及公共参数填充-以百度天气接口为例
  • cocos游戏开发中，如何制作一个空气墙
  • WHIP 协商分析研究
  • 背包初步（0-1背包、完全背包）
  • PID 算法的原理与应用 (通俗易懂)
  • CSS 中px、em、rem、%、vw、vh、vm、rpx、fr 介绍和区别对比
  • 【高等数学】第三章 微分中值定理与导数的应用——第三节 泰勒公式
  • Lecture #18：TimeStamp Ordering Concurrency Control
  • “28项评测23项SOTA——GLM-4.1V-9B-Thinking本地部署教程：10B级视觉语言模型的性能天花板！
  • NetworkManager配置网桥(bridge)虚拟网络(vlan) 笔记250711
  • Visual Studio Code 的 settings.json 配置指南
  • 运筹说 第140期 | 从直觉到算法：这些奠基人如何塑造了启发式方法的科学根基？
  • I2C集成电路总线
  • 【机器学习应用】基于集成学习的电力负荷预测系统实战案例
  • Graph Adversarial Self-Supervised Learning 图对抗自监督学习
  • MySQL的使用
  • DPDK性能优化实践：系统级性能调优的方法论与实战（一套通用的方法论）
  • 国产LVDT信号调理芯片XJD698：高精度位移检测的国产化突破，完美替代AD698
  • 基于相似性引导的多视角功能性脑网络融合|文献速递-最新论文分享
  • 我花10个小时，写出了小白也能看懂的数仓搭建方案