您的当前位置:首页>全部文章>文章详情

【Vue】前端框架 Vue3框架 使用总结(一) Vue框架的基础使用

CrazyPanda发表于:2023-12-05 20:39:36浏览:775次TAG:

目录

一、Vue3框架基础

1、创建项目

2、项目结构

3、Vue基础语法

4、组件之间通信

5、组合式api

二、VueRouter的基础使用

1、安装

2、使用案例

3、完整案例步骤

4、调优-路由懒加载

三、Vuex数据管理

1、实现案例

 2、更改store状态,同步操作

3、store中的计算属性

4、redux里的异步操作Action

5、模块化管理

四、网络请求



Vue3官方文档:Vue.js - 渐进式 JavaScript 框架 | Vue.js

基础部分见官方文档

一、Vue3框架基础

1、创建项目

安装yarn

npm install -g yarn//检验是否安装成功yarn -v

yarn配置taobao镜像源

yarn config set registry https://registry.npm.taobao.org

安装vue-cli脚手架

yarn global add @vue/cli// 检查vue是否被安装vue -V

创建vue3项目,注意这里项目名不能有大写字母

vue create my-project(你的项目名)

启动项目

yarn run serve

2、项目结构

b5a77db0cdbd436188c23d52d8838748.png

b5a77db0cdbd436188c23d52d8838748.png

3、Vue基础语法

指令名称指令作用备注
v-html显示与解析HTML代码等效与JS的innerHTML,<p v-html="'<h1>hello</h1>'"</p>标签h1不会直接显示而是编程h1标签
v-text原封不动的展示等效与JS的innerText
v-for遍历与循环功能遍历数字,字符串,对象,数组
v-bind绑定属性简单形式 :属性名=“值”
v-model双向绑定,可配合修饰符使用只支持input,select,textarea
v-show显示与隐藏隐藏只是样式:style=“display=none”
v-if判断v-if/v-else-if/v-else是一组
v-on绑定事件简写形式 @事件名=方法名()
v-once数据只渲染一次,渲染后数据不会发生变化<p v-once>{{msg}}</p>即使msg改变也不会再渲染

4、组件之间通信

props父组件向子组件传值,见:Props | Vue.js

事件传值,子组件向父组件传值,见:组件事件 | Vue.js

跨级通信,见:依赖注入 | Vue.js

5、组合式api

使用组合式api的风格开发更有利于大型项目的维护

组合式 API:setup() | Vue.js

二、VueRouter的基础使用

官方文档:介绍 | Vue Router

1、安装

安装 | Vue Router

2、使用案例

基本使用案例官方:入门 | Vue Router

// 1. 定义路由组件.
// 也可以从其他文件导入
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
 
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]
 
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = VueRouter.createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
 
// 5. 创建并挂载根实例
const app = Vue.createApp({})
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
 
app.mount('#app')
 
// 现在,应用已经启动了!

3、完整案例步骤

(1)创建src/router/index.js文件用于存放路由表

// 1. 定义路由组件.
// 也可以从其他文件导入
import HomePage from "../views/HomePage.vue"
import AboutPage from "../views/AboutPage.vue"
 
import { createRouter,createWebHistory } from "vue-router"
 
 
// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
    { path: '/', component: HomePage },
    { path: '/about', component: AboutPage },
]
 
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置,但我们在这里
// 暂时保持简单
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见,我们在这里使用 hash 模式。
    history: createWebHistory(),
    routes, // `routes: routes` 的缩写
})
 
export default router

(2)main.js中导入依赖,并配置使用

b5a77db0cdbd436188c23d52d8838748.png

(3)配置跳转使用

<template>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link to="/">Go to Home</router-link>
      <router-link to="/about">Go to About</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

实现路由跳转,更多路由熟悉参考官网文档。

4、调优-路由懒加载

路由懒加载 | Vue Router

三、Vuex数据管理

官网案例: 开始 | Vuex

安装依赖:安装 | Vuex

1、实现案例

(1)新建src/store/index.js文件

import { createStore } from 'vuex'
 
// 创建一个新的 store 实例
const store = createStore({
    state () {
        return {
            count: 0
        }
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})
 
export default store

(2)main.js中添加依赖并配置

b5a77db0cdbd436188c23d52d8838748.png

使用

b5a77db0cdbd436188c23d52d8838748.png

 2、更改store状态,同步操作

参考:Mutation | Vuex

3、store中的计算属性

参考:Getter | Vuex

4、redux里的异步操作Action

参考:Action | Vuex

5、模块化管理

使用时最好开启命名空间

参考:Module | Vuex

四、网络请求

见我的博客:前端框架 网络请求 Fetch Axios_Dragon Wu的博客-CSDN博客

文章知识点与官方知识档案匹配,可进一步学习相关知识

猜你喜欢

【Vue】Vue中字符串数组和对象常用方法介绍
在Vue中,数组和字符串是我们最常处理的数据类型。Vue提供了响应式系统,可以自动跟踪数组和对象的变化,并响应式地更新DOM。在Vue中,您可以像在任何JavaScript应用程序中一样操作这些数据类型。下面时整理的Vue中字符串 数组 以及对象的常用操作方法。一.数组方法1.增删改: unshift、push、splice、shift、pop、splice、slice&nbsp;1.1.unshift:在数组的头部添加内容//&nbsp;数组.unshift(&quot;添加的值&quot;)
发表于:2024-05-08 浏览:276 TAG:
【Vue】Vue3项目filter.js组件封装
1、element-plus(el-table)修改table的行样式export&nbsp;function&nbsp;elTableRowClassName({&nbsp;row,&nbsp;rowIndex&nbsp;})&nbsp;{ &nbsp;&nbsp;if&nbsp;(rowIndex&nbsp;%&nbsp;2&nbsp;!=&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;&#39;default-row&#39; &amp;nb
发表于:2023-12-15 浏览:316 TAG:
【Vue】Antd Pro Vue的使用(八) —— 表单组件的常用配置
1、清除配置allow-clear在ant design react组件中,表单组件默认都有清除按钮(输入框右侧的小黑叉号),在vue组件中需要自己配置,即给组件加上allow-clear属性并且所有组件都支持这个属性,a-input、a-select、a-textarea、a-date-picker等都支持&lt;a-form-item&nbsp;label=&quot;用户名&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;a-input&nbsp; &nbsp;
发表于:2024-05-10 浏览:273 TAG:
【Vue】vue2应用与vue3的不同之处
上一篇,我使用了vue2创建了一个应用,这次我使用vue3创建一个应用,看一下两者有什么不同。如下,是我用cue3创建的应用目录发现和vue2应用的目录一模一样,然后我用对比工具对比了两者的文件。1. 文件区别下面是package.json文件的区别,首先vue版本不同,对应的扩展组件也不同。下面是main.js的不同然后是APP.vue的不同2. 全局实例改变2.x 全局 API3.x 实例 API (app)Vue.configapp.configVue.config.productionT
发表于:2024-04-23 浏览:335 TAG:
【VUE】如何查看前端的vue项目是vue2还是vue3项目
1. 检查package.json文件在项目的根目录下,打开package.json文件,查找dependencies或devDependencies部分中的vue条目。版本号将告诉你是Vue 2还是Vue 3。例如:Vue 2.x: &quot;vue&quot;: &quot;^2.x.x&quot;Vue 3.x: &quot;vue&quot;: &quot;^3.x.x&quot;2. 使用Vue Devtools如果项目正在运行,并且你已经安装了Vue Devtools(Vue开发者
发表于:2024-03-11 浏览:407 TAG:
【Vue】Antd Pro Vue的使用(二)—— 全局配置及登录
1. 默认语言设置&nbsp;Antd Pro Vue安装好之后,默认使用的是英文,我们需要把它设置为中文简体。找到/src/core/bootstrap.js文件,把最后一行 en-US 修改为 zh-CN,然后一定要清除浏览器缓存,修改才能生效修改后修改后的页面2. 请求服务端接口Antd Pro Vue封装好的有请求方法,在/src/api/文件夹,我们把自己的接口写到这里面就可以任意调用。Antd Pro Vue安装好之后,默认使用的是mock数据,我们要使用自己的接口,要把mock去掉
发表于:2024-04-25 浏览:455 TAG:
【Vue】Vue数据更新方法
前言平时做项目时会经常对数组和对象进行数据更新操作,而有时数据并没有及时更新,这时我们会用Vue.set(),this.$set()等方法让数据及时更新。
发表于:2024-03-30 浏览:312 TAG:
【Vue】vue3比vue2好在哪里
vue 3 优于 vue 2 的关键优势包括:性能提升:响应式系统重写,优化更新速度虚拟 dom 优化,提高渲染效率代码组织和可维护性:组合式 api,提升可维护性teleport 和 suspense,提高代码灵活性和可读性开发者体验:更好的调试工具,简化调试过程typescript 2.7 支持,增强代码提示和类型检查Vue 3 与 Vue 2 的优势对比核心性能提升响应式系统重写:Vue 3 引入 Reactivity API,优化了响应式系统的性能,提升了更新速度。虚拟 DOM 优化:采
发表于:2024-04-28 浏览:310 TAG:
【Vue】Antd Pro Vue的使用(一)—— 安装及运行
前言Ant Design Pro 是一个企业级中后台前端/设计解决方案,致力于在设计规范和基础组件的基础上,继续向上构建,提炼出典型模板/业务组件/配套设计资源,进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。AntDesignVue与react版本有几乎相同的布局AntDesignPro React版本:开箱即用的中台前端/设计解决方案 - Ant Design ProAntDesign组件:Ant Design - 一套企业级 UI 设计语言和 React 组件库Ant
发表于:2024-04-20 浏览:290 TAG:
【Vue】Antd Pro Vue的使用(七) —— 年份选择组件配置
ant design vue组件中没有现成的年份组件可使用,不过可通过配置来实现年份选择。先看实现效果:关闭效果:展开效果:配置如下:&lt;a-date-picker &nbsp;&nbsp;&nbsp;&nbsp;mode=&quot;year&quot; &nbsp;&nbsp;&nbsp;&nbsp;format=&quot;YYYY&quot; &nbsp;&nbsp;&nbsp;&nbsp;:style=&quot;{width:&nbsp;&#39;256px&#39;}&amp;quot
发表于:2024-05-09 浏览:273 TAG: