前端
关注
分享
扫一扫
文章平均质量分 96
'"<>{{7*7}}
这个作者很懒，什么都没留下…
展开
-
Vue.js进阶技巧Day05 $nextTick的两种应用场景
$nextTick应用场景：1.如果要在‘created()’ 钩子函数中进行DOM操作，因为created（）在调用时，DOM渲染还未完成，所以无法直接操作，需要通过$nextTick（） 来完成created: 实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，还未开始编译模板mounted: 此时，已经将编译好的模板，挂载到了页面的指定容器中显示<template> <div> <h1 ref='h1'><原创 2020-10-21 11:11:13 · 262 阅读 · 0 评论 -
Vue.js进阶技巧Day04: directive自定义指令、实现骨架屏、自定义右键菜单
0x00 局部注册局部注册的 自定义指令 只能在该vue文件中使用，全局注册的自定义指令在任何文件中都可以使用钩子函数：bind: 只调用一次, 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 inserted: 被绑定元素插入到DOM树时调用 update: 绑定元素的值 更新时调用，因为可能多个 元素都绑定了该自定义指令，所以只要有一个元素的值发生了更新，update就会被触发很多次。 componentUpdated：指令所在组件的 VNode 及其子 VNode 全部原创 2020-10-21 10:41:46 · 477 阅读 · 0 评论 -
Vue.js进阶技巧 Day03： 自定义组件v-model 实现
0x00 一种比较繁琐的方法e-input.vue<template> <input type="text" class='form-control' :value='val' @input="change"></template><script> export default{ props:['val'], methods:{ change(e){ console.log(e.target.value); t原创 2020-10-20 14:11:45 · 198 阅读 · 0 评论 -
Vue.js 进阶技巧Day02 $on 与 $emit （局部通信、父组件通知所有子组件、全局监听和通讯）
目录0x00 局部通信：0x01 如果父组件下有多个子组件，且数量未知，如何方便通知所有子组件呢?0x03 全局的监听和通讯：0x00 局部通信：只能在当前组件下使用<template> <div class='container p-5'> <button class='btn btn-success' @click='test'> 点击通讯 </button> <demo-item></dem原创 2020-10-20 13:23:55 · 983 阅读 · 0 评论 -
Vue.js 进阶技巧Day01: 获取DOM节点，获取子组件对象，跨组件通信/依赖注入,表单验证实例
目录0x00 $refs、$parent 、$children0x02 provide 和 inject 跨多组件通信 依赖注入0x00 $refs、$parent 、$children获取普通元素的dom节点，只需要给要获取的dom节点一个ref属性 作为标志<!-- 获取普通元素 --><input type="text" class='form-control' ref="iamshangrui">然后通过this.$refs.标志名 皆可以获取到原创 2020-10-17 20:31:25 · 804 阅读 · 0 评论 -
uni-app Day01 创建uni-app 目录结构 项目配置 页面配置 常用基础组件 生命周期 路由 语法 布局 基础api 自定义组件
目录0x00 创建uni-app0x01 目录结构0x02 项目配置0x03 页面配置0x04 常用基础组件0x05 生命周期0x06 uni-app路由0x07 uni-app 语法0x08 uni-app 布局与样式0x09 uni-app 基础api0x0A uni-app 自定义组件0x00 创建uni-app命令行创建：（CLI)vue create -p dcloudio/uni-preset-vue 项目名称0x01 目录结构|-原创 2020-07-20 11:29:01 · 330 阅读 · 0 评论 -
VueDay05 Vue Router
vue-cli4 如何安装vue-router ？在create 项目时选择 vue-router组件即可。0x00 vue route实现导航效果router/index.js 配置路由，即将组件 和 路由 配对起来，需要先import 相应的组件import Vue from 'vue'import VueRouter from 'vue-router'import Index from '../views/Index.vue'import Goods from '../views/原创 2020-07-12 16:17:17 · 241 阅读 · 0 评论 -
VueDay05:vuecli4 脚手架
百度搜索node.js 下载安装node -v 查看node版本npm -v 查看npm的版本，因为npm是node写的，并且是一个node包的管理工具，所以需要先装nodecnpm install -g @vue/cli进入项目目录：创建项目：vue create 项目名称选择 manually select features按空格取消选择 Linter只装babel，选择package jsoncd 项目名称npm run serverimpor原创 2020-07-04 22:35:53 · 178 阅读 · 0 评论 -
BootStrapDay02 标题 表格样式 边框和颜色 导航栏 冒泡提示 折叠菜单 字体图标 工具类
目录0x01 标题0x02 表格样式0x03 边框和颜色0x04 导航栏0x05 冒泡提醒0x05 折叠菜单0x06 字体图标库0x07 工具类#公共样式0x01 标题h1标签如果不想被百度爬虫抓取的话也可以这样写：<p class='h1'></p>0x02 表格样式1.给表格设置一个基类 table<table class='table '> <thead> <tr>原创 2020-05-29 18:00:41 · 880 阅读 · 0 评论 -
BootStrap4Day01 布局
0x00 导入 <link rel="stylesheet" href="http://code.z01.com/v4/dist/css/bootstrap.min.css" > <link rel="stylesheet" href="http://code.z01.com/zico.min.css" > <script src="http://code.z01.com/jquery/jquery-3.2.1.min.js" ></scri原创 2020-05-28 13:15:00 · 160 阅读 · 0 评论 -
SassDay03：Sass变量的使用
目录0x00 Default 默认值 与内置变量0x01 内置变量0x02 内置模块别名0x03 变量的作用域#css规则代码段#流程控制代码段0x04 高级变量功能#变量判断函数#从对象中取值0x05插值使用：0x00 Default 默认值 与内置变量$width:15px;$width:25px!default;@debug $width;$width:25px!default 表示如果$width的值之前没有定义或者为null，那么就使用原创 2020-05-28 10:25:38 · 1390 阅读 · 0 评论 -
jQueryDay05：ueditor、wangEditor、WebUploader
0x00 ueditor下载地址:http://ueditor.baidu.com/website/官方文档:http://fex.baidu.com/ueditor/#start-toolbar找到index.html保留以下核心代码，其余删除<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...原创 2020-03-03 23:48:19 · 597 阅读 · 0 评论 -
jQueryDay04:distpicker省市县三级联动， Layer插件，Laydate插件
0x00 distpicker省市县三级联动在github上下载distpicker，然后将其中的distpicker.js复制到项目文件夹,然后在文件中引入jQuery和该文件即可。第一种使用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2020-03-02 17:46:41 · 346 阅读 · 0 评论 -
jQueryDay03:ajax,商品数量加减demo,全选全不选demo,选择切换demo
0x00 ajax1.$.get/post(往哪里发请求url[,请求携带什么参数json格式,成功后调用什么函数,返回类型是什么格式])响应报文的数据默认会赋值给回调函数的第一个参数;如果最后一个参数是'json'，那么返回的json字符串会被解析成json对象例如：index.php<?php echo "hello world"; echo json_enco...原创 2020-03-02 11:13:40 · 282 阅读 · 0 评论 -
vueDay02：组件化开发，父子组件通信，非父子组件通信，vue的生命周期
目录0x00 组件化开发父组件中还可以再拥有子组件：0x01 slot插槽 和 ref，$parent0x02 父子组件的通信1.父传子：2.子传父0x03 非父子组件之间的通信0x04 vue的生命周期0x00 组件化开发创建组件的两种方式1.局部声明var 组件名 = (组件对象){ tempalte:"模板"，data是一个函数，method:...原创 2020-02-09 19:30:49 · 209 阅读 · 0 评论 -
vueDay01 插值表达式、常用指令、单双向数据流、事件绑定、过滤器、数据监听watch、computed
目录0x00 引包，留坑，实例化，实例化，插值表达式1.引包：2.留坑：3.实例化 即启动vue4.插值表达式{{}}0x01 常用指令0x02 vue单双向数据流以及事件绑定0x03 过滤器0x04 数据监听watch计算属性computed0x00 引包，留坑，实例化，实例化，插值表达式1.引包：确认已经下载了node，官网：https://no...原创 2020-02-07 00:36:32 · 517 阅读 · 0 评论 -
JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架
目录0x00 js的运动基础0x01 单物体运动框架0x02 多物体运动框架0x03 改变单一任意值运动框架0x04 链式运动框架0x05 改变多值运动框架0x06 完美运动框架0x00 js的运动基础先让div动起来，动起来之后设置一个条件让他停止运动，要不然他会一直运动下去<!DOCTYPE html><html><h...原创 2020-01-26 22:58:57 · 256 阅读 · 0 评论 -
JavaScriptDay05 DOM获取子节点，获取父节点，获取兄弟节点，元素属性操作，节点的插入删除，文档碎片，快速操作表格
目录0x01 DOM树0x01 获取标签节点的方法0x02 DOM获取子节点1.childNodes：2.children0x03 获取父节点0x04判断节点类型0x05 获取子节点和兄弟节点1.获取第一个子节点2.获取最后一个子节点3.获取兄弟节点1.获取上一个兄弟节点2.获取下一个兄弟节点0x06 元素属性操作的三种方式0x07 DO...原创 2019-03-12 23:14:04 · 899 阅读 · 0 评论 -
JavaScriptDay07:JSON，数组的常见函数，定时器，延时提醒框，无缝滚动图片
目录0x00 JSON简介0x01 JSON字符串，JSON对象和数组0x02 JSON数据序列化和反序列化0x03 JSON的使用0x04 数组的常见操作0x05 定时器0x06如何停止定时器0x07 利用延时性定时器制作延时提示框0x08 利用间隔性定时器制作无缝滚动图片0x00 JSON简介JSON:JavaScript Object Notati...原创 2020-01-26 01:18:17 · 310 阅读 · 0 评论 -
JavaScriptDay02 函数及作用域，不定参数arguments，闭包
目录0x00 函数的定义：0x01 函数传参0x02 函数传参之不定参arguments0x03 深度剖析变量作用域和闭包0x04 闭包函数：为了实现代码的复用。function slogan(num,time){ for(var a=1;a<=num;a++){ console.log(time+"点"+a+"好好学习，努力赚钱"); ...原创 2019-03-09 14:42:56 · 200 阅读 · 0 评论 -
JavaScriptDay01 导入js，输出和调试，值和变量，数据类型，类型转换，复杂数据类型，流程控制
目录0x00JavaScript的背景及知识结构0x01 导入js的两种方式方式1：包含外部文件方式2：嵌入式代码0x02 js导入的最佳位置0x03 js输出方式和调试方式0x04 值和变量0x05基础数据类型：(面试重点)0x06检测数据类型的两种方法：0x06 数据类型的转换0x07 创建复杂数据类型数组和对象0x08第一个js脚本的编写...原创 2019-03-08 20:51:26 · 279 阅读 · 0 评论 -
JavaScriptDay06：事件,事件注册，事件对象，事件冒泡，事件绑定与解绑，键盘事件，阻止默认行为
目录0x00什么是事件？0x01事件是如何主动调用函数的呢？注册的两种方式：0x02 常见事件演示：0x03 动手操作div的任意样式0x04 事件对象0x05事件冒泡：0x06 事件绑定、事件解绑以及事件捕获0x07 键盘事件和键盘码0x08 默认行为以及阻止默认行为0x00什么是事件？js是为了实现人与事件的交互，让人可以去操作页面。j...原创 2019-03-13 19:30:30 · 374 阅读 · 0 评论 -
HTMLDay01:非构造页面标签元素，构造页面标签元素
目录0x00 结构层 表现层 行为层0x01 head标签和body标签的作用0x02 良好的习惯之代码注释0x03 非构造页面标签元素介绍0x04 构造页面必备的HTML标签元素介绍（一）：0x05 构造页面必备的HTML标签元素介绍(二):0x06 构造页面必备的html标签元素介绍（三）：0x07 构造页面必备的html标签元素介绍(四）：0x08 页面常...原创 2019-02-20 23:12:45 · 468 阅读 · 0 评论 -
HTMLDay02：表单，行内元素，块级元素，行内块元素之间的区别、inline/inline-block/block
目录0x00重量级元素之表单：0x01 给标签元素一个命名，让程序容易找到0x02 行内元素，块级元素和行内块级元素的区别（重点，面试笔试必问）0x03inline/inline-block/block0x00重量级元素之表单：收集用户输入，发送或者提交给服务器。一般情况下只有表单才有向服务器提交内容的功能。使用方式如下例子：<form method='传送方式'...原创 2019-02-24 09:56:59 · 559 阅读 · 0 评论