Vue3
文章平均质量分 88
CaRuJan
这个作者很懒,什么都没留下…
展开
-
仿京东 项目笔记1
项目代码1关闭eslint校验工具vue.config.jssrc文件夹简写方法,配置别名因为项目大的时候src(源代码文件夹):里面目录会很多,找文件不方便,设置src文件夹的别名的好处,找文件会方便一些在文件根目录下,跟vue.config.js同级目录下,新建jsconfig.json文件,[@代表的是src文件夹]创建的vue2项目,默认是有jsconfig.js文件,文件配置选项说明,可参考这个blog路由分析 Vue-Router前端路由:K即为URL(网络资源定位符原创 2023-09-03 18:45:05 · 804 阅读 · 0 评论 -
仿京东 项目笔记2(注册登录)
api/index.jsstore/user.js1.2 Vue开发中Element UI的样式穿透1.2.1 ::v-deep的使用参考::v-deep的使用在 vue 项目的开发过程,使用了 ElementUI 组件且样式 style 使用了 scoped 属性,当想要修改组件样式,发现直接修改不了,需去掉 scoped 属性或者使用深度选择器才能修改成功。去掉scoped的话又会影响全局样式,针对这种情况,可以使用深度作用选择器(即样式穿透)1、当项目中使用的 css 原生样式 ,需要使用 >原创 2023-09-03 18:44:37 · 1891 阅读 · 2 评论 -
Vue全家桶(五):Vue3快速上手
打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking…Composition API(组合API)新的内置组件其他改变官方文档:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create3.2 使用 vite 创建官方文档:https://v3.cn.vuejs.org/guide/installation.ht原创 2023-06-21 10:16:25 · 4970 阅读 · 0 评论 -
Vue全家桶(四):Vue Router 路由
Vue的一个插件库,专门用来实现SPA应用原创 2023-06-18 21:05:58 · 1083 阅读 · 0 评论 -
Vue全家桶(三):Vuex状态管理(State、Getters、Mutations、Actions)
专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 Vue 应用中多个组件的共享状态进行集中式的管理 (读/写),也是一种组件间信的方式,且适用于任意组件间通信。Vuex Github: https://github.com/vuejs/vuex处理大量的需要在组件间传递的数据,直接定义一个全局的data属性保存就行了。如果我们的页面比原创 2023-06-17 10:47:29 · 3002 阅读 · 0 评论 -
Vue全家桶(一):Vue基础+Vue-Cli+Vue组件化+过渡动画
Vue是一套用于构建用户界面的渐进式框架。渐进式就跟这个图片一样,开发可以根据需求,逐渐递增所要的方式,但每个方式有不是依靠行特别强Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。库是一个模块,而Vue是一套架构,会基于自身特点向用户提供一套相当完整的解决方案,而且控制权在框架本身;对项目的侵入性较大,使用者要按照框架所规定的某种特定规范进行开发,项目如果需要更换框架,则需要重新架构整个项目。响应式的数据绑定:当数据发生改变,视图可以自动更新,可以不用关心dom操作,而专心原创 2023-06-16 15:30:04 · 4251 阅读 · 1 评论 -
Vue全家桶(二):Vue中的axios异步通信
从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API [JS中链式编程]拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF(跨站请求伪造)使用axios需要下载库联系阅读:前端跨域(待更新)原创 2023-06-16 13:14:35 · 1629 阅读 · 0 评论 -
09Vue3-Vuex的Moduls模块划分和文件拆分
Module由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:...原创 2021-05-26 18:17:37 · 808 阅读 · 0 评论 -
08Vue3-Vuex的Action异步处理
actions异步处理Home.vue<template> <div class="home"> <h2>使用全局的状态管理</h2> <h3>Num:{{$store.state.num}}</h3> //Actions异步处理 <button @click="cnum">Action</button> <h3>state中的平方{{vuex原创 2021-05-18 01:14:51 · 1592 阅读 · 0 评论 -
07Vue3-Vuex中计算数学getters应用
gettersHome.vue<template> <div class="home"> <h2>这是在单页模板中应用</h2> <h3>count:{{count}}</h3> <h3>计算属性:{{mypow}}</h3> <button @click="count--">-</button> <button @click="cou原创 2021-05-18 00:21:50 · 769 阅读 · 1 评论 -
06Vue3-Vuex的状态管理
Vuex的状态管理Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。就是一个加强版的data!在单页应用中会有一个data函数,管理当前应用的状态。处理大量的需要在组件间传递的数据,直接定义一个全局的data属性保存就行了。如果我们的页面比较简单,切记千万不要没事找事引入Vuex,我们使用Vuex是因为项目变得复杂之后,有很多数据需要在父组件、子组件和孙组件之间传递,处理起来很繁琐,于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西,也是响应式什么情况需要使用Vuex管原创 2021-05-17 22:13:22 · 327 阅读 · 2 评论 -
06Vue3-Vue路由笔记
路由基本用法文件目录结构route->index.js配置文件解读import { createRouter, createWebHistory } from 'vue-router'//引入组件import Home from '../views/Home.vue'import User from '../views/User.vue'//等价于//const Home = () => import('../views/Home.vue')//const About = (原创 2021-05-15 01:51:11 · 762 阅读 · 3 评论 -
05Vue3-Vue中使用axios异步通信
Vue使用axios向服务器请求数据<template> <div class="footer"> <ul> <li v-for="(item,index) in links" :key="index"> <a href="item.url">{{item.name}}</a> </li> </ul> </div></templ原创 2021-04-10 11:21:11 · 1229 阅读 · 0 评论 -
04Vue3-组件化开发
组件基础组件基本实例App.vue<template> <div> <span style="color: blueviolet">App.Vue</span> </div> <HelloWorld></HelloWorld></template><script>import HW from './components/newHelloWorld'export de原创 2021-04-09 16:47:08 · 397 阅读 · 0 评论 -
02Vue3-Vue-cli(Vue脚手架)
Vue-CLI (Command Line Interface)Vue-CLI 是Vue官方提供的脚手架工具默认已经帮我们搭建好了一套利用Webpack管理vue的项目结构命令安装:npm install -g @vue/cli检查版本:vue --version创建项目:vue create 项目名称选择Vue3,默认安装插件目录结构文件名说明dist存放使用npm run build打包的项目文件node_modules存放项目的依赖包public原创 2021-04-06 12:11:06 · 478 阅读 · 0 评论 -
03Vue3-模板语法
文章目录模板语法1. 插值操作2. 计算属性3. 事件监听4. 条件渲染5. 列表渲染6. v-model模板语法应用——简易购物车模板语法1. 插值操作插值:{{}}双大括号里支持表达式,如:{{ number + 1 }} {{ ok ? ‘YES’ : ‘NO’ }} {{message.split(’’).reverse().join(’’)}}指令:v-(在{{}}和v-指令进行数据绑定时,支持js单个表达式)<p v-once>{{msg}}<原创 2021-04-08 11:28:22 · 738 阅读 · 0 评论 -
01Vue3-认识Vue
认识VueVue是一套用于构建用户界面的渐进式框架。渐进式就跟这个图片一样,开发可以根据需求,逐渐递增所要的方式,但每个方式有不是依靠行特别强Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。库是一个模块,而Vue是一套架构,会基于自身特点向用户提供一套相当完整的解决方案,而且控制权在框架本身;对项目的侵入性较大,使用者要按照框架所规定的某种特定规范进行开发,项目如果需要更换框架,则需要重新架构整个项目。Vue的两核心响应式的数据绑定:当数据发生改变,视图可以自动更新原创 2021-04-05 20:56:42 · 250 阅读 · 0 评论