您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

part5 vue和HTML5相关知识总结

1.1插值中只能写表达式 不能写代码

1.2标记的内容使用js时要使用插值 如果给一个属性添加js语法 要使用绑定指令

1.3 class中可以绑定一个数组或者对象 如果为数组 则数组的每一项都会是该元素的值 作为如果是对象则key值是class值 value值是布尔值 用布尔值判断class是否添加

1.4 v-once只渲染元素和组件一次

1.5 v-html可以将标记的文本按照标记的方式输出 可以防止编译过程出现奇怪的东西

2.1 data必须声明返回一个初始数据对象的函数 => 返回结果对象格式

2.2不加key值序号会改变

2.3class中如果书写js代码 需要v-bind绑定

2.4数组的includes()方法:返回一个布尔值 表示数组是否包含给定的值 ***

2.5条件渲染:利用条件判断是否需要渲染 v-if,v-else 或者 v-if,v-if-else,v-else (v-if和v-else的值是相对的)

2.6 v-if(节点操作) 和 v-show(css样式操作 display操作) 在条件为真时都会显示出来且结果相同 但是在条件为假时 v-if就真的不存在了 而v-show只是隐藏了

2.7事件修饰符(写法:@click.stoo="")

  • .stop 阻止事件冒泡
  • .prevent 阻止默认事件发生
  • .capture 捕获冒泡 既有冒泡发生时 有该修饰符的dom元素先执行 若有多个 则从外到内依次执行
  • .self 将事件绑定到自身 只有自身才能触发 常用于避免冒泡
  • .once 设置事件只能触发一次
    键盘修饰符:.enter .tab .delete…(也可以用keycode值代替)

2.8表单的value变化用ev.detail.value获取
练习:单选 多选(6.15csdn) 删除数组中的数据

3.1数组的push,shift,pop等称为数组的变异方法 会重新渲染列表 例如 - arr.push(“ddd”)重新渲染 添加了ddd - arr[3]=“ddd” 只是渲染数组的第三项 如第三项存在 则修改第三项的值为ddd 若第三项不存在 则数组中加入了ddd但是在页面不会被渲染

3.2若使用this.obj[“d”]=456;给对象添加新的属性 可以添加进去但是不会在页面渲染 应使用把原对象解构出来到新的对象 给新的对象添加新的属性值this.obj = { ...this.obj, "d":456 }

3.3对象转数组方法Object.keys(obj)

3.4当你的一个变量需要其他变量的计算而得到时 其他的变量会发生变化 此时要用computed计算–提高性能 (computed和data,methods是同一级别 里面是函数 返回他的值)

3.5计算属性的setter:当手动修改计算属性的值时 触发setter函数 执行一些自定义的操作

3.6当一个值的改变影响了很多数据的值 需要使用watch监听

3.7自定义组件 语法如下: class XzyTab extends HTMLElement{//定义类继承于 constructor(){//构造函数 super();//调用父类的构造函数 const shadom = this.attachShadow({ mode:'open';//是否可以获得组件内部元素 open为开放的封装模式 closed为关闭的封装模式 }) //生成组件时执行的代码 不能使用innerHTML 需要动态创建元素 var oStyle = document.creatElement("style"); oStyle.innerHTML = ``; shadom.appendChild("oStyle"); } } custtomElements.define('xzy-tab',XzyTab);//第一个是组件名 第二个是类名

  • 自定义属性 : 例如组件内部设置data属性可以自定义传值 在书写的代码中用 获取属性的值getAttribute 获取属性的值 var data = this.getAttribute("data")

3.8数组的join方法将数组转换成字符串

3.9从服务器中接收的数据 用JSON.parse()方法解析成js使用的数据

练习 给对象添加新的属性 自定义组件之选项卡

5.1pages.json 中的page属性代表当前项目所有页面的注册信息 第一个页面是主页

5.2页面跳转 (1)<navigator url="../text/text">跳转</navigator> (2)声明函数 例如toText (){//在方法中声明函数 写uni.navigateTo() uni.navigateTo({ url:"../text/text", success() { console.log("成功"); } })
uni.navigateTo()保留当前页面 跳转

uni.redirectTo()关闭当前页面 跳转

uni.reLaunch()关闭当前页面 并关闭之前没有关闭的页面

uni.switchTab(OBJECT)跳转到tabBar页面 并关闭所有非tabBar页面(tabBar页面指小程序下导航)

uni.navigateBack()关闭当前页面 返回上一级或多级页面(参数{delta:“返回的页面数”})

5.3项目的生命周期在APP.vue中

页面生命周期

5.4sass:uni.sass文件中可通过定义颜色变量控制项目的颜色改变 例如:$uni-color-primary: #007aff;

5.5pages tabBar 见笔记

页面跳转 (1)跳转 (2)声明函数 例如toText (){//在方法中声明函数 写uni.navigateTo() uni.navigateTo({ url:"…/text/text", success() { console.log(“成功”); } })

uni.navigateTo()保留当前页面 跳转

uni.redirectTo()关闭当前页面 跳转

uni.reLaunch()关闭当前页面 并关闭之前没有关闭的页面

uni.switchTab(OBJECT)跳转到tabBar页面 并关闭所有非tabBar页面(tabBar页面指小程序下导航)

uni.navigateBack()关闭当前页面 返回上一级或多级页面(参数{delta:“返回的页面数”})

当需要跳转到tabBar页面时 只能用uni.switchTab()跳转

6.1map组件 (设置经纬度属性)

6.2 表单元素-button

  • size属性 (default:默认大小,mini:小尺寸)
  • type属性(default:白色,warn:红色) 可改用default自行写样式
  • plain属性:是否镂空true/false
  • disabled:是否禁用
  • openType:许多的功能

6.3checkbox-group:多项选择器 内部由多个checkbox组成 属性说明如下:

  • @change:选中项发生改变是触发的change事件
  • value:选中时触发的change事件 并携带的value

通过ev.detail.value()判断谁被选中

6.4editor富文本编译器

6.5表单中的值发生改变时出发@input事件

6.6lable 用来和改进表单组件的可用性 使用for属性(绑定控件的id)或将控件放在该标签下 当点击时 就会触发对应的控件

6.7picker: 从底部弹起的滚动选择器 支持五种选择器 通过model区分

  • mode = “selextor”

练习:tabBar页面 checkbox-group的多选效果

6-7-1.1HTML5的新组件-video和audio 因为flash并不属于浏览器 pc端需要插件才能运行 且在手机不兼容(audio除了width,height,poster 其他和video相同)

  • src属性引入视频音频地址 source做兼容处理
  • width/height 设置视频宽高 (等比缩放)
  • poster:设置视频播放前预览图片的地址
  • controls:显示或隐藏媒体用户控制界面
  • autoplay:媒体是否自动播放
  • loop:媒体是否循环播放
  • muted:媒体是否静音
  • prelode:是否预先加载数据 ({none:不预先加载,metedata:预先只加载媒体文件元数据(时常。大小),auto:优先加载})

通过js选择器获取oVideo元素属性(oAudio除了videoWidth,videoHeight,poster其他和video相同)属性如下:

  • videoWidth/videoHeight 视频实际尺寸(显示为0时表示视频并没有加载完成 可以在window.onlode的时候获取)
  • poster
  • duration 媒体总播放时长(只读) 在window.onlode的时候获取
  • currentTime 媒体的播放进度(已经播放多久)
  • muted (true表示静音)
  • volume:0.0-1.0音量相对值
  • controls:true表示显示
  • loop:true表示循环
  • paused:媒体是否处于暂停状态 true表示暂停(只读)
  • ended:是否播放完毕 true表示播放完毕(只读)
  • currentSrc:以字符串形式返回媒体地址(只读)->绝对路径

6-7-1.2 oVid元素和oAud元素方法:

  • play() 媒体播放
  • pause() 媒体暂停
  • load() 重新加载媒体(如你修改了source的Src地址 若不是用load方法重新加载 仍显示之前的视频)
    oVid元素和oAud元素事件:
  • play: 在视频、音频播放前触发
  • ended: 在视频,音频播放结束时触发
  • pause: 在视频,音频暂停时触发

6-7-1.3offsetWidth等是只读属性 不能赋值

7.1uni-app中video组件

  • initial-time=“20” 从20s开始播放
  • duration 显示的播放时间
  • page-gesture=“false” 是否开启音量和亮度调节手势 true/false
  • video规定尺寸300*225
  • objectFit=“cover” 当视频大小和video容器大小不一致时 视频的表现形式{contain:包含,fill:填充,cover:覆盖}
  • poster 若controls值为false则poster无效

7.2uni.createVideoContext(,)//第二个参数传入组件实例this

7.3 uni-app中的video获取通过onReady: onReady:function(res){ this.videoCon = uni.createVideoContext('myVideo',this) }

7.4视频的弹幕 属性:

  • danmu-List 弹幕列表
  • danmu-btn 是否显示弹幕按钮 只在初始化有效 不能动态变更
  • enable-danmu 是否展示弹幕 只在初始化有效 不能动态变更

7.5条件编译:用特殊的注释作为标记 在编译时 根据这些特殊的注释 将注释中的代码编译到不同平台 写法:以 #ifdef #ifndef 开头 加 %平台 以#endif结尾

  • #ifdef : if defined 仅在某平台存在
  • #ifndef : if not defined 除了某平台均存在

%平台可取值如下

  • APP-PLUS 对应App平台
  • H5 对应H5
  • MP-WEIXIN 对应微信小程序
  • MP-BAIDU
  • MP-TOUTIAO 字节跳动
  • MP 微信 支付吧 百度 字节跳动 360 qq

JS和CSS都支持条件编译

例如:<!-- #ifdef MP-WEIXIN --> <text>只在微信小程序</text> <!-- #endif --> <!-- ifdef MP_WEIXIN || H5 --> <text>微信或者H5</text> <!-- endif -->

录音 自己发弹幕 进度条效果 picker 地图

8.1地理定位(HTML5新特性) 首先应监测用户设备浏览器是否支持地理定位,除非用户同意,否则不支持```function getLocation(){
if(navigator.getLocation){
navigator.getLocation.getCurrentPosition(showPosition,showError);
}else{
alert(“浏览器不支持地理定位”)
}
}` ``

// 成功时调用
function showPosition(position){ var lat = position.coords.latitude;//纬度 var lag = position.coords.longitude;//经度 alert('纬度'+lat+',经度'+lag); }
// 失败时调用
function showError(error){ switch(error.code){ case error.PERMISSION_DENIED: alert("定位失败,用户拒绝请求地理定位"); break; case error.POSITION_UNAVAILABLE: alert("定位失败 位置信息不可用"); break; case erroe.TIMEOUT: alert("定位失败 请求获取用户位置超时"); break; case error.UNKNOWN_ERROR: alert("定位失败 定位系统失效"); break; } }
8.2uniapp中地图组件

8.3 我们用变量储存数据关闭页面会被销毁 若需要一段时间 可用cookie

cookie存储以域名区分 不同浏览器存放cookie位置不同

cookie数据是一种键值对格式为:cookie=值(两个值之间有一个;和 空格)

一个域名存放的 cookie是有限的 每个cookie存放内容大小也有限制
封装了设置cookie

8.4中文编解码 encodeURI(str):编码 decodeURI(str):解码

8.5HTML5提供两种客户端存储数据的方法:localStorage-无时间限制的数据存储(单个域名存储量较大) sessionStorage-针对session数据存储(只在session内有效 存储量更大)这两个不会请求服务器

cookie不适合大量数据存储 每个域名存储量比较小 所有域名存储量有限制 每次请求会发送到服务器

9.1uni-app 数据缓存

  • uni.setStorageSync(key,DATA)–DATE:需要存储的内容 只支持原生类型以及通过JSON.stringify(将js数据转化成字符串)序列化的对象=>同步
  • uni.getStorageSync(key)=>同步00-【

笔记本制作

10.1 HTML5新标记 datalist 定义选项列表
output 定义不同类型的输出
details(折叠效果):描述文档或文档某个部分的细节{summary:标题,figure:规定独立的内容}

10.2新的表单控件 -type=“number” 数值的输入域 min max为数字的限定

-type=“range” 数字值滑动条 除了最大最小值还有步长 必须满足(最大值减最小值的结果可以被step整除)

10.3新的表单控件还有

  • color data time datatime-local month week email search tel url

10.4HTML5新增属性 draggable:是否允许用户拖动元素(true可拖拽) 拖拽效果要配合js一起设置

  • ondragstart: 拖拽前触发(事件对象为被拖拽元素)

  • ondrag 拖拽前和拖拽结束之间 连续触发 (事件对象为被拖拽元素)

  • ondragend 拖拽结束触发(事件对象为被拖拽元素)

  • ondragenter 进入目标元素触发 相当于onmouseover(事件对象为目标元素)

  • ondragover 进入目标(鼠标位置进入) 离开目标之前 连续触发(事件对象为目标元素)

  • ondragleave 离开目标元素触发(鼠标位置离开) 相当于onmouseout(事件对象为目标元素)

  • ondrop 在目标元素上释放鼠标 必须在dragover上阻止默认事件—ev.preventDefault
    (事件对象为目标元素)

  • dataTRansvfer对象 (属于event) :

  • ev.dataTRansvfer.setData(两个参数);(例如ev.dataTransfer.setData(“index”,index++);)设置数据方法=>ondragstart事件

  • ev.dataTRansvfer.getDate();获取数据方法=>ondrop事件 - effectAllowed:设置光标

  • ev.dataTransfer.setDragImage(Oimg,Oimg.offsetWidth/2,Oimg.offsetHeight/2); 设置拖放效果为一张图片

事件顺序

  • drop不触发:dragstart>drag>dragover>dragleave>dragend
  • drop触发:dragstart>drag>dragover>drop>dragend

10.5ev.dataTRansvfer.files:获取外部拖拽的文件 返回一个fileList列表 fileList有个type属性 返回文件的类型

10.6表单验证

10.7contentEditable属性:值设置成true会使该元素内容被编辑 该属性默认是继承的 designMode: 全局对象属性 值设置成true时 所有支持contentEditable属性的元素都可被编辑

11.1canvas画布:创建一个canvas标签 和img类似 只有两个可选属性width(默认300px ) height(默认150px) 没有src alt属性 也可以使用css设置canvas宽高 但是如果宽高属性和初始化比例不一致 会出现缩放 除非确实需要缩放 否则永远不要使用css设置宽高属性
var oCG = oC.getContext(“2d”);//获得2d绘图工具

canvas元素起点为左上角(0,0)点 x向右增大y向下增大 所有元素相对原点定位

  • oCG.fillStyle=color;设置填充颜色
  • oCG.strokeStyle=color;设置描边颜色
  • oCG.lineCap =“round”;端点样式butt方形,round圆角 square(多出宽的一半)
  • oCG.lineJoin=“round”;边界连接点样式 miter直角 round圆角 bevel斜角
  • oCG.moveTo();将画笔移动到下xy点
  • oCG.lineTo();绘制直线路径 从上一个点到这个点
  • oCG.lineWidth=5;描边宽度
  • oCG.beginPath();开始绘制新路径 用于区分之前的
  • oCG.closePath();闭合路径(将开始和结束连起来)
  • oCG.stroke();描边 从上一个beginPath绘制到此命令
  • oCG.stroke();填充

11.2图形绘制 xy是距离左上角坐标 width height是尺寸

  • oCG.rect(x,y,width,height)
  • oCG.strokeRect(x,y,width,height)直接用描边画出来
  • oCG.fillRect(x,y,width,height)直接用填充画出来
  • oCG.clearRect(x,y,width,height)清楚该矩形的绘制
  • oCG.arc(x,y,r,起始弧度,结束弧度,是否为逆时针) xy为圆心坐标 true是逆时针
    圆心到三点钟方向是起始位置 弧度公式rad = deg*Math.pi/180

11.3文字绘制
oCG.font = “30px bold 宋体”;//设置字体
oCG.fillStyle = “red”;//设置颜色
oCG.textAlign = “left”;//设置水平对齐方式
oCG.textBaseline = “middle”;//设置垂直对齐方式
oCG.fillText(“要写的文字”,200,100);//绘制文字 指定坐标
// 对齐方式和指定坐标有关系 例如上面就是文字左边的坐标为200,100

12.1绘制图片 绘制视频

  • var img = new Image();//创建行对象
  • img.src = “图片路径”;
  • img.onload = function (){
    oCG.drawImage(img,sx,sy,sWidth,sHeight,x,y,width,height) 即从画布的(x,y)点绘制宽高为width,height的img
    从img的(sx,sy)点开始截取画出宽高为sWidth,sHeight的img
    }

12.2绘制背景图:不在dom中的图片需要先加载 图片加载成功后绘制背景图

  • oCG.fillStyle = oCG.createPattern(obj,“repeat”);用图片绘制填充图 设置完成后可以用此填充图来绘制任何形状
  • oCG.arc(200,200,120,0,360*Math.PI/180,false);
  • oCG.fill();

canvas也可以绘制阴影 渐变 贝塞尔曲线 等 但是性能差

12.3 配置状态的保存和恢复 类似js函数作用域 在一个oCG.save();和oCG.restore();生效 其中的内容不受全局影响

12.4 arr.sort();数组的排序 括号内接收函数 返回-1时 升序
[…arr1].sort((a,b)=>a-b);

12.5画布的变形 画布变形的是整个画布 一旦设置所有后续绘制都被影响 所以让变形只对需要变形的绘制起效 就要用到save() restore()方法

  • oCG.translate(); x,y轴偏移值 每次位移后 原点应回去
  • oCG.scale();x,y轴缩放因子
  • oCG.rotate();弧度 正值为顺时针

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进