vue3
smily_word
前端开发,PC端:vue2+Elment vue3+Elment Plus 若依vue2 若依vue3,移动端:vue3+vant
展开
-
vue3,移动端h5项目之间的交互
适用场景:最近做项目,自己的项目需要和同事进行项目交互,因为都是h5项目,使用location.href打开他的项目链接。数据交互之前用的vuex,但发现vuex的数据在项目切换后会丢失,后来发现使用localStorage能进行项目间的数据交互。代码简单示意如下:1、打开其他项目的链接:location.href = state.baseURL + '/项目名/#/?链接所需参数=' + 链接参数2、使用localStorage.setIt原创 2021-12-22 15:46:25 · 838 阅读 · 0 评论 -
vue3路由配置
1、先看看package.json文件,是不是安装了vue-router,如下图,因为我安装了所以有2、如果没有安装,就使用命令npm install vue-router@/next --save下载vue-router,因为是vue3,要使用vue-router4.0.0以上版本npm install vue-router@/next --save3、在项目src文件夹下,新建一个route文件夹,route文件夹下新建index.js文件,如下图4、index.js代码如下.原创 2021-12-03 16:37:33 · 2375 阅读 · 1 评论 -
vue3使用vuedraggable实现拖拽
1、npm i vuedraggable -S,使用这个命令,vue3会报错,如下图2、使用npm uninstall vuedraggable -S 卸载,再使用npm i -S vuedraggable@next下载最新版3、vue使用代码如下:<template> <div> <h1 class="title">拖拽</h1> <draggable class="wrapper" .原创 2021-12-02 17:58:53 · 2628 阅读 · 0 评论 -
vue3使用watch
vue3中使用watch代码如下<template> <div> {{isShow}} </div></template><script>import { reactive, onMounted, toRefs, watch} from 'vue'export default { name:'files', props: { isShow:Boolean },原创 2021-12-02 16:27:31 · 814 阅读 · 0 评论 -
vue3使用computed
vue3使用computed,如下代码块:<template> <div> {{showTypeBy}} </div></template><script>import { reactive, toRefs, computed, onMounted } from 'vue'export default { name: 'demandTypePicker', props: ['showType'], se原创 2021-12-02 16:15:00 · 876 阅读 · 0 评论 -
vue3使用vuex
一、项目的src文件夹下,新建一个store文件夹,在store文件下新建一个index.js文件,如下图二、 index.js代码结构如下图:1、导入createStore;2、定义一个store对象;3、导出store三、定义vuex变量和添加修改vuex变量的同步、异步方法import { createStore } from 'vuex'const store = createStore({ // 定义vuex保存的值 state: { loginId: '原创 2021-12-01 15:52:51 · 1385 阅读 · 0 评论