- 博客(111)
- 收藏
- 关注
RSS订阅原创 rem适配 自适应不同尺寸屏幕
let _rem; function remAdaptation() { var d = document.documentElement; var cw = d.clientWidth; _rem = d.style.fontSize = 16 * (cw / 375) d.style.fontSize = _rem + 'px' } window.addEventListener(('orientationchange' in.
2020-08-26 17:12:21
466
原创 2020-08-25 vant,stylus注意事项
vantvue移动端ui框架: vant 使用先安装： npm install vant -S引入css样式：import 'vant/lib/index.css';引入插件： 全部： import Vant from 'vant' Vue.use(Vant) 按需： import { ... ,Grid } from 'vant' Vue.use(Grid)stylusvscode中使用要安装 loader...
2020-08-25 18:22:05
243
原创 微信小程序1——文件结构
题外document.querySelector(‘video’).playbackRate = 3想播放成几倍,就把上边的3改成几,注册账号：z18649110177@126目前注册个人账号，功能会不全
2020-08-11 15:21:37
166
原创 el-tree获取选中的节点数据展示（不包含父节点）
<el-tree class="my-tree" ref="tree" :data="gridData" show-checkbox check-strictly // 严格遵守父子级互不关联 @check-change='getCheckedNode' node-key="id" :default-expanded-keys="[1]" :props="defaultProps"></el-tree>getCheckedNode(){
2020-05-14 16:30:41
3892
1
原创 element-ui el-tree 设置指定级别节点显示复选框el-checkbox
将一个选择框去掉，变成下图↓开始想到 选中第一个el-checkbox 隐藏.my-tree .el-tree-node__content label.el-checkbox:nth-child(1) { display: none;}但是这样写无效，选不到百度到一些大神通过修改elementui源码实现emm咸鱼不想看最后想到可以既然不能单独去掉父级的，那就先全部去掉，再给子级的加上↓.my-tree .el-tree-node__content label.el-checkbo.
2020-05-13 15:17:15
5761
3
原创 css+js 01
行、块盒行内元素：i，span，strong，del，ins，a，em行块盒元素：img，input块盒元素：div，h1-h6，p，ul，li一个页面不能存在多个title元素90deg：顺时针旋转90度百分比单位不一定都根据父级元素计算：line-height相对自身，position：fixed 相对视口图像格式：gif，bmp，jpg手动写动画最小时间间隔：16.7ms。【...
2020-03-05 22:27:40
151
原创 jQuery 之 niceScroll
niceScroll在 mounted 或 页面最尾处 使用1. 基本使用： $('dom').niceScroll()2. 自定义样式：$('dom').niceScroll({ cursorcolor: 光标颜色 cursorwidth: 光标宽度 cursorborder: 光标边框 cursorborderradius: 光标边框圆角 cursoropacity...
2020-01-13 09:14:41
272
原创 动画animation
animationanimation 是 以下属性的简写属性形式animation-name设置一个或多个要应用于元素的动画。 每个名称都是一个@keyframes规则，该规则设置动画序列的属性值。animation-duration指定一个动画周期的时长。animation-timing-function定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 <timi...
2020-01-13 09:14:05
133
原创 线性渐变liner-gradient()
liner-gradient()用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的<image>数据类型。提示：由于<gradient>数据类型系<image>的子数据类型，<gradien\t>只能被用于<image>可以使用的地方。因此，linear-gradient() 并不适用于backgr...
2020-01-10 16:20:49
605
原创 vue58 —— axios
网络模块封装—— 封装进行网络请求的第三方框架常见网络请求模块传统Ajax （基于XMLHttpRequest [XHR]）JQuery-AjaxJSONP – 非正式传输协议（主要解决跨域问题）Ajax直接请求普通文件存在跨域无权限访问的问题Web页面上调用js文件时则不受是否跨域的影响（不仅如此，凡是拥有”src”这个属性的标签都拥有跨域的能力。如<\script&g...
2019-11-30 22:34:26
168
原创 vue57 —— vuex 核心 & 数据响应式原理
vuex核心1. state单一状态树单一状态树： single sourse of truth ，也称单一数据源2. getters （类似与单个组件中的计算属性computed） more20(state){ return state.stu.filter(s => s.age > 20 ) }, length(state,getters){ ...
2019-11-30 16:00:33
1312
原创 vue56 —— vuex2 基本使用
vuex官网state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化“单向数据流” 简图：多个组件共享状态 ：Backend : 后端Frontend：前端Dispatch：发布Devtools：vue开发的一个浏览器插件。记录每次修改state的状态。（只能跟踪同步操作）在浏览器上安装6...
2019-11-29 17:18:13
128
原创 vue55 —— vuex1 初识
vuex的作用vuex是一个专为Vuejs应用程序开发的状态管理模式采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化vuex也集成到vue的官方调试工具 devtools extension，提供如 零配置的time-travel调试，状态快照导入导出等的高级调试功能需要在多个组件间共享的状态：用户的登录状态（token），用户名称、头像、地...
2019-11-29 14:33:50
146
原创 vue54 ——es6补充 promise
promise封装异步请求已setTimeOut为例用promise之前：回调地狱// 第一次网络请求代码 setTimeout(()=>{ console.log('第一次处理的代码'); console.log('第一次处理的代码'); console.log('第一次处理的代码'); // 第二次网络请求代码 ...
2019-11-28 22:34:44
93
原创 vue53—— TabBar 基本结构搭建
创建封装上图的TabBar自定义TabBar组件，在app中使用让TabBar处于底部，并设置相关样式tabbar中显示内容由外界决定： 定义插槽，flex布局平分tabbar自定义TabBarItem，可以传入图片文字—— a. 定义TabBarItem，且定义两个插槽：图片，文字 b. 两个插槽外层包装div，用于设置样式 c.填充插槽，实现底部tabbar效果...
2019-11-28 00:41:56
166
原创 vue52 —— keep-alive 和 router-link 以及 actived，beforeRouteLeave
keep-alive 是Vue里的一个内置组件，可使被包含的组件保留状态，或避免重新渲染两个属性： include， excludeinclude： 字符串或正则表达式，匹配的组件才会被缓存exclude： 字符串或正则表达式，匹配的组件都不会被缓存eg. 要设置多个时，加逗号，不能有空格<keep-alive exclude='User,Profile'> <...
2019-11-27 14:11:26
1364
原创 vue51 —— vue-router --- 全局导航守卫
导航守卫： 监听导航要求点击导航后，浏览器上显示对应导航名方法1，使用在对应导航组件内使用created()eg.Home.vue:export default { name: 'Home', created(){ document.title = '首页' } }方法2，导航守卫1. 在index.js中使用beforeEach() --前置守卫(guard)...
2019-11-27 13:21:25
130
原创 vue50 —— vue-router 参数传递
路由跳转参数传递：params， query向组件传递数据params类型配置路由格式： /router/:id传递方式：在path后面跟上对应的值传递后形成的路径：/router/abc， /router/123query类型 （数据多时使用合适）配置路由格式：/router，即普通配置传递的方式：对象中使用 query 的 key传递后形成的路径： /router?id...
2019-11-26 20:39:26
123
原创 vue49 —— vue-router -- 嵌套路由
嵌套路由：eg. 在home页面中，想通过/home/news. /home/message 访问一些内容一个路径映射一个组件，访问这两个路径也会分别渲染两个组件路径和组件的关系：实现步骤：创建对应的子组件，并且在路由映射中配置对应的子路由在组件内部使用 <router-view> 标签在src - components 文件夹下新建两个.vue文件，作为子组件...
2019-11-26 17:47:39
107
原创 vue48 —— vue-router-- 路由的懒加载
打包构建应用时，js包会很大，影响页面加载引用后直接使用：src - index.js：import Home from '../components/Home'import About from '../components/About'import User from '../components/User'Vue.use(VueRouter)const routes = [...
2019-11-26 17:10:06
146
原创 vue47—— 动态路由 ( :to='/user/ + userId' ; {{ $route.params.xxx }} )
需求： 跳转到user界面，url为user后面接id -----> …/user/userId—— 动态路由且要在user.vue中拿到在App.vue中的有关用户的信息User.vue:<template> <div> <h2>用户组件</h2> <p> 用户信息： 用户id...
2019-11-26 12:15:42
1024
原创 vue46 —— vue-router：router-link 补充
router-link默认最终渲染为a标签改变最终渲染： tag属性App.vue：<router-link to='/home' tag='button'>首页</router-link>tag=’标签名‘，最终渲染为设置的标签改pushState为replace： replace属性使前进后退不可使用<router-link to='/home' ...
2019-11-26 11:42:42
130
1
原创 vue45 —— vue-router 安装使用，修改路由默认路径，修改hash—>history
三大框架的路由实现Angular： ngRouterReact：ReactRouterVue：vue-routervue-routervue-router是Vue.js官方的路由插件，和vue.js是深度集成的，适合用于构建单页面应用基于路由和组件路由用于设定访问路径，将路径和组件映射起来在vue-router单页面应用中，页面路径的改变 就是 组件的切换安装和使用...
2019-11-25 23:05:16
1750
1
原创 vue44 —— vue-router(前提）-改变url不整体刷新- url的hash， h5 history的pushState，replaceState，go
改变url，但不进行整体的刷新1. url的hash控制台：location.hash = ‘xxx’url改变，但页面不会重新请求全套资源2. html5 的history模式2.1 pushState()pushState相当于入栈，back相当于出栈可以点浏览器的前后按钮，可返回上个页面2.2 replaceState()浏览器前后按钮不可用，不可返回到上个页面...
2019-11-25 21:48:17
341
原创 vue43 —— Vue-Router（前提紧要）-前/后端渲染，前后端分离，前/后端路由
后端路由阶段 : 后端处理url和页面之间的映射关系后端渲染早期页面使用后端渲染： jsp/php/c#.net…请求taobao.com请求taobao/nvzhuang.com解析url taobao.com解析url taobao/nvzhuang.com渲染好的页面taobao html,css渲染好的页面nvzhuang html,css用户页面服务器后台jsp技术,渲染页面:ht...
2019-11-25 21:09:03
389
原创 vue42(es6补充) —— 箭头函数
一，参数问题基本用法： 无参，无返回值 const fun = (参数列表) => {}放入两个参数 const sum = (num1,num2) => { return num1 + num2 }放入一个参数（可省略括号） const power = num => { return num * num...
2019-11-25 16:07:05
135
原创 vue41 —— cli3 配置文件查看和修改
查看、修改配置的三种方案：1. vue ui 可视化界面启动配置服务器： vue ui在终端执行 vue ui导入项目，管理项目相关配置插件只显示packag.json 中写 的插件可以安装新的插件，依赖，对webpack进行配置，运行项目等2. 隐藏的配置文件在 node_modules文件夹下的 @vue文件夹 下的 cli-server文件夹 下 有webpack.co...
2019-11-25 15:00:33
777
原创 vue38 —— runtime+compiler & runtime-only
vue程序运行过程：template —解析–> ast –编译–>render函数 --^virtual tree^–> UI在vue init webpack myproject 之后，有Vue build 选项： runtime compiler 和 runtime-only两种选择生成的项目区别，只在main.js中runtime compiler - ma...
2019-11-24 23:58:43
216
原创 vue37 —— vuecli2 目录结构
视频build 和 config 里都是配置文件，从package.json阅读..."dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js","build": "node build/build.js" //node xx.js , 可直接运行js文件src文件夹 放源码...
2019-11-24 19:46:02
267
原创 vue36 —— VueCLi2 初始化项目
PS D:\app1\vscode-space\vue\10-webpack> vue init webpack vuecli2testvuecli2test —— 项目文件夹名称，不可有中文,不能大写报错： vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.229.188....
2019-11-24 17:19:55
258
1
原创 vue35 —— Vue CLI 脚手架
CLIcommond line interface 命令行界面，俗称脚手架Vue Cli 中文网站Vue CLI官方发布的vue.js项目脚手架使用Vue CLI 可快速搭建 Vue开发环境 以及 对应的webpack配置使用前提1. Node脚手架会生成webpack配置，而webpack又依赖Node环境2. webpackVue.js官方脚手架工具就使用了webpack...
2019-11-24 16:07:29
92
原创 vue34 —— 配置文件的分离： 开发时需要 & 发布时需要
有些配置是开发时需要的，但发布后不需要有些是发布需要的，开发时不需要创建一个文件夹build，存放配置文件build下，建几个.js文件base.config.js —— 存放 开发时 和 发布时 都需要的配置prod.config.js —— 存放 发布时 需要的配置dev.config.js —— 存放 开发时 需要的配置安装webpack-merge ，合并配置文...
2019-11-24 15:14:52
179
原创 vue33 —— 搭建本地服务器
webpack提供一个可选的本地开发服务器该本地服务器基于nodejs搭建，内部使用express框架可实现让浏览器自动刷新显示修改后的结果。不用每次都npm run build把文件先放到内存中，浏览器从内存中直接读取。最后发布才把文件放到硬盘安装配置：npm install webpack-dev-server@2.9.1 --save-devmodule.exports ...
2019-11-24 12:20:28
461
原创 vue32 —— webpack- plugin
plugin ：插件，对某个现有框架进行扩展plugin 和 loader 区别loader：主要用于转换某些类型的模块，是一个转换器plugin：插件，是对webpack本身的扩展，是一个扩展器plugin 使用通过npm 安装需要的plugin （ 部分插件webpack已经内置，不必安装）在webpack.config.js中的plugins进行配置eg1. Ban...
2019-11-24 11:41:54
147
原创 vue31 ——开发中使用vue
开发中的Vue写法<div id = 'app'></div>这一块div标签内不放置任何代码所有代码写在vue实例的template属性中new Vue({ el: '#app', template: ` <div> <h2> {{message}} </h2> <button>按钮...
2019-11-23 23:27:43
94
原创 vue30 —— webpack配置vue
npm下载Vue通过npm下载Vue，而不是先将Vue下载到本地，再通过script标签引入 npm install vue --save引用：import Vue from 'vue'但是会报错：原因：Vue构建最终发布版本时，构建了两类版本runtime-onle —— 代码中不可以有任何templateruntime-compiler —— 代码中可以有temp...
2019-11-23 22:21:54
139
原创 vue29 —— loader（ es6转es5）
安装 babel-loader npm install babel-loader@7 babel-core babel-preset-es2015配置module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { lo...
2019-11-23 20:47:11
573
原创 vue28 —— loader（图片）
url-loader图片大小小于limit中的值 npm install url-loader --save-dev配置module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'u...
2019-11-23 20:16:37
177
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人