【Vue】前端框架 Vue3框架 使用总结(一) Vue框架的基础使用
CrazyPanda发表于:2023-12-05 20:39:36浏览:775次
目录
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、项目结构
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的风格开发更有利于大型项目的维护
二、VueRouter的基础使用
官方文档:介绍 | Vue Router
1、安装
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中导入依赖,并配置使用
(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、调优-路由懒加载
三、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中添加依赖并配置
使用
2、更改store状态,同步操作
3、store中的计算属性
4、redux里的异步操作Action
5、模块化管理
使用时最好开启命名空间
四、网络请求
文章知识点与官方知识档案匹配,可进一步学习相关知识
Vue入门技能树vue3基础(JS)Vue3的生命周期函数38969 人正在系统学习中
猜你喜欢
- 【Vue】Vue中字符串数组和对象常用方法介绍
- 在Vue中,数组和字符串是我们最常处理的数据类型。Vue提供了响应式系统,可以自动跟踪数组和对象的变化,并响应式地更新DOM。在Vue中,您可以像在任何JavaScript应用程序中一样操作这些数据类型。下面时整理的Vue中字符串 数组 以及对象的常用操作方法。一.数组方法1.增删改: unshift、push、splice、shift、pop、splice、slice 1.1.unshift:在数组的头部添加内容// 数组.unshift("添加的值")
- 【Vue】Vue3项目filter.js组件封装
- 1、element-plus(el-table)修改table的行样式export function elTableRowClassName({ row, rowIndex }) { if (rowIndex % 2 != 0) { return 'default-row' &nb
- 【Vue】Antd Pro Vue的使用(八) —— 表单组件的常用配置
- 1、清除配置allow-clear在ant design react组件中,表单组件默认都有清除按钮(输入框右侧的小黑叉号),在vue组件中需要自己配置,即给组件加上allow-clear属性并且所有组件都支持这个属性,a-input、a-select、a-textarea、a-date-picker等都支持<a-form-item label="用户名"> <a-input
- 【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
- 【VUE】如何查看前端的vue项目是vue2还是vue3项目
- 1. 检查package.json文件在项目的根目录下,打开package.json文件,查找dependencies或devDependencies部分中的vue条目。版本号将告诉你是Vue 2还是Vue 3。例如:Vue 2.x: "vue": "^2.x.x"Vue 3.x: "vue": "^3.x.x"2. 使用Vue Devtools如果项目正在运行,并且你已经安装了Vue Devtools(Vue开发者
- 【Vue】Antd Pro Vue的使用(二)—— 全局配置及登录
- 1. 默认语言设置 Antd Pro Vue安装好之后,默认使用的是英文,我们需要把它设置为中文简体。找到/src/core/bootstrap.js文件,把最后一行 en-US 修改为 zh-CN,然后一定要清除浏览器缓存,修改才能生效修改后修改后的页面2. 请求服务端接口Antd Pro Vue封装好的有请求方法,在/src/api/文件夹,我们把自己的接口写到这里面就可以任意调用。Antd Pro Vue安装好之后,默认使用的是mock数据,我们要使用自己的接口,要把mock去掉
- 【Vue】vue3比vue2好在哪里
- vue 3 优于 vue 2 的关键优势包括:性能提升:响应式系统重写,优化更新速度虚拟 dom 优化,提高渲染效率代码组织和可维护性:组合式 api,提升可维护性teleport 和 suspense,提高代码灵活性和可读性开发者体验:更好的调试工具,简化调试过程typescript 2.7 支持,增强代码提示和类型检查Vue 3 与 Vue 2 的优势对比核心性能提升响应式系统重写:Vue 3 引入 Reactivity API,优化了响应式系统的性能,提升了更新速度。虚拟 DOM 优化:采
栏目分类全部>