vue学习笔记
文章平均质量分 69
杨乐多dreamer
前端菜鸟的进阶笔记
展开
-
Vuex初始化
1、Vuex是一个专为Vue.js应用程序开发的状态管理模式。2、在开发中遇到了一种能够高效管理Vuex的初始化方式。在此记录下来3、目录结构:src/store4、文件内容:(1)state.js(2)getters.js(3)mutation-types.js(4)mutations.js(5)actions.js在初始化项目的时候,该文件一般是空的,不影响对Vuex的使用,当需要对mutations封装时,可以修改此文件(6)index.js5、在main.js中注入...原创 2022-06-07 21:44:09 · 1280 阅读 · 0 评论 -
vue3学习笔记(二)
vue3学习笔记(二)其它 Composition APIshallowReactive 与 shallowRefreadonly 与 shallowReadonlytoRaw 与 markRawcustomRefprovide 与 inject(注入)其它 Composition APIshallowReactive 与 shallowRef1、 shallowReactive只处理对象最外层属性的响应式(浅响应式)import { shallowReactive } from "vue"原创 2022-05-22 16:29:23 · 288 阅读 · 0 评论 -
vue3学习笔记(一)
学习笔记vue3项目的创建1、 使用 vue-cli 创建2、 使用 vite 创建vue3项目内容 与 vue2的差异vue3项目的创建1、 使用 vue-cli 创建## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建vue create vue_test## 启动cd vue_testnpm run serve2、 使用 vite 创建原创 2022-05-21 19:41:54 · 304 阅读 · 0 评论 -
后台管理系统案例
总结1、某个html元素 折叠展开时显示的效果不同 如何设置? <h3>{{isCollapse ? '后台' : '通用后台管理系统'}}</h3>原创 2022-05-18 16:29:36 · 855 阅读 · 1 评论 -
vuex的使用
1、src下新建 store/user.js(用不同的js文件存放不同的数据)import Cookie from 'js-cookie'export default{ state:{ token:'' }, mutations:{ setToken(state,val){ state.token = val Cookie.set('token',val) }, //原创 2022-05-18 16:27:01 · 77 阅读 · 0 评论 -
echarts的封装
1、 新建Echarts.vue<template> <div ref="echart"></div></template><script>import * as echarts from 'echarts'export default { props:{ //接收参数 isAxisChart:{ //判断是柱状图/折线图,还是饼图 type:Boolean,原创 2022-05-18 16:18:16 · 3400 阅读 · 1 评论 -
axios的二次封装
1、在src下新建config/index.js根据当前是开发环境还是生产环境来指定请求的基础路径export default{ baseUrl:{ dev:'/api/', //开发环境 pro:'' //生产环境 }}2、在src下新建api/axios.jsaxios相关配置import axios from "axios"import config from '../config'// 根据当前是开发模式还是生产模式原创 2022-05-18 15:48:32 · 177 阅读 · 0 评论 -
电商项目实战总结
1、async与await(1)登录验证功能login(){ this.$refs.loginFormRef.validate(async valid => { if(!valid) return // 如果不加await,result是一个promise对象。加上之后result是promise 成功的值,包括需要获取的data // const result =await this.$http.post('login', this.login原创 2022-04-23 19:02:16 · 1802 阅读 · 0 评论 -
vue学习笔记(五)之 Vue UI组件库
Vue UI组件库移动端常用 UI 组件库PC 端常用 UI 组件库Element使用一提到组件库,需要考虑两个问题:1、基于哪个框架? Vue、React。。。2、PC端还是移动端?移动端常用 UI 组件库Vant :https://youzan.github.io/vantCube UI: https://didi.github.io/cube-uiMint UI :http://mint-ui.github.ioPC 端常用 UI 组件库Element UI: https://原创 2022-04-11 19:47:21 · 217 阅读 · 0 评论 -
vue学习笔记(四)之路由
路由简介1、vue-router 的理解2、对 SPA 应用的理解简介1、vue-router 的理解vue 的一个插件库,专门用来实现 SPA 应用2、对 SPA 应用的理解单页 Web 应用(single page web application,SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面,只会做页面的局部更新。数据需要通过 ajax 请求获取...原创 2022-04-11 18:53:57 · 504 阅读 · 0 评论 -
vue学习笔记(三)之vuex
vuex简介简介概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应 用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方 式,且适用于任意组件间通信。Github 地址: https://github.com/vuejs/vuex...原创 2022-04-10 15:58:57 · 938 阅读 · 0 评论 -
用vuex实现求和案例
1、index.js: // 该文件用于创建vuex中最为核心的store // 引入vue import Vue from 'vue' // 引入vuex import Vuex from 'vuex' // 使用vuex Vue.use(Vuex) // 准备actions,用于响应组件中的动作 const actions = { // jia(context,value){ // context.commit('JIA',value) //原创 2022-04-09 19:38:44 · 1101 阅读 · 0 评论 -
vue2学习笔记(二)
vue学习笔记(二)组件的自定义事件全局事件总线(GlobalEventBus)消息订阅与发布组件的自定义事件1、子组件向父组件传递数据的方式(1)通过父组件给子组件传递函数类型的props实现:子给父传递数据 //App.vue <School :getSchoolName="getSchoolName"/> methods: { getSchoolName(name){ console.log('App收到了学校名:',name) }, }原创 2022-04-08 20:59:03 · 779 阅读 · 0 评论 -
todoList案例
1、实现,所有的复选框选中时,全选前的复选框也变成选中 <!-- v-model默认收集的就是value值。 --> <input type="checkbox" v-model="isAll"/>computed: { isAll:{ get(){ return this.doneTotal === this.total && this.total > 0原创 2022-04-08 17:07:06 · 373 阅读 · 0 评论 -
vue2学习笔记(一)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录Vue学习笔记一、Vue简介1、vue特点2、与其它 JS 框架的关联3. Vue 周边库二、初识Vue1、新建Vue实例2.阻止生成生产提示3、hello实例Vue学习笔记一、Vue简介1. 动态构建用户界面的渐进式 JavaScript 框架 2. 作者: 尤雨溪1、vue特点遵循 MVVM 模式编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发它本身只关注 UI, 也可以引入其它第三方库开发项目.原创 2022-04-07 18:36:25 · 491 阅读 · 0 评论