- 博客(53)
- 收藏
- 关注
RSS订阅原创 13. vue --- 插槽(1)
插槽vue官网 插槽1. 父内容在子组件中显示只用于显示，不用做其他，就可以用插槽父组件：<子组件标签名 ...> <template slot="值">{{值}}</template></子组件标签名>定义卡片的内容，将内容添加slot属性为插槽的名字子组件定义插槽，给定name <元素><slot name="值"></slot></元素>拥有相同结构框架插槽是组件中
2021-11-28 22:24:37
539
原创 12. vue-懒加载（异步延迟懒加载、彻底懒加载）
懒加载单页面问题单页面问题，首屏加载极慢脚手架自带打包工具，webpack把所有组件打包app.js文件，在首屏一次性全部下载解决1. 异步延迟加载 2. 彻底懒加载1. 异步延迟加载定义：优先下载并显示首页的内容。其它页面组件采用底层异步下载的方式。在不影响主屏下载速度的情况下，异步下载。优点即加快了首屏的加载速度，又能享受单页面应用带来的好处。步骤①. 不要再router/index.js 开头过早的引入除首页之外的其它页面组件。（凡是用import 引入的东西，v
2021-11-28 22:00:37
856
原创 11. VUE 脚手架--文件结构、vue安装
VUE 脚手架一、文件结构：① 创建一个唯一完整的HTML页面：脚手架将唯一完整的HTML页面一分为三，运行时再组合起来。(1) 把唯一的页面html放入public中，head中引入第三方css和jspublic文件： 用来放第三方的压缩版和第三方JS的压缩版把<div id="app"></div>和<script> new Vue({ el: "#app" }); /script>划分出去。<div id="app"></d
2021-11-27 22:44:55
845
原创 10 SPA + 路由简介
SPASingle Page Application 单页面应用单页面应用:整个应用程序只有一个唯一完整的HTML页面，其它无所谓的“页面”,其实都是组件片段而已。所谓切换页面，只是在一个HTML中切换显示不同的组件片段而已。创建单页面应用1. 创建唯一完整的HTML页面支持vue.js基本结构的空页面<script src="js/vue.js"></script><div id="app"></div><script>
2021-11-27 16:35:14
220
原创 9. 组件件传参--父子绑定传参、子父兄弟传参、ref父子通信 ---(1)
组件间传参父子传参、子父传参、兄弟间传参、父子通信1. 父子传参父组件传参给子组件用绑定的方式传参<子组件标签名 :自定义属性名="父组件中的变量"></子组件标签名>子组件中接收：<script> export default { props:["父组件中自定义属性名"] }</script>props中的属性的用法和data中的变量的用法是完全一样的区别：props的属性值来自于外部传入data中的变量值由自己定
2021-11-24 21:43:00
292
原创 8. 组件定义使用component --(1)
vue 官网 组件组件拥有专属 的html+js+css+数据的可重用的独立的页面功能区域组件的分类根组件：new Vue()。整个页面甚至整个项目只有一个new vue() 监控全局全局组件：Vue.component()。可以放在任何位置，没有限制子组件规定只能放在指定父组件范围内使用的组件组件定义组件名大小写Vue.component('my-component-name', { /* ... */ })// 使用：<my-componen
2021-11-23 22:53:56
248
原创 7. 过滤器的使用 -- filter
vue 过滤器官网过滤器专门对变量的原始值先加工再显示的一种特殊函数。创建全局过滤器Vue.filter('过滤器名', function (旧值) { return 新值;})使用<元素>{{ 变量名 | 过滤器名 }}</元素>组件间的过滤器filters: { capitalize: function (旧值) { return 新值; }}Vue.filter(‘capitalize’, function (value)
2021-11-23 22:05:37
228
原创 6. 自定义指令 directive --(1)
自定义指令 directive如果希望在vue页面加载时，自动对元素执行一些初始化的操作。（比如 自动获取焦点时，就可以使用自定义指令）简单使用创建：Vue.directive("指令名",{ inserted(当前带有指令的DOM元素){ // 对带有指令的当前DOM元素执行原生操作 }});使用：<元素 v-指令名>注意：指令名： 不能有大写字母，如果有多个字母，用-分开inserted: 回调。new vue扫描到v-指令名，自动调用Vue.dir
2021-11-22 21:32:56
73
原创 5. vue 计算属性和侦听器
计算属性和侦听器一、 计算属性 computed在模板字符串{{}}中放入大多的逻辑会让模板过重且难以维护。可使用计算属性1. 基本使用<p>{{message}}</p>data: { return { msg:"hello", }},computed: { // 计算属性的getter message: ()=>{ //vm.message return "hello"+this.msg; }}2. 计算属性的setter
2021-11-20 15:03:49
95
原创 4. vue样式绑定 style class
绑定样式style精确修改一个元素的个别css属性值时，都可用绑定的内联样式可以存在 style和:style ⇒ 合并①<元素 :style="变量名"><!--data中变量-->data:{}data{return { 变量名："css属性名1:属性值1, css属性名2:属性值2,......", }}不便于值修改其中的某一个css属性值② 使用对象语法<元素 :style="{css属性名1:变量1, css属性名2:变量2
2021-11-20 14:04:30
528
原创 3. vue双向绑定指令
双向绑定双向绑定原理：就是在单向绑定的基础上，能自动为元素添加onchange或oninput事件处理函数。并能在事件处理函数中，自动将新值更新到data的变量中。v ⇒ m / m ⇒ v① 访问器属性 ② 虚拟DOM树 ③ 自动添加事件绑定v-model 双向绑定<元素 v-model="变量">1. 表单元素<表单元素 v-model="变量"><!--等价于单价绑定+input--><表单元素 :value="变量" @input
2021-11-20 13:34:35
547
原创 2. vue单向绑定指令 -- (1)
指令绑定语法(1)1. 插值语法：{{}}{{}}： 原理和模板字符串的${}一致底层相当于DOM中的textContent属性相当于 innerText2. 属性绑定：v-bind （简写：）元素的属性值发生变化，用v-bind绑定属性值<元素 v-bind:属性名="js变量或表达式"><!--简写--><元素 :属性名="js变量或表达式"><img :src="图片路径"/>3. 显示隐藏： v-show专门控制一个元素显
2021-11-20 11:45:00
1277
原创 1. Vue简介+Vue2的不足
Vue一、基本介绍1. 什么是vue第三方开发的，基于MVVM设计模式，渐进式的，纯前端JS框架。只要以数据操作（增删改查）为主的项目，都可以由vue框架开发2. MVVM 设计模式MVC 衍生View 视图/界面Model 模型对象View/Model 视图模型双向绑定： 监听数据的变化，然后通知视图进行自动更新。当用户操作视图时，vm也能监听到视图的变化，然后通知数据做相应的改动3. vue实现双向绑定（核心原理）Vue2绑定原理：1. 访问器属性 2
2021-11-20 11:34:38
649
原创 微信小程序 -- (七) 小程序 云函数
小程序云函数小程序云函数实在小程序端定义，在云服务器端执行的函数。在小程序定义完毕后，可以通过开发工具上传部署到云服务器，然后在小程序端调过提供的API接口可以直接调用这些云函数。云函数示例定义一个云函数实现a+b，返回结果在cloudFunctions目录下新建一个云函数，函数名：add使用开发工具上传部署该云函数在文件夹上 右键 ==> 上传并部署：云端安装依赖（不上传node_modules)在小程序端使用 wx.cloud.callFunction()调用该云函数
2021-11-07 22:45:58
7152
原创 微信小程序 -- (六) 小程序 云开发+自定义组件
云开发 小程序概述开发者可以使用腾讯提供的云服务来开发小程序、小游戏的服务端，而无需搭建服务器。开发提供的基础能力有： 云数据库、云存储、云函数。1. 云数据库是一个既可以在小程序端操作，也可以在云函数中操作的json类型的非关系型数据库。2. 云存储云存储支持在小程序端直接上传下载云端文件。（替代了后端的nodejs）3. 云函数云函数是在小程序端声明，而后部署到云端后，在云端执行的函数。小程序端部署完毕后可在小程序直接调用开通云开发服务小程序开发工具==》 云开
2021-11-07 22:40:33
781
原创 微信小程序 --(5)小程序API+生命周期+缓存
微信小程序API界面交互API1. Toast对话框 wx.showToast({ title: "添加成功", icon:"success", duration: 1000, mask: true });2. Modal对话框 wx.showModal({ title: '提示', content: "确认删除？", confirmText:"残忍删除", confirmColor: "#
2021-11-07 12:33:30
572
原创 微信小程序 --(4) 小程序语法专题
WXML语法专题WXML是一套标签语言，符合标签语言的相关语法，用于定义页面的结构。而在WXML中的动态数据（动态文本、动态属性、动态样式等）来源于对应js的data。page({ data: { name:’zs’}})WXML中获取动态数据时，需要使用{{}}来应用data中的变量，大概有一下几种需求：内容绑定、 属性绑定 、 样式绑定 、列表渲染（wx:for、wx:key)、条件渲染1. 内容绑定动态更新标签内容的文本<text>{{name}
2021-11-07 12:10:16
194
原创 微信小程序 --(3) 小程序事件处理专题+双向绑定
小程序事件处理bindtap、bindinput、bindchange、事件是视图层到逻辑层的通讯方式，它可以讲用户的行为反馈到逻辑层进行处理。一、 事件类型：在小程序中，事件类型分为2类： 冒泡事件、非冒泡事件1. 冒泡事件若为组件绑定了冒泡事件，当触发该事件时，将会向父节点执行冒泡。在小程序中： 12个类型 触发条件touchstart： 手指触摸动作开始touchmove 手指触摸后移动touchcancel 手指触摸动作被打断，如来电提醒，弹窗
2021-11-07 11:54:23
542
原创 微信小程序 --(2) 小程序基础组件库
小程序基础组件库小程序组件库参考小程序中wxml文件由各式各样的组件构成，这些组件都是微信自定义的。其他html的标签无法使用。1. 关于组件属性：对于布尔类型属性，无论直接设置为true和false，都会当做普通字符串来进行判断，最终被解释为true;除非用非空字符串“”。推荐使用{{}}引用js的字面量，为属性赋值为true或flase。比如：hover-stop-propagation="{{true}}"小程序组件既遵守驼峰命名法，也遵守短横线命名法，两种属性名的设置都将会生效。
2021-11-07 11:26:25
702
原创 微信小程序 -- (1)文档说明、配置项
微信小程序1. 介绍微信公众平台由腾讯提供，基于腾讯微信的服务器，为广大企业、组织、个人提供用户管理或咨询服务的平台。微信公众平台提供了3种账号类型：服务号、订阅号、小程序服务号：-类似：中国移动。为企业或组织提供的的进行用户管理和服务的账号，侧重于服务。订阅号： 类似：CSDN。为企业或组织或个人提供的进行资讯分享的账号，侧重于资讯分享。小程序： 为企业、组织、个人提供的可以达到原生APP相同功能的应用。（微信内部运行）。其优点在于免下载，用完就走。2. 小程序接入流程微信公众平
2021-11-07 11:01:25
1189
原创 uniapp -- (1)
一、环境部署1、HBuilderXhbuilderX官网2、模拟器夜神模拟器官网夜神模拟器 安卓模拟器 比较占用资源 需要显卡、内存、CPU配置较高。二、uniapp介绍uni-app适合中小公司 能够编译称为多家小程序和APP的一套解决方案多家小程序 ：百度、字节、快应用。。。。都要开发一遍，成本很高(开发、维护)。优势：Dcloud公司 uni-app 一套代码生成多家小程 序和app软件。小缺点：文档有时候不太完善 组件有一些微小的bug三、安装HB
2021-11-06 23:09:38
530
原创 CSS 总结（1）
CSS 总结（1）1. marginmargin: 中的atuo值用于块级元素在他的父级内水平居中。写给本身。2. 块级元素水平居中：margin： 0 auto;用于块级元素在他的父级内水平居中3. 文本居中：text-align: 只针对于块级元素里面的行内元素、行内块元素有效。这个属性写给行内元素、行内块元素的父级标签。只能写给块级元素4. 垂直居中:写在块级标签和行内块标签都可以① 单行文本垂直居中：1line-height② 多行文本垂直居中：paddin
2021-11-06 17:30:35
185
原创 001 栅格布局
栅格布局<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/bootstrap.css"> <script src="./js/jqu
2021-07-22 20:39:18
231
原创 001 ajax get、post、delete、put方法封装
function ajax(options){ var defaults = { type:"get", url:'', data:{}, // header:{ // 'Content-Type':'application/x-www-form-urlencoded' // }, success: function() { },
2021-07-21 18:45:47
154
原创 002 小案例 响应式布局 媒体查询
1.使用媒体查询2.flex布局3.vm、vh的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 写移动端必须要添加 --> <meta name="viewport" content="widt
2021-07-21 14:49:53
199
原创 001 小案例： 类似“轮播图”转动效果
小案例动画效果@keyframsflex布局：display:flex<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./cssReset.css"> <style> /*针对ul做移动，带动的
2021-07-20 17:24:45
114
原创 01 ajax
//添加响应头解决跨域 写在服务器端// res.setHeader(‘Access-Control-Allow-Origin’, ‘*’);**** 创建Ajax四个步骤：**//1.创建XMLHttpRequest 创建异步对象//兼容性创建对象，在非低版本IE存在window.XMLHttpRequest属性if(window.XMLHttpRequest){//非低浏览器var xhr = new XMLHttpRequest();}else{//IE5 IE6浏览器
2021-07-06 19:28:58
69
原创 javascript(2)--运算符
1. 运算符运算符也被称为操作符，用来实现赋值、比较和执行算数运算等功能的符号运算符包含有：算数运算符递增和递减预算符比较运算符逻辑运算符赋值运算符1.1 算符运算符种类：+：加 10 + 20 = 30-：减 10 – 20 = -10*：乘 1 * 1 = 1/：除 1 / 1 = 1%：取余数(取模) 4 % 2 = 01.2 浮点数：算数运算里面会有问题① 0.1 + 0.2 ==> 0
2020-07-01 10:55:39
214
原创 javascript (1)--基本
1.编程语言编程: 让计算机为解决某个问题而是用某种程序设计语言编写的成语代码，并最终得到结果的过程计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令计算机语言：指用于人与计算机之间的通讯语言，它是人与计算机之间传递信息的媒介计算机语言的种类非常多，总的来说可以分成机器语言、汇编语言和高级语言三大类实际上计算机最终所执行的都是机器语言，它是有“0”和“1”组成的二进制数，二进制是计算机语言的基础编程
2020-07-01 10:21:19
235
原创 004 rem布局 --- 移动WEB开发
rem适配布局1 rem基础 rem 单位;是一个相对单位，类似于em,em是父元素的字体大小（font-size）rem相对于html元素的字体大小rem优点就是通过修改html里面的为大小来改变页面中元素的大小进行整体控制html {font-size:12px;}P {height：10rem；width: 10rem;}p盒子就变成了120*120px的盒子2媒体查询 Media Query 媒体查询是 CSS3新语法可以针对不同屏幕尺寸设置不同
2020-05-12 10:54:21
210
原创 E01 -- CSS样式中 报错 { expectedcss(css-lcurlyexpected)
{ expectedcss(css-lcurlyexpected) 我发现这个错误是在使用rem布局的时候：使用less样式生成css文件中，css文件报错：发现错误发现我在媒体布局中没有写元素：导致字体大小不知道是给谁设置的导致生成css错误样式：改正：给less中字体大小加一个元素就好了：生成的css文件中样式：解决...
2020-05-11 17:11:33
15625
1
原创 003 flex布局--移动WEB开发
flex布局flex：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式任何一个容器都可以指定flex布局，无论是块级元素还是行内元素为父盒子设置为flex布局之后，子元素的float、clear、clear和vertical-align将失效伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局给父元素添加flex属性： display:flex;1....
2020-05-06 09:46:51
172
原创 002 流式布局（百分比布局）--移动WEB开发
流式布局：流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。 - max-width 最大宽度 （max-height 最大高度） - min-width 最小宽度 （min-height 最小高度）案例：京东移动端首页访问地址：m.jd.co...
2020-05-06 09:31:43
325
原创 CSS（四）--3D转换
3D转换 3D特点：近大远小 物体后面遮挡看不见3D位移 translate3d(x,y,z)3D旋转 rotate3d(x,y,z)透视 perspective3D呈现 transform-style1.三维坐标系：三维坐标系：就是指立体空间，立体空间由3个轴共同组成x轴：水平向右 注意：x右边是正值，左边是负值y轴：垂直向下 注意： y下面是正值，上面是负值...
2020-04-30 08:19:33
445
原创 CSS(三)--动画
动画（animation）1.什么是动画动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。2.动画的使用1、先定义动画2、在调用定义好的动画2.1 语法格式（定义动画）1.定义动画@keyframes 动画名称 { 0% { //开始状态 width: 100px...
2020-04-28 20:03:13
210
原创 CSS3（二）---2D转换（transform）：移动(translate)、旋转(rotate)、缩放(scale)
1. 2D转换 二维坐标系（改变标签在二维平面上的位置和形状的一种技术）转换（transform） 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。移动 ：translate旋转 ：rotate缩放： scale移动盒子的位置：①定位 ②盒子的外边距 ③2d转换移动2.移动2.1 语法transform：translate(x,y); x就是x轴...
2020-04-28 19:53:57
659
原创 CSS3(一)---属性选择器、结构伪类选择器、伪元素选择器
CSS3属性选择器、结构伪类选择器、伪元素选择器、2D转换、动画、3D装换、浏览器私有转换CSS3是在CSS2上进行扩展1. 属性选择器属性选择器权重是10，类选择器、伪类选择器(属性选择器：权重高于标签选择器)disabled = “disabled” //禁用比如：button[disabled] { } 元素[属性] { }选择符:E[att] ...
2020-04-28 19:35:49
184
原创 html5--音频、视频、表单input
一、什么是 HTML51. HTML5 的概念与定义 大量使用移动端定义：HTML5定义了 HTML标准的最新版本，是对HTML的第五次重大修改，号称下一代的 HTML两个概念：- 是一个新版本的 HTML 语言，定义了新的标签、特性和属性- 拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML2. HTML5 拓展了哪些内...
2020-04-28 19:00:00
515
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人