2024从零开始使用VSCode编程之“Vue2（Vue.js）”

npc码农

已于 2024-08-08 20:08:56 修改

阅读量938

点赞数 23

分类专栏： VSCode 前端开发文章标签： vue.js 前端 javascript

于 2024-07-31 14:12:59 首次发布

本文链接：https://blog.csdn.net/ssrsrrn/article/details/140708044

版权

前端开发同时被 2 个专栏收录

9 篇文章 2 订阅

订阅专栏

VSCode

6 篇文章 0 订阅

订阅专栏

注意：本教程只是根据个人经验总结，正规详细教程请前往官网观看Vue.js (vuejs.org)

一、Vue.js（vue2）介绍

简介：是一个流行的前端框架基于Javascript，用于构建用户界面和单页应用程序（SPA）

尽管vue2已经停止了更新维护，但相对的他算是一个成熟的框架，而且相较于vue3简单易上手，前期建议通过vue2来了解vue的模式，后期在转入Vue3的时候也会更加丝滑易上手

二、特点与核心

1、响应式数据绑定

①简介：

Vue 2 的响应式系统是vue中最基础和核心的特性之一，它通过数据劫持和发布-订阅模式实现，使得数据的变化能够自动更新视图。

②关键点：

数据劫持：主要使用 Object.defineProperty 拦截对数据的访问和修改。
自动更新：当数据产生变化时，Vue 会自动触发视图更新。

2、组件化

①简介：

组件是 Vue 应用的基本构建模块。组件化开发使得应用结构更清晰，代码更容易维护和重用。

（类似你定制了一个积木件，具备自己功能的同时可以和其他工具结合使用）

②关键点：

可复用：每个组件都具有独立的逻辑、样式和模板
嵌套：组件可以互相嵌套，构建复杂的用户界面。

3、指令

①简介：

指令是一种特殊的标记，用于在模板中对 DOM（文档对象模型）元素进行特定的行为处理。Vue 提供了一系列内置指令，如 v-bind、v-if、v-for 和 v-model。

②关键点：

简化 DOM 操作：通过指令直接在模板中操作 DOM 元素，不需要编写繁杂的js代码实现
扩展性：可以自定义指令，以满足特定需求。

4、计算属性

①简介：

计算属性是允许在模板中使用基于其他响应式数据计算得来的属性。计算属性会根据其依赖的响应式数据自动更新。

②关键点：

缓存：计算属性的结果会被缓存，直到其依赖项发生变化。
简化模板：在模板中使用计算属性而不是在模板中嵌入复杂逻辑。

5、生命周期钩子

①简介：

生命周期钩子函数在组件的不同阶段自动调用，使得开发者可以在组件的创建、更新和销毁过程中执行特定的操作，比如在创建阶段实行数据的渲染，挂载阶段操作DOM，销毁阶段清除数据等

②关键点：

控制流程：在特定阶段执行初始化、数据获取或清理等操作。
预定义钩子：如 created、mounted、updated、destroyed 等。

6、Vue Router

①简介：

Vue Router 是 Vue.js 的官方路由管理器，适用于构建单页面应用（SPA），允许在不同视图之间进行导航，同时保持应用状态，简单来说作用就是控制页面跳转

②关键点：

路由配置：定义 URL 路径与组件之间的映射关系。
嵌套路由：支持在组件中嵌套多个视图。
动态路由：支持路径参数和路由守卫。

7、Vuex

①简介：

Vuex 是 Vue 2 核心特性之一，特别是对于复杂状态管理的应用。

②关键点：

集中式状态管理：所有状态集中在一个 store 中，便于管理和调试。
响应式状态：状态变化会自动更新依赖该状态的组件。

三、Vue.js（vue2）使用教程

1、使用

使用方法一：（直接引入，适用于快速了解学习vue）

核心步骤

1、准备容器

2、引入包

3、创建vue实例new Vue()

4、指定配置项→渲染数据

①el指定挂载点

②data提供数据

<!-- 容器 -->
<div id="app">
{{msg}}
</div>
<!-- 引入包 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<!-- 创建vue实例 -->
<script>
    const app = new Vue({
//指定配置项
        el:'#app',
        data:{
            msg:"第一个vue"
        }
    })

</script>

使用方法二：（下载使用，适用于后期开发制作，后续讲解）

①在想要创建项目的目录下新建一个文件夹

②点击进入文件夹，并在路径栏输入cmd回车

③最开始界面会出现Generate project in current directory? (Y/n)

意思是，创建羡慕时会覆盖文件，直接输入y回车来到下面这个界面

以下界面中看个人选择，这里后续细讲，使用上下键移动选项选择Default ([Vue 2] babel, eslint)：

④输出以下代码表示成功

⑤使用代码code .使用VSCode打开项目（！！！注意界面不要退出等会还要用）

⑥项目大概长这样

⑦运行项目

在项目终端（Node.js教程中有提到如何打开终端）中输入npm run serve运行前端项目

2、目录介绍

默认目录

vue-Demo1/
├── node_modules/ # 存放项目的所有依赖包，由 npm 或 yarn 安装
├── public/
│ ├── favicon.ico # 网站图标
│ └── index.html # HTML 模板文件，Vue 应用将被挂载到这里
├── src/
│ ├── assets/ # 存放静态资源，如 CSS、图像等
│ ├── components/ # 存放 Vue 组件
│ │ └── HelloWorld.vue # 默认示例组件
│ ├── App.vue # 根组件，是整个应用的顶层组件
│ ├── main.js # 入口文件，初始化 Vue 实例并挂载到 DOM 元素
├── .gitignore # Git 忽略文件配置，指定哪些文件或目录不被版本控制
├── babel.config.js # Babel 配置文件，用于 JavaScript 代码的转译
├── jsconfig.json # JavaScript 配置文件，用于编辑器的路径解析
├── package-lock.json # 锁定的依赖版本，确保一致的安装版本
├── package.json # 项目元数据文件，包括项目名称、版本、描述、依赖项等
├── README.md # 项目说明文件，包含项目简介、安装和使用说明
└── vue.config.js # Vue CLI 配置文件，用于配置 Vue 项目的构建和开发选项

后期目录大概样式（并不完全，只是部分项目基本包含的结构）

my-vue2-project/
├── node_modules/ # 项目的依赖包目录
├── public/
│ ├── index.html # 应用的 HTML 模板
│ └── ... # 其他静态资源（如图像、favicon 等）
├── src/
│ ├── assets/ # 静态资源（如 CSS、图像等）
│ ├── components/ # Vue 组件
│ ├── router/ # 路由配置
│ ├── store/ # Vuex 状态管理
│ ├── views/ # 视图组件（页面级组件）
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
│ └── ... # 其他源文件（如插件、工具类等）
├── .babelrc # Babel 配置
├── .eslintrc.js # ESLint 配置
├── .gitignore # Git 忽略文件配置
├── package.json # 项目元数据及依赖项
├── README.md # 项目说明文件
└── yarn.lock / package-lock.json # 锁定的依赖版本

四、初试Vue2

1、文件部分

①创建页面文件目录

右键src新建文件夹

②命名并创建

建议命名为views(这个目录下全是页面)

③views右键新建vue文件

④命名Home.vue回车创建

⑤安装Vue Router路由

项目终端输入命令安装“npm install vue-router@3”回车

⑥创建路由文件夹router

⑥创建文件index.js

2、代码部分

①Home.vue界面创建代码

②更新main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'//把路由文件引入（Vue Router）

Vue.config.productionTip = false

new Vue({
  router,//使用引入的文件（Vue Router）
  render: h => h(App),
}).$mount('#app')

③创建另一个页面在views下（Home.vue）

<template>
  <div>
    <h1>第一个页面</h1>
    <p>npc的简单小页面</p>
    <router-link to="/f">跳转About</router-link>
  </div>
</template>

<script>
export default {
  name: 'HomePage'
};
</script>

<style>

</style>

④创建另一个页面在views下（About.vue）

<template>
  <div>
    <h1>第二个页面，从home跳过来</h1>
    <p>npc的简单小页面</p>
    <router-link to="/h">跳转Home</router-link>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
};
</script>

<style>

</style>

⑤修改根页面App.vue

<template>
  <div >
    <router-view></router-view>
  </div>
</template>

<script>

</script>

<style>
</style>

⑥index.js路由文件中编写代码

import Vue from 'vue'
import Router from 'vue-router'

// 导入视图组件
import HomePage from '@/views/Home.vue' // 确保文件名匹配
import AboutPage from '@/views/About.vue' // 确保文件名匹配

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/h'  // 当用户访问根路径时，重定向到 /h
    },
    {
      path: '/h',
      name: 'home',
      component: HomePage
    },
    {
      path: '/f',
      name: 'about',
      component: AboutPage

    }
  ]
})