zwswood-CSDN博客

原创 vue3 组件复用时，路由参数改变，URL也变化了，但是页面数据不更新的解决办法

问题产生环境有一个网上商城的项目，主要涉及商品列表页(组件)，商品详情页（组件）在商品列表页中GoodsListItem.vue业务逻辑：展示商品的详情，点击商品时，跳转到商品详情页<template> <div class="goods-item" @click="itemClick"> <img v-lazy="product.cover_url" :alt="product.description"> &l

2021-05-24 18:43:26 5055 4

原创 26.Vuex在Composition API和非Composition API中结合Typescript的使用

Vue+TypeScript的项目中集成Vuex首先需要在vue项目中集成TypeScriptvue add typescript提示：如果配置玩ts后调用this.$store有警告信息，请重启IDE(vscode)，或者安装vue3的插件后重启IDE（vscode）修改store.js为store.ts重构store.ts中的代码在原来的store.js代码中需要加入官网提供的declare moduleimport { ComponentCustomProperties }

2021-05-18 17:10:23 314

原创 25.Vuex 结合 Composition API的使用

Vuex结合CompositionAPI使用Composition API中没有this.$store,可以使用useStore来替代import { useStore } from 'vuex'export default { setup () { const store = useStore() }}Composition API中访问state和gettersimport { computed } from 'vue'import { useStore } fro

2021-05-18 16:06:03 1417

原创 24.Vue状态管理Vuex

一、VuexVuex是一个专为Vue.js应用程序开发的状态管理模式。官网：https://next.vuex.vuejs.org/主要功能：Vuex可以实现Vue不同组件之间的状态共享（解决了不同组件之间的数据共享）可以实现组件里面的数据持久化Vuex的几个核心概念State 主要用于定义数据Getters 与前面的计算属性类似，用于vuex中计算属性Mutations 主要用于定义方法，改变state中的

2021-05-18 15:02:35 196 1

原创 23.Vue3.x中的路由(4) 路由嵌套

路由嵌套要实现以下效果：点击顶部News导航，显示News组件，点击左侧新闻列表，右侧显示NewsList组件，左侧保持不变点击增加新闻，右侧显示NewsAdd组件。此时，就需要用到路由嵌套（父子路由）和路由重定向了。示例代码：News.vue组件<template> <div class="content"> <div class="left"> <ul> <

2021-05-18 09:35:22 544 1

原创 22. Vue3.x中的路由(3) 路由模式、命名路由、路由重定向、路由别名

一、路由模式hash模式import{createRouter,createWebHashHistory} from 'vue-router'const router=createRouter({ history:createWebHashHistory(), routes:[ { path:'', compontents: }, { //...

2021-05-17 19:31:35 1372

原创 21.Vue3.x中的路由(2) 动态路由 get传值 js跳转路由

一、动态路由在route.ts中配置动态路由，传递参数需要在path后面加 “/:xxx”{ path:'/newscontent/:title', component:NewsContent}import NewsContent from "@/components/NewsContent.vue";// 配置路由const router=createRouter({ history:createWebHashHistory(), routes:[

2021-05-17 18:11:35 427

原创 20.Vue3.x中的路由(1) 路由配置

一、Vue3.x中的路由路由可以让应用程序根据用户输入的不同地址动态挂载不同的组件。https://next.router.vuejs.org/npm install vue-router@next二、路由的基本配置安装路由模块npm install vue-router@next --save新建组件(就是上一节的组件代码)components/Home.vue，components/News.vue,components/User.vue,在src目录下新建rout

2021-05-17 16:54:34 734

原创 19.Vue3.x中集成Typescript 使用Typescript

一、Vue3.x集成TypeScript# 1.Install Vue CLI,if it's not already installed（安装Vue CLI(如果还没有安装)）npm install --global @vue/cli# 2.Create a new project,then choose the "Manually select features" option(创建一个新项目，然后选择“手动选择功能”选项)vue create my-project-name# 3.If yo

2021-05-17 16:10:27 973 1

原创 18.Vue3.x Composition API 以及 Provide Inject

一、Provide Inject通常，当我们需要将数据从父组件传递到子组件时，我们使用props。想象一下这样的机构：你有一些深嵌套的组件，而你只需要来自深嵌套子组件中父组件的某些内容。在这种情况下，你任然需要将prop传递到整个组件链中，这可能会很烦人。对于这种情况，我们可以使用provide和inject对父组件可以作为其所有子组件的依赖项提供程序，而不管组件层次结构有多深。这个特性有两个部分：父组件有一个provide选项来提供数据，子组件有一个inject选项来开始使用这个数据。非组合是

2021-05-17 10:56:10 214

原创 17.Vue3.x Composition API

一、Composition API 的简单介绍Composition API 也叫组合式API，是Vue3.x的新特性。通过创建Vue组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点是不够的，尤其是当你的应用程序变得非常大的时候—想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。通俗的讲：没有Composition API 之前的Vue相关业务的代码需要配置到opti

2021-05-16 17:34:15 326

原创 16.Vue3.x Teleport、使用Teleport自定义一个模态对话框的组件

一、Vue3.x TeleportVue3.x中组件模板属于该组件，有时候我们想把模板的内容移动到当前组件之外的Dom中，这个时候可以使用Teleport表示teleport内包含的内容显示到body中<teleport to="body">内容</teleport>二、使用Teleport自定义一个模态对话框的组件新建子组件Modal.vue模态框组件说明：关闭按钮调用父组件的自定义方法：$emit(‘close-modal’)，实现关闭<template

2021-05-16 17:31:25 284

原创 15.Vue3.x中的Mixin实现组件功能的复用、全局配置Mixin

一、Vue3.x中的mixin介绍使用混入(mixin)提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。新建mixin/baseMixin.jsconst baseMixin = { data() { return { apiUrl: "https://www.baidu.com", }; }, met

2021-05-15 10:17:21 685 1

原创 vue安装sass-loader后运行报错

vue安装sass-loader后运行报 ERROR Failed to compile with 1 error error in ./src/components/News.vue?vue&type=style&index=0&id=293a9583&lang=scss&scoped=trueSyntax Error: TypeE

2021-05-15 09:27:52 627

原创 14.Vue3.x中全局绑定属性、使用Axios和fetchJsonp请求真实api接口数据、函数防抖实现百度搜索

一、Vue3.x中使用Axios请求远程真实Api接口数据https://github.com/axios/axios安装npm install axios --save或者yarn add axios或者cnpm install axios --save引入使用<template> <div class="home"> <button @click="getData">News组件获取数据</button>

2021-05-14 17:08:49 571

原创 13.Vue3.x中组件的生命周期函数（lifecycle）、 this.$nextTick、动态组件 keep-alive、Vue实现Tab切换

一、Vue3.x中组件的生命周期函数[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7d83ECRS-1620978127220)(D:\MyDocuments\Desktop\vue笔记\lifecycle.png)]LifeCycle.vue组件<template> <h2>生命周期函数演示</h2></template><script> export default {

2021-05-14 15:42:32 742 7

原创 12.Vue3.x自定义组件上面使用v-mode双休数据绑定以及 slots以及 Prop 的Attribute 继承、禁用 Attribute 继承

一、自定义组件使用v-model实现双休数据绑定v-model主要用于表单的双向数据绑定。现在学习一下v-model实现自定义组件的双向数据绑定。单个v-model数据绑定默认情况下，组件上的v-model使用modelValue作为prop和update:modelValue作为事件。我们可以通过向v-model传递参数来修改这些名称：<my-component v-model:foo="bar"></my-component>在本例中，子组件将需要一个foo p

2021-05-14 12:58:54 862

原创 11.Vue3.x组件自定义事件以及mitt 实现非父子组件传值

一、组件自定义事件实现子组件给父组件传值注意：Vue官方推荐始终使用kebab-case(短横线隔开式)给自定义事件命名Vue组件中camelCased (驼峰式) 命名与 kebab-case（短横线命名）在vue官网上有这样的一句话：“camelCase vs. kebab-caseHTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相>对应的 kebab-case (短横线隔开式) 命名：如果你使用字符串模

2021-05-14 10:31:56 531

原创 10.Vue3.x父组件主动获取子组件的数据和执行子组件方法、子组件主动获取父组件的数据和执行父组件方法

一、父组件通过$refs主动获取子组件的数据和执行子组件方法调用子组件的时候定义一个ref<v-child ref="child"></v-child>父组件主动获取子组件数据this.$refs.child.属性父组件主动执行子组件方法this.$refs.child.方法示例：子组件Header.vue<template> 我是Header组件</template><script> e

2021-05-14 09:09:14 3188 5

原创 09.Vue3.x中的单文件组件定义组件注册组件以及组件的使用

一、Vue3.x父子组件介绍组件可以拓展html标签，解决html标签构建运用的不足，Vue项目由一个一个的组件组成。src目录新建components目录，如果脚手架搭建的项目，默认会带有该目录，用来存放组件在components目录新建Home.vue(组件名称首字母大写)<template> <h5>{{ title }}</h5> <button @click="getTitle()">获取标题</button>

2021-05-13 15:12:23 620 1

原创 08.Vue3.x中的模块化以及封装Storage实现todolist 待办事项已经完成的持久化

一、Vue3.x中的模块化以及封装Storage使用dom内置对象Storage保存数据StorageAPI(摘自MDN Web Docs)作为 Web Storage API 的接口，Storage 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。如果你想要操作一个域名的会话存储，可以使用 Window.sessionStorage；如果想要操作一个域名的本地存储，可以使用 Window.localStorage。属性Storage.length 只

2021-05-13 10:38:45 255

原创 07.Vue3.x 实现一个完整的toDoList（待办事项）【前面知识综合练习】

一、Vue中集成Sass/Scss1.1 安装sass-loader node-sassnpm install -D sass-loader node-sass安装完启动项目如果出现"Syntax Error: TypeError: this.getOptions is not a function"的错误，可能是sass-loader版本太高卸载了重新安装低版本# 卸载当前sass-loadernpm uninstall --save sass-loader# 重新安装低版本npm

2021-05-13 09:57:15 819 1

原创 06.Vue3.x中使用JavaScript表达式、条件判断、计算属性和watch侦听

一、Vue3.x模板中使用JavaScript表达式直接用{{}}可以编写js表达式二、 v-if v-else v-else-if v-show1.v-if逻辑data(){ return{ flag:1 }}模板<p v-if="flag"> v-if falg=true</p>2.v-if v-else<div v-if="Math.ran

2021-05-13 08:44:00 904 1

原创 05.Vue3.x中$refs 取表单数据及数据双向绑定

获取表单的值在表单文本框总加入ref=“[名称]”这样的属性通过this.$refs.[名称].value获取逻辑export default { name: "", data() { return { peopleInfo:"", } }, methods: { doSubmit(){ console.log(this.$refs.age.value);

2021-05-13 08:41:12 3989 3

原创 04.Vue3.x中的事件方法详解、事件监听、方法传值、事件对象、多事件处理程序、事件修饰符、按键修饰符

事件对象有时候我们还需要在内联语句处理程序中访问原始Dom事件。你可以使用特殊$event变量将其传递给方法1.单个参数逻辑export default { name:"App", data() { return { msg:"你好Vue" } }, methods:{ eventFn(e){ console.log(e); // e.srcElem

2021-05-12 16:32:10 1736

原创 03.Vue3.x中的事件方法入门、模板语法模板中类和样式绑定

1.Vue3.x中的事件方法入门事件绑定使用@[事件名称]=""：例如@click,@mouseover,@keydown业务逻辑export default { name:"App", data() { return { msg:"你好vue" } }, methods:{ setMsg(){ this.msg="这是改变后的msg"; },

2021-05-12 15:27:44 230

原创 02.Vue3.x绑定数据、绑定html、绑定属性、循环数据

1.定义数据绑定数据使用{{}}方式绑定data里面的数据<template> <div> <h1>{{msg}}</h1> <p>{{userInfo.username}}----{{use<p v-html="html"></p> </div></template><script>export defa

2021-05-12 11:56:08 1501

原创 01.Vue3.x简介、搭建Vue3.x环境、创建运行Vue3.x项目、分析Vue3.x目录结构

项目搭建Vite地址：https://github.com/vitejs/vite通过vue-cli脚手架工具可以让我们快速搭建vue项目，目前vue提供两个脚手架，vue-cli与vite。一、通过Vue-cli，创建项目1.1、安装Vue-cli，在同一个电脑上面只需要安装一次yarn global add @vue/cli#ornpm install -g @vue/cli#orcnpm install -g @vue/cli如果那你上面没有安装过cnpm，可以通过下面命令安装：

2021-05-12 11:17:38 189

原创 10 装饰器方法装饰器方法参数装饰器装饰器的执行顺序

装饰器的执行顺序属性装饰器=>方法装饰器=>类装饰器如果有多个同类型的装饰器，先执行后面的function logClass1(params: string) { return function (target: any) { console.log('类装饰器1'); }}function logClass2(params: string) { return function (target: any) {

2021-05-12 09:55:38 140

原创 09 装饰器定义类装饰器属性装饰器装饰器工厂

装饰器装饰器：装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器。装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）。装饰器是过去几年中js最大的成就之一，已是es7的标准特性之一。类装饰器：类装饰器在类声明之前被声明（紧靠着类声明）。类装饰器运用于类构造函数，可以用来监视，修改或替换类定义。

2021-05-12 09:53:25 154

原创 08 命名空间命名空间块化

命名空间命名空间：在代码量较大的情况下，为了避免各种变量名相冲突，可以将相似功能的函数、类、接口等放置到命名空间内。同Java的包、.net的命名空间一样，TypeScript的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象。命名空间和模块的区别：命名空间：内部模块，主要用于组织代码，避免命名冲突模块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间。namespace A { interface Animal { name: str

2021-05-12 09:40:23 89

原创 07 TypeScript 模块以及模块化封装DB库封装类似Mongoose风格的类库

模块的概念模块的概念(官方)：关于术语的一点说明：务必注意一点，TypeScript 1.5里术语名已经发生了变化。“内部模块”现在称作“命名空间”。 “外部模块”现在则简称为“模块”，模块在起自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的类、变量、函数、接口等在模块外部是不可见的，除非你明确地使用export形式之一导出他们。相反，如果想使用其他模块导出的类、变量、函数、接口等的时候，必须要使用import形式之一导入他们。模块的概念(自己理解) 我们可

2021-05-12 09:22:18 236 1

原创 06 TypeScript类型、接口、类、泛型综合使用----封装统一操作MySql、MongoDB、MsSql的底层类库

ts类型、接口、类、泛型综合使用----ts封装统一操作MySql、MongoDB、MsSql的底层类库功能：定义一个操作数数据库的类库支持mysql、mssql、mongodb需求：mysql、mssql、mongodb功能一样，都有add、delete、update、get方法（CURD）注意：约束统一的规范、以及代码复用解决方案：需要约束规范所以要定义接口，需要代码重用所以用到泛型接口：在面向对象编程中，接口是一种规范的定义，它定义了行为和动作的规范泛型：通俗理解就是解决类、接口

2021-05-12 08:55:17 209

原创 05 TypeScript中的泛型

泛型软件工程中，我们不仅要创建一致定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。在像c#和java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。通俗理解：泛型就是解决类、接口、方法的复用性、以及对不特定数据类型的支持。// 下面的方法只能返回string类型function getData(val: string): strin

2021-05-12 08:49:02 95 1

原创 04 Typescript中的类类中的静态属性静态方法抽象类多态

es5中的静态属性、静态方法// es5中的静态属性，静态方法function Person(){ this.run=function(){ }}Person.name='哈哈哈';// 静态属性Person.run1=function(){// 静态方法}ts中定义静态属性和静态方法class Person{ name:string; constructor(name:string) { this.name=name;

2021-05-11 18:54:03 977 1

原创 04 TypeScript中的类类的定义继承类里面的修饰符

es5的类1.类的创建function Person() { // 2.构造函数里面声明属性及方法 this.name = '张三'; this.age = 20; // 实例方法 this.run = function () { console.log(this.name + '在运动'); }}2.原型链里面增加方法// 原型链上面的属性会被多个实例共享Person.prototype.sex = '男';//

2021-05-11 17:58:13 84

原创 03 Typescript 中的函数

函数的定义es5中函数的声明// 函数声明法function run(){ return 'run';}// 匿名函数var run2=function(){ ruturn 'run2';}ts中函数的声明// 函数声明法function run():string{ return 'zws';}// 匿名函数法let run1=function():string{ return 'zws';}// 调用run();run1();// 定义

2021-05-11 17:30:06 70

原创 02 Typescript 中的数据类型

TypeScript数据类型TypeScript中为了使编写的代码更规范，更有利于维护，增加了类型校验，在TypeScript中主要给我们提供了一下数据类型布尔类型(boolean)数字类型（number）字符串类型(string)数组类型(array)元组类型（tuple）枚举类型(enum)任意类型（any）null和undefinedvoid类型never类型布尔类型(boolean)let flag:boolean=true;flag=false;数字类型

2021-05-11 16:47:09 72 1

原创 01 TypeScript安装、开发工具

TypeScript介绍TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。TypeScript可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。目前TypeScript 已在Nodejs 、Angualr、React、Vue这些框架中广泛应用。TypeScript是为大型应用之开发而设计，作为一

2021-05-11 16:01:37 120

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

WPF显示Gif控件

WPF自适应可关闭的TabControl 标签

WPF漂亮的TabControl样式

C#语言规范3.0（微软官网）

c#版FTP自动上传工具源码

Jquery.validate插件使用方法

图片无缝循环特效示例下载

一次轮换多张图片效果

Form实现同一服务器下的SSO

空空如也