零基础入门 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：

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

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

<template>
  <div>{{ message }}</div>
</template>
 
<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中引入注册使用

<template>
  <div id="app">
    
    <!-- 3.使用 -->
    <my-text></my-text>
    
  </div>
</template>

<script>

//1.引入
import text from "./components/text.vue";

export default {
  name: 'App',

  //2.注册
  components:{
    "my-text" : text
  }

}
</script>


<style>


</style>

格式认识

components下text.vue文件

html代码区
<template>
  <div id = "root">
    

  </div>

</template>

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

});
</script>

css代码区
<style>

</style>

<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指令

<template>
  <div id = "root">
    <!-- {{}} 插值语法 给标签体赋值-->
    <h1>{{msg}}</h1>

    <!-- 指令语法 v-xxxx  标签属性-->
    <a v-bind:href="url">33</a>

<br>
    <!-- 简写 -->
    <a :href="url">332222</a>

  </div>

</template>

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

});
</script>

<style>

</style>

v-html

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

<div id="root">
  <div v-html="msg"></div>
</div>

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

v-text

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

<div id="root">
  <div v-text="msg1">初始文本</div>
</div>


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

[!TIP]

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

v-show

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

<div v-show="表达式">文本</div>

v-if

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

<div v-if="表达式">文本</div>

v-else 与 v-else-if

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

 <div id="root">
    <div v-if="num===10">文本1</div>
    <div v-else>文本2</div>
   </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                num:10
            }
        })
    </script>   

v-bind 单向数据绑定

基础语法

<!-- 完整语法 -->
<img v-bind:src="imageUrl" alt="示例图片">

<!-- 缩写语法（推荐） -->
<img :src="imageUrl" alt="示例图片">

例如
<input  type="text" :value="num"> 
<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：遍历索引

<ul>
  <!-- 遍历数组，只获取元素 -->
  <li v-for="item in fruits" :key="item">
    {{ item }}
  </li>
</ul>

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

重要注意事项：key 属性

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

<!-- 推荐：使用唯一 ID 作为 key -->
<li v-for="item in list" :key="item.id">
  {{ item.name }}
</li>

<!-- 不推荐：仅在列表无修改操作时临时使用 index 作为 key -->
<li v-for="(item, index) in list" :key="index">
  {{ item.name }}
</li>

v-on 事件处理

基本语法

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

<!-- 内联语句 -->
<button v-on:click="count++">点击加1</button>    
//可直接使用data中数据

<!-- 方法调用 -->
<button v-on:click="handleClick">点击调用方法</button>

<!-- 缩写形式（@符号） -->
<button @click="handleClick">缩写语法</button>

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

 <div id="root">
        <button @click="handleClick">点击count加1</button>
        <p>{{count}}</p>
 </div>

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

综合案例

<template>
  <div id="root">
    <table border cellspacing="0">
        <!-- 定义表头 -->
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>gender</th>
                <th>status</th>
                <!-- 控制列，跨两列显示 -->
                <th colspan="2">control</th>
            </tr>
        </thead>
        <!-- 定义表格主体内容区域 -->
        <tbody>
            <!-- 循环渲染表格数据，使用id作为唯一标识 -->
            <tr v-for="item in tableData" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.status?"正常":"禁用"}}</td>
                <td><button @click="changeButtun(item)">修改</button></td>
                <td><button v-on:click="changeStatus(item)">{{item.status?"禁用":"启用"}}</button></td> 
            </tr>
        </tbody>

    </table>

    <div v-show="flag">
        姓名<input type="text" v-model="name">
        <br>
        年龄<input type="text" v-model="age">
        <br>
        性别<input type="text" v-model="gender">
        <br>
        <button @click="changeAffirm()">确认</button>
        <button @click="changeCancle()">取消</button>
    </div>
  </div>
  
</template>

<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>

<style>

</style>

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

举个生活例子理解

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

二级路由的核心特点

1. 嵌套关系：必须依赖一个一级路由存在，不能单独使用。
2. 共享布局：二级路由的内容会显示在一级路由页面的指定位置（通常是通过 <router-view> 标签占位）。
3. 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')
  }
}