完整教程：零基础入门 Vue.js：项目创建、组件开发与路由管理

vue简介

[!attention] No Reproduction Without Permission
Made By Hanbin Yi

本文涵盖 Vue.js 基础与实战：先介绍其为渐进式 JavaScript 框架，再讲 Vue CLI 创建项目的终端操作、目录结构及启动指令；对比 Vue 2 Options API 与 Vue 3 Composition API 语法，详解插值、v-bind 等核心指令及组件开发流程；还包含 Element UI 安装、Vue Router 配置（含二级路由）与跳转方式，结合表格渲染案例，为 Vue 开发提供从基础搭建到实战应用的指引。（适合vue 0基础）

Vue（通常称为 Vue.js）是一套用于构建用户界面的渐进式 JavaScript 框架，由尤雨溪于 2014 年推出，目前已成为前端开发中最流行的框架之一。它的核心特点是易学易用、灵活高效，既可以用于构建小型交互组件，也能支撑复杂的单页应用（SPA）开发。

学习网址

创建项目

进入文件夹目录下

cd 文件夹名

[!TIP]
选择所要创建的文件夹目录下

创建项目

在这里插入图片描述

vue create 文件夹名

[!TIP]
vue 文件将会创建在这个文件夹名下
出现如下图所示即为成功

在这里插入图片描述

导入vscode

[!TIP]
将目录下新生成的vue项目文件夹拉入vscode. (一定要项目根目录)

运行vue项目

终端可通过系统自带或vscode的终端

[!IMPORTANT]
在终端下进入新生成的vue项目文件夹
然后输入指令

npm run serve

[!WARNING]
若package.json下启动配置为dev 则使用启动命令为

npm run dev

[!NOTE]
补充：vscode终端开启方法

vue项目文件夹介绍

在这里插入图片描述

vue项目前操作

文件结构（vue2 与 vue3）

1. Composition API vs Options API

Vue 2 主要使用 Options API，这是一种基于类的组件风格，其中组件的选项（如 data、methods、computed 等）被定义在组件的选项对象中。

Vue 3 引入了 Composition API，这是一种基于函数的 API 风格，允许开发者以更灵活的方式组织和复用代码。Composition API 通过 setup() 函数使用，可以更好地处理逻辑复用和状态管理。

2. `<script>` 标签的变化

在 Vue 2 中，通常在 <script> 标签中直接使用 Options API：


<script>
export default {data() {return {message: 'Hello Vue 2'};}
}
</script>

在 Vue 3 中，你可以在 <script> 标签中使用 Composition API:


<script>
import { ref } from 'vue';
export default {setup() {const message = ref('Hello Vue 3');return { message };}
}
</script>

导入配置包（有的可忽略）

终端命令

npm i

关闭eslink的语法检查

修改配置文件需重启项目

在这里插入图片描述

新vue文件的引入注册使用

新建的vue文件（在commponents文件夹下）text.vue

在App.vue中引入注册使用


<script>
//1.引入
import text from "./components/text.vue";
export default {name: 'App',//2.注册components:{"my-text" : text}
}
</script>

格式认识

components下text.vue文件

html代码区

js代码区
<script>new Vue({//通过选择器提供指定挂载点el:'#root',//数据存放data(){return{msg:"看看我有没有在页面上",url:"https://cn.vuejs.org/guide/quick-start"}}
});
</script>
css代码区

<script>
export default {//数据存放data(){return{msg:"看看我有没有在页面上",url:"https://cn.vuejs.org/guide/quick-start"}}
}
</script>

上面两种方法

Vue 组件导出方式（export default）

直接创建 Vue 实例方式（new Vue()）

项目架构差异

export default 更适合大型项目，通过组件化开发提高代码复用性
new Vue() 更适合小型项目或快速原型开发，直接创建根实例即可运行

暴露与引入

[!WARNING]
引入注册使用格式见下方新vue文件的引入注册与使用

方法一

暴露

export default{
name : "张三",
age :18
};

引入

import obj from "./exporttext"; //from 暴露的文件
console.log(obj)

方法二

暴露

let obj = {
name : "张三",
age :18
};
export default obj;  //将obj暴露出

引入

import obj from "./exporttext"; //from 暴露的文件
console.log(obj)

vue指令


<script>new Vue({//通过选择器提供指定挂载点el:'#root',//数据存放data(){return{msg:"看看我有没有在页面上",url:"https://cn.vuejs.org/guide/quick-start"}}
});
</script>

v-html

v-html的作用是将绑定表达式的值作为 HTML 内容插入到所在的 DOM 元素中，支持解析标签。双引号里不能直接放置需要显示的字符串内容。


<script>new Vue({el:'#root',data:{msg:'文本
'}})</script>

v-text

可以向所在标签中插入文本，无法解析标签

初始文本

<script>new Vue({el:'#root',data:{msg1:'文本'}})
</script>

[!TIP]
他的效果类似于插值表达式{{msg1}}，但插值表达式可以进行拼接，而v-text拿到msg1的值后会完全覆盖掉整个div的内容。

v-show

控制元素的显示、隐藏。
等价于为元素添加display：none是视觉上的隐藏，适用于需要频繁切换显示隐藏的时候。
引号内表达式为true显示，为false隐藏。

文本

v-if

控制元素的显示、隐藏。
等价于创建、删除元素，在结构上消失。适用于不频繁显示隐藏。
引号内表达式为true显示，为false隐藏。

文本

v-else 与 v-else-if

控辅助v-if判断渲染。必须紧跟v-if否则无效。
他会按照顺序依次执行，一旦满足某个条件，就会渲染对应元素，并且不会对后续的条件进行判断，即使下面的判断有成立的。

 文本1
文本2
<script>new Vue({el:'#root',data:{num:10}})</script>

v-bind 单向数据绑定

基础语法

例如

<script>new Vue({el:'#root',data:{num:'111'}})
</script>

[!IMPORTANT]
当data中数据发生变化时，输入框内容发生改变；当输入框内容改变时，data中的数据不发生改变。
这是因为v-bind是单向数据绑定，数据只能从data—>绑定元素

v-model 双向数据绑定

主要服务于表单元素（有value值），进行双向数据绑定，可以快速获取或设置表单元素内容。
当data中数据变化，视图自动更新。
当视图变化，data中数据自动更新。

写法：v-model:属性="值"    v-model="值"
//v-model默认绑定value

v-for

v-for 是 Vue 中用于循环渲染列表数据的指令，它可以基于数组或对象重复渲染元素

遍历

语法：v-for="value in object" 或 v-for="(value, key) in object" 或 v-for="(value, key, index) in object"

value：对象属性值
key：对象属性名
index：遍历索引

{{ item }}

<script>
new Vue({el: '#root',data() {return {fruits: ['苹果', '香蕉', '橙子']}}
})
</script>

重要注意事项：`key` 属性

必须为 v-for 渲染的每项提供唯一的 :key 属性（推荐使用数据的唯一标识，如 ID）
作用：帮助 Vue 高效更新 DOM，避免渲染错误


{{ item.name }}
{{ item.name }}

v-on 事件处理

基本语法

v-on是用于监听 DOM 事件的指令，它可以绑定事件监听器到元素上。当指定的事件触发时，会执行对应的 JavaScript 代码或方法



//可直接使用data中数据

v-on所调用的方法，在vue实例的methods中声明，最终会在vm上。并且当要使用data中的数据时，需要用this指向对应的vue实例，即：this.属性

 {{count}}
<script>new Vue({el: '#root',data: {count: 1},methods: {handleClick() {this.count++}}})</script>

综合案例


<script>
export default {data (){return{name:null,age:null,gender:null,flag:false,currectItem:null,tableData: [{ id: 1, name: "张三1", age: 18, gender: "女", status: 0 },{ id: 2, name: "李四", age: 30, gender: "男", status: 1 },{ id: 3, name: "王五", age: 18, gender: "女", status: 0 },{ id: 4, name: "赵六", age: 20, gender: "男", status: 1 },{ id: 5, name: "小六", age: 40, gender: "男", status: 1 },]}},methods:{changeStatus(item){if(item.status == 0){item.status = 1;}else{item.status = 0;}},changeButtun(item){this.flag = true;this.name = item.name;this.age = item.age;this.gender = item.gender;this.currectItem = item;},changeAffirm(){this.currectItem.name = this.name;this.currectItem.age = this.age;this.currectItem.gender =this.gender;this.flag = false;},changeCancle(){this.flag = false;}}
}
</script>

id	name	age	gender	status	control
{{item.id}}	{{item.name}}	{{item.age}}	{{item.gender}}	{{item.status?"正常":"禁用"}}

Elementui组件库

适配vue2

https://element.eleme.cn/#/zh-CN/component/installation

安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

完整导入

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui'; //添加行
import 'element-ui/lib/theme-chalk/index.css';  //添加行
import App from './App.vue';
Vue.use(ElementUI); //添加行
new Vue({
el: '#app',
render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

Vue Router 路由

在Vue中，路由是指用来管理应用程序中不同页面之间切换和导航的机制。它允许我们根据不同的URL路径，动态地加载和显示不同的组件内容。

Vue中的路由可以通过[Vue Router](https://so.csdn.net/so/search?q=Vue Router&spm=1001.2101.3001.7020)来实现。Vue Router是Vue官方提供的一个插件，它提供了一种声明式的方式来定义路由和导航。

[!CAUTION]
通过路由，我们可以实现在Vue应用中的页面导航和切换，并能够动态加载不同的组件内容。这样可以实现更好的用户体验，使得应用程序更加灵活和可扩展。

route：表示单个路由。
routes：表示多个路由的集合。是一个数组，在这个数组中包含了多个route。
router：译为路由器，是route、routes的管理者。

Vue Router路由的组成

Vue Router路由由以下几个重要的组成部分组成：

路由实例（Router Instance）：

创建一个Vue Router实例，用于管理应用程序的路由。

路由映射表（Route Mapping）：

在路由实例中设置路由映射表，即定义URL路径与对应的组件之间的关系。路由映射表是一个包含路由对象的数组，每个路由对象由以下几个属性组成：

path：定义URL路径，可以是字符串或者正则表达式。
name：路由名称，用于标识路由。
component：对应的组件，当路径匹配时，将渲染该组件。
redirect：重定向路径，在访问某个路径时，自动重定向到其他路径。
children：定义嵌套路由。[详细见二级路由]

路由出口（Router View）：

使用 <router-view> 标签作为路由的出口，用于渲染匹配到的组件。

路由链接（Router Link）：

使用 <router-link> 标签作为路由的链接，用于生成可点击的链接，通过点击链接切换路由。

导航守卫（Navigation Guards）：

Vue Router提供了多个导航守卫钩子，用于在路由导航过程中拦截或者影响导航行为。例如，beforeEach、beforeResolve、afterEach等。

通过以上组成部分，我们可以在Vue应用中实现前端路由的功能，通过定义路由映射表来控制页面的切换和加载不同的组件。同时，导航守卫可以让我们在路由切换前后执行一些逻辑，例如检查用户权限、验证用户登录状态等。

路由的搭建

版本注意

[!WARNING]
Vue2->v3.x
vue3->v4.x

终端窗口命令

npm install vue-router 默认最新 需指定版本
npm install vue-router@版本号
简写：npm install vue-router@3.6.5
npm view vue-router version 查看所有版本

创建页面（路由）路由存放

`src/pages`

或 src/views

一般组件与路由组件

[!TIP]
路由组件通常存放在pages文件夹，
一般（普通）组件通常存放在components文件夹。
一般（普通）组件需要1.引入2.注册3.使用

配置路由信息

`src/router/index.js`

在这里插入图片描述

//引入vue
import Vue from 'vue'
//引入VueRouter
import VueRouter from 'vue-router'
//注册或使用
Vue.use(VueRouter)
//配置路由数组
//vue 中 @符表示从src开始访问选择的文件夹
//path 表示 路径与文件绑定 
const routes = [
{name:"login",path:"/login",component:() => import("@/文件名.vue")}
{name:"sign",path:"/sign",component:() => import("@/文件名.vue")}
]
//创建路由实例对象
const router = new VueRouter({
routes
})
//暴露
export default router;

引入router

`main.js`

在Vue入口文件（main.js）中引入Vue Router 并使用它:

//该文件是整个项目的入口文件
//引入vue，相当于以前在html中引入了vue.js
import Vue from 'vue'
//引入app组件，它是所有组件的父组件，App组件的父组件是vm，即：一人之下万人之上
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
import router from "@/router";//引入router (执行步骤)
//创建Vue实例对象————vm
new Vue({
router,//引入router（执行步骤）
//render函数：用于把App组件中的template模板结构，渲染到页面中，即将App组件放入到容器中
render: h => h(App),
}).$mount('#app')//该行代码一样可以写在new Vue({el:'#app'}})

使用路由

`App.vue`中引入路由

进行展示路由

<template><div id="app"><!-- 展示一级路由 --><router-view></router-view></div></template>

[!NOTE]
我们可以使用Vue Router提供的<router-link>组件来生成路由链接，使用<router-view>组件来显示当前路由对应的组件。

[!CAUTION]
详情见路由跳转

二级路由

在 Vue 路由中，二级路由指的是嵌套在「一级路由」内部的路由，简单说就是 “页面中的页面”。它的作用是在同一个一级路由页面（比如首页）中，通过切换二级路由展示不同的内容（比如首页的 “推荐”“热门”“最新” 板块），而不需要重新加载整个一级路由页面。

举个生活例子理解

假设你打开一个电商网站的「首页」（这是一级路由），首页里有 “精选商品”“限时折扣”“新品上市” 三个板块。这三个板块的内容不会单独占用一个全新的页面，而是在「首页」这个大框架里切换展示 —— 这三个板块对应的路由就是二级路由，它们嵌套在「首页」这个一级路由内部。

二级路由的核心特点

嵌套关系：必须依赖一个一级路由存在，不能单独使用。
共享布局：二级路由的内容会显示在一级路由页面的指定位置（通常是通过 <router-view> 标签占位）。
URL 结构：二级路由的 URL 会拼接在一级路由后面，格式为 一级路由路径/二级路由路径。例如：/home/recommend（/home 是一级路由，/recommend 是二级路由）。

具体步骤

二级路由配置

index.js中添加对应父路由的子路由

通过 children 属性定义二级路由，嵌套在一级路由的配置里。

import Vue from "vue";
import VueRouter from "vue-router";
// import { component } from "vue/types/umd";
Vue.use(VueRouter);
//定义
const routes = [
{name:"login",path:"/login",component:() => import("@/pages/login.vue")},
{name:"card",path:"/card",component:() => import("@/pages/card.vue")},
{name:"sb",path:"/sb",component:() => import("@/pages/sb.vue"),
//嵌套操作
children:[
{name:"bsb",path:"bsb",component:() =>import("@/pages/bsb.vue")},
]
}
]
//实例化路由对象
const router = new VueRouter({
routes
})
//暴露路由
export default router;

[!WARNING]
子路由（children中）path 不需要斜杠

在这里插入图片描述

二级路由显示

在一级路由中添加<router-view> 表示二级路由的显示位置

[!CAUTION]
在 Vue 中使用二级路由时，不需要在父组件（一级路由组件）中手动导入和注册二级路由组件，因为路由组件的注册和管理是由 Vue Router 统一负责的。

在这里插入图片描述

在app.vue 清除边距占满body

路由跳转

<router-link> 更适合静态导航
比如导航栏、菜单等固定在页面上的链接，直接在模板中声明即可，无需写额外逻辑。
它会自动处理激活状态（添加 router-link-active 类），方便做样式高亮。
编程式跳转更适合动态场景
比如点击按钮后先验证表单，通过后再跳转；或者根据接口返回结果决定跳转到不同页面。
示例（条件跳转）

[!CAUTION]
简单说：<router-link> 是 “写在 HTML 里的跳转”，适合固定链接；编程式跳转是 “写在 JS 里的跳转”，适合需要逻辑判断的动态场景。
本质上两者最终都会触发路由系统的跳转，核心区别在于使用方式和适用场景，而非功能优劣。

声明式跳转

点击<router-link>组件时，路由会自动切换到指定的路由，并将对应的组件渲染到<router-view>组件中。

是模板语法中的标签，通过 HTML 标签直接定义导航，用法类似普通 <a> 标签，但会被 Vue 路由处理为单页应用的无刷新跳转。

<template><div><router-link to="/">Home</router-link><router-link to="/about">About</router-link><!--指定展示位置--><router-view></router-view></div></template>

编程式跳转

通过 JavaScript 代码调用路由实例的方法实现跳转，需要在组件的方法中使用。

// 跳转到指定路由
this.$router.push('/home')
// 带参数的跳转
this.$router.push({
path: '/user',
query: { id: 1 }
})
// 登录成功后跳转首页
login() {
if (this.form.valid) {
this.$router.push('/home')
}
}

昆玉市网站建设_网站建设公司_前端工程师_seo优化

vue简介

创建项目

创建项目

导入vscode

vue项目文件夹介绍

文件结构（vue2 与 vue3）

2. <script> 标签的变化

导入配置包（有的可忽略）

关闭eslink的语法检查

格式认识

项目架构差异

方法一

方法二

vue指令

{{msg}}

v-html

文本

v-text

v-show

v-if

v-else 与 v-else-if

v-bind 单向数据绑定

v-model 双向数据绑定

v-for

重要注意事项：key 属性

v-on 事件处理

综合案例

Elementui组件库

完整导入

Vue Router 路由

Vue Router路由的组成

路由映射表（Route Mapping）：

路由链接（Router Link）：

路由的搭建

终端窗口命令

创建页面（路由） 路由存放

一般组件与路由组件

src/router/index.js

引入router

使用路由

二级路由

二级路由的核心特点

二级路由配置

二级路由显示

声明式跳转

编程式跳转

热门文章

文章分类

标签云

相关文章

CF2032E Balanced - Link

Vue 3 响应式进阶：掌握 toRef 与 toRefs，告别解构陷阱

动作平滑处理开启后，Sonic生成视频更加自然流畅

需要专业的网站建设服务？

2. `<script>` 标签的变化

重要注意事项：`key` 属性

创建页面（路由）路由存放

`src/router/index.js`