- 博客(68)
- 收藏
- 关注
RSS订阅原创 vue3知识点
ref定义 基本类型 对象类型 解构赋值(需.value)reactive 对像类型 解构赋值失去响应性refreactive若是想把{name:'345'，age:120} 赋值给num或者toRefs使reactive中的值都转换成单个ref对象具有响应式let {name,age} = toRefs(num) 转换成的是 let name = ref('') let age = ref()
2025-12-18 16:20:47
772
原创 pinia与vuex
1 自动更新视图：响应式数据在变化时会自动触发Vue组件的重新渲染，确保UI与状态同步。例如，当store中的count增加时，使用{{ count }}的模板会自动更新显示。3 支持Vue3响应式系统：Pinia与Vue3的响应式系统深度集成，通过reactive包装store。2 解构保持响应性 ：直接解构store对象会破坏响应性。4 优化性能：响应式系统能高效追踪依赖关系，避免不必要的渲染。如果使用toRefs会把store中的所有都变成响应式的。为什么要把数据搞成响应式的？
2025-12-17 17:37:09
375
原创 Eslint 用法
设置 extends:[“plugin:vue/vue3-essential”,“@vue/eslint-config-typescript”]目前还没法验证vue文件的语法 会直接报错 因为出现了 template标签 解决方案：npm i eslint-plugin-vue。安装eslint插件 1 ctrl+shift+p —> Eslint:fix all suto-fixable。设置 extends:[“plugin:vue/vue3-essential”]
2025-12-17 15:14:40
294
原创 第三方插件 unplugin-icons
报错的话 cannt find module 需要配置’unplugin-icon/types/vue’npm i @iconify/json 安装图标集。npm i @iconify/json 安装图标集。3 图标放进对应目录assets 文件夹下。2 nuxt.config.ts中设置。2 配置 unplugin-icons。
2025-12-17 14:11:27
167
原创 vue-cli3.0创建项目相关
创建项目使用步骤：npm i -g @vue/cli//基于交互式命令行的方式，创建新版vue项目vue create my-project//基于图形化界面的方式，创建新版vue项目vue ui//基于2.x的旧模板，创建旧版vue项目npm i -g @vue/cli-initvue init webpack my-project脚手架的自定义配置vue.config.js“vue”:{ "devServer":{ "port": "8888"，//配置
2021-04-12 13:23:52
161
原创 webpack基础
webpack是一种前端构建工具，叫静态模块打包工具，所有得构建工具都是基于nodejs平台运行得，模块化采用common.jswebpack特点：1，能处理js,json文件不能处理css,img资源2，生产环境和开发环境能将es6模块化编译成浏览器识别得模块化，3，生产环境比开发环境多一个压缩js代码，所以体积小例如：前端引入JQ import $ from 'jquery', import './index.less',因为浏览器不能识别less,需要使用构建工具转换成浏览器识别得cssj
2021-04-12 11:43:33
205
原创 vue-route
vue-routevue-route详解基础用法//被vm实例所控制的区域<router-link to="/user">user</router-link>//路由占位符<router-view></router-view>//创建路由实例对象const router = new VueRouter({//所有的路由规则 routes:[ {path:'/',redirect:'/user'}, //路由重定向 {
2021-04-12 11:23:25
243
原创 Fetch与axios对比用法
fetch请求参数get请求方式的参数传递特性： 更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版 。基于promise实现常用配置选项method:HTTP 请求方法，默认GET(GET，POST，PUT，DELETE)body:HTTP的请求参数headers：HTTP请求头默认为{}1，fetch('/abc?id=123').then(data=>{//此处： 返回的是promise对象分为两种情况//1 text() 属于fetchAPI的一部分，返回
2021-04-12 10:03:15
344
原创 URL格式总结
url地址格式1，传统形式的url格式： schema://host:port/path?query#fragmentschema:协议，例如http，https,ftp等host: 域名或者ip地址port: 端口 http默认端口80 可以省略path: 路径，query: 查询参数 fragment: 描点（哈希Hash）用于定位页面的某个位置例如： 1 http://www/itcast.cn 2 http://www/itcast.cn/jsva/web 3 http:/
2021-04-12 09:22:17
850
原创 angular8 rxjs，动画
rxjs 异步编程 类似promise第三方模块 import {Observable} from 'rxjs' 封装 getRxjsData(){ return new Observable((ob)=>{ settimeout(()=>{var user="123" ob.next(user)},2000) ...
2020-04-21 14:33:47
291
原创 ionic4 轮播图ion-slides，日期控件ion-datetime，侧边栏ion-menu
slide轮播图 依赖swiper轮播基础html中<ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="sun()"> <ion-slide> <h1>Slide 1</h1> </ion-sli...
2020-04-21 11:17:33
385
原创 ionic4 ion-button，radio双向数据绑定，checkbox双向数据绑定，select 双向数据绑定，searchbar组件，segment组件
ion-button<ion-button expend="block/full" fill="clear/outline" size="large/small" mode="ios/md" >expend="block/full" 控制宽度 有无圆角fill="clear/outline" 设置背景填充size="large/small"...
2020-04-21 10:35:42
935
原创 ionic4 自定义公共模块，共享组件
1 创建组件及模块ionic g module module/slideionic g component module/slide2 公共模块中暴露对应组件import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { SlideComponent } ...
2020-04-21 09:28:08
382
原创 angular8 路由相关
路由使用前提1 创建组件2 引入组件(app.module.ts)3 app.routing.ts中引入组件4 配置路由路由配置const routes:Routes=[{path:'home',component:HomeComponent},{path:'news',component:NewsComponent},{path:'**',redirectTo:'home'},...
2020-04-21 09:12:10
352
原创 ionic1升级到ionic4 需要做的
版本的升级要做的1 升级node.jswindow 下升级 需要下载最新的安装包 覆盖安装linx 下 直接 npm i -g n --forcen --stable2 安装依赖npm install -g @ionic/cliionic start myApp tabsionic serve3 增加模块页面ionic generate page home...
2020-04-20 16:58:47
447
原创 angular8请求 公共IP
内置模块 HttpClientget请求app.module.tsimport {HttpClientModlue} from "@angular/common/http"imports:[HttpClientModule]用到的地方引入HttpClientimport {HttpClient } from "@angular/common/http"constructor(pu...
2020-04-20 16:31:39
543
原创 angular8 父子组件之间的通信 @ViewChild @Input
@ViewChild 在父组件中调用子组件头部组件用到新闻组件中news<app-header #header></app-header><button (click)="getChildClick()">new.tsimport {ViewChild} from "@angular/core"@ViewChild('header') heade...
2020-04-20 15:34:47
316
原创 angular8数据持久化 获取DOM节点
服务 localstorage1 创建服务ng g service services/storage2 app.modules.t中引入配置import {StorageService} from './services/storage.service'provides:[StorageService] 3 在使用的地方import {StorageService} from ...
2020-04-20 15:10:37
534
原创 angular8组件新增，基本语法，双向数据绑定
angular81 新增组件创建 ng g component components/news引入 import NewsComponent from '../../components/news'使用 <app-news></app-news>2 生明变量public private protected any string 等p...
2020-04-20 14:50:27
807
原创 ionic android升级错误 exposed beyond app through Intent.getData()
应用内自动升级，下载安装包后抛出异常，先贴个错误错误信息Log:android.os.FileUriExposedException: file:///storage/emulated/0/aiyou.apk exposed beyond app through Intent.getData()问题分析：1.版本不支持修改platforms>android中的AndroidMa...
2020-03-23 14:08:29
359
原创 Cordova实现文件创建和读写操作（支持Android和IOS等）
Cordova实现文件操作，本篇文章讲述的是在IOS和Android上实现以下两种需求：1，创建文件夹和文件，从数据库获取数据并写入到文件；2，获取指定目录文件夹下文件，并读取文件数据；先上效果图：创建文件夹和文件，从数据库获取数据并写入到文件获取指定目录文件夹下文件，并读取文件数据进入正题，下面是具体实现过程：文件操作使用了cordova-plugin-file插件，插件地址：ht...
2020-02-18 09:25:38
767
转载 ionic1 页面html渲染完成之后函数封装
ionic1 页面html渲染完成之后函数封装html<ul> <li ng-repeat="item in items" on-finish-render="callMethod()"> dummy Text </li></ul>app.js定义服务指令//angularjs渲染完执行 .directive('o...
2019-07-05 16:49:35
333
原创 git的使用
git 使用方法git 创建一个分支 git pull 拉取线上分支git checkout 分支名 进入此分支git status 查看状态git add. 分支上提交git commit -m'123'git pushgit checkout master 切换主分支git merge origin/分支名git push如果分支代码忘记...
2019-06-21 10:00:19
180
转载 ionic1特定页面隐藏tabs
html<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}"></ion-tabs>js.run(function ($rootScope) { $rootScope.$on('$stateChangeS...
2019-06-17 14:59:18
204
原创 ionic1 当用户上滑下滑时对应得header得显示与隐藏
html<div id="AreaInfo" on-swipe-up="onSwipeUp()" on-swipe-down="onSwipeDown()"></div>js//通过areaTemp来控制class类得显示隐藏 $scope.areaTemp = false //当用户上滑得时候 $scope.onSwipeUp = functio...
2019-06-17 14:42:39
233
原创 ionic项目打包ios及上线所遇到得问题
修复电话字体修复电话字体，直接另起一行进行设置，否则在原有的name，content下设置无效<meta name = "format-detection" content = "telephone=no">iPhone X底部适配/*ionic适配iPhone X*/@supports (bottom: env(safe-area-inset-bottom)) { ...
2019-04-30 09:08:02
149
原创 ajax
1 远古时代的ajax 做无刷新请求方法1. http协议 204 返回表示无内容，导致后台请求 前端页面不刷新header(‘Http/1.1 201 No Content’) 当页面收到204时 页面不做跳转方法2 img src 请求后台 var hh = document.createElement('img') 创建img标签 hh.setAttribute('s...
2019-04-29 16:04:00
94
原创 angular7.0用法
一 app.modlue.ts的各个参数@NgModule declarations配置当前项目运行的组件imports 配置当前模块运行依赖的其他模块providers 配置项目所需的服务bootstrap 根组件二 创建组件1 ng g component component/header2 使用的时候直接 <app-header></app-h...
2019-04-11 17:03:59
433
原创 ionic3滑动菜单的使用方法
1 先引入swiper<link rel="stylesheet" href="assets/swiper/css/swiper.min.css"><script src="assets/swiper/js/swiper.min.js"></script>2 创建页面模板ionic g page pagemenu13 将pagemenu1引入到对应...
2019-04-11 14:30:35
134
原创 ionic1 滑动表格
1 相关html <div> <div class="biaotou" style="display: flex"> <div class="heads"> <span>姓名</span> </div> <div cl...
2019-03-29 10:04:35
415
原创 ionic3 segments 用法
描述 通过次级导航栏 点击对应的按钮 通过对应的按钮 点击传递的参数来显示哪个content下的内容1 相关html<ion-header><ion-toolbar no-border-top> <ion-segment [(ngModel)]="pet"> 双向绑定pet <ion-segment-button ...
2019-03-22 09:53:05
110
原创 ionic3 searchbars用法
1 相关html<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> <ion-list> <ion-item *ngFor="let item of items"> {{ item }} </ion-item> </ion-...
2019-03-22 09:35:10
657
原创 ionic3 Radio的使用
1 相关html(submit)=“doSubmit($event)” 提交函数[formGroup]=“langForm” 表单组<form (submit)="doSubmit($event)" [formGroup]="langForm"> <ion-list radio-group formControlName="langs"> &l...
2019-03-22 09:14:43
172
原创 ionic3 Form表单的使用
1 相关Html<form (submit)="processForm()" [formGroup]="form"> <ion-list> <ion-item> <ion-input formControlName="firstName" type="text" placeholder="First Name"&g...
2019-03-22 09:11:17
197
原创 ionic3 subtabs使用方法
图片效果：1 具体用法：<ion-tabs SelectedIndex="2"> <ion-tab [root]="tab3Root" tabTitle="" tabIcon=""></ion-tab> 定义样式 <ion-fab bottom center style="border-top: 0.55px solid rgba...
2019-03-21 10:27:42
101
原创 ionic3 sliders轮播图相关知识点
相关html<ion-slides pager (ionSlideTap)="clickItem()" (ionSlideDidChange)="slideChange()" (ionSlidePrevEnd)="preChange()" (ionSlideNextEnd)="nextChange()"> <ion-slide style="background-c...
2019-03-19 14:36:59
162
原创 ionic3权限用法
1 安装cordova plugin add cordova-plugin-android-permissionsnpm install --save @ionic-native/android-permissions2 在app.module.ts导入模块import { AndroidPermissions } from '@ionic-native/android-permissi...
2019-03-15 14:39:56
179
原创 elementui使用
安装：npm i element-ui -s下载最新资源下载相关文件<!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><!-- 引入组件库 --><script src="https://unpk...
2018-12-20 16:12:47
1163
1
原创 ionic Android iOS标题居中，tab在下部
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); $ionicConfigProvider.platform.android.navBar.alignTitle...
2018-12-13 10:48:41
201
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人