最近在做一个消息定时器,需要在离线环境中使用,通过表单写入事项存储到本地,渲染在表格中。尝试过使用Node.js进行文件读写操作,受到UI框架的限制;同时测试了localStorage存储,也达不到想要的效果。最后直接使用WebSql和indexDB来完成。以下是一个DEMO,实际效果正在测试中…
123456789// html<button id="btn-create">创建user数据表</button><button id="btn-insert">插入数据</button><button id="btn-query">查询数据</button><button id="btn-update">修改数据</button><button id="btn-delete">删除数据</button><button id="btn-drop&qu ...
安装编译工具
12345678910"scripts": { "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\"", "lite": "lite-server", "tsc": "tsc", "tsc:w": "tsc -w"},"devDependencies": { "concurrently": "^5.0.0", "lite-server": "^2.5.4"}
props父传子组件的属性,props值可以是一个数组或对象。
$emit子传父组件绑定自定义事件。
1234// 父组件<home @title="title">// 子组件this.$emit('title',[{title:'这是title'}])
vuexvuex是一个状态管理器插件,适合数据共享多的项目。
state:定义存储数据的仓库,可通过this.$store.state或mapState访问;
getters:获取store值,可认为是store的计算属性,可通过this.$store.getters或mapGetters访问;
mutations:同步改变store值,为什么会设计成同步,因为mutation是直接改变store值,Vue对操作进行了记录,如果是异步无法追踪改变,可通过mapMutations调用;
actions:异步调用函数执行mutation,进而改变store值,可通过this.$dispatch或mapActions访问;
modules:模 ...
前言浮动float的渲染位置在行框与包含块之间,这样可以使得行框内文字与浮动元素不重叠,并且环绕它显示。在布局过程中经常使用它实现左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通流内元素高度设置,这样就会导致脱离普通流的浮动元素溢出容器,影响后面的元素布局。
已知的清除浮动元素方法:
采用一个HTML标签,以及css的clear属性,手动清除浮动;
采用伪类:after动态建立一个块元素,设定clear属性,清除之前的浮动元素;
采用css overflow非visible值(overflow:auto/overflow:hidden)设定使父容器包含浮动元素;
采用display:table/display:table-cell等table系列属性将父元素变成table形式自动包含浮动元素;
使用table以及td标签作为浮动元素容器;
采用float:left/float:right方式将父元素同样浮动,就可以包含浮动内容;
在IE 6/7的标准文档模式中设置width/height/zoom等样式来自动清除浮动;
使用clear样式清除1.cl ...
插件
Beautify
chinese Language
open in browser
Vetur
minapp
settings.json123456789101112131415161718192021222324{ "window.zoomLevel": 1, "markdown.preview.fontSize": 16, "[html]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[javascript]": { "editor.defaultFormatter": "HookyQR.beautify" }, "[json]": { "editor.defaultFormatt ...
商品计价的千分位分隔符转换1return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
去除字符串的空格
字符串原生trim方法,只能去除两侧空格,返回新字符串
replace正则匹配
去除所有空格:str = str.replace(/\s*/g,"")
去除两侧空格:str = str.replace(/^\s*|\s*$]/g,"")
去除左侧空格:str = str.replace(/^\s*/,"")
去除右侧空格:str = str.replace(/\s*$/,"")
中文、英文、数字但不包括下划线等符号
中文:^[\u4e00-\u9fa5]{0,}$
中文、英文、数字:^[\u4e00-\u9fa5A-Za-z0-9_]+$(包括下划线),[\u4e00-\u9fa5A-Za-z0-9]+$/[\u4e00-\u9fa5A-Za-z0-9]{ ...
在实际的业务中,经常有跨组件共享数据的需求,Vuex就是设计用来统一管理组件状态的,它定义了一系列规范来使用和操作数据,使组件的应用更高效。
引入Vuex之后统一对共享数据进行管理存放,在各个页面中可以利用commit方法提交mutation对共享数据进行修改。
123456789101112131415161718192021222324252627// store/index.jsexport default new Vuex.Store({ state: { count: 0 }, mutations: { increment: state => state.count++, decrement: state => state.count-- }})// Component.vueexport default { computed: { count() { return this.$store.state.count; ...
key属性为了方便Vue实例跟踪每个节点的身份,从而重用和重新排列现有元素,需要为每项提供一个唯一的key属性。理想的key属性值是每项都有并且唯一的id。key的工作方式类似于一个属性,所以需要用v-bind来绑定动态值。
生命周期函数表
生命周期函数
含义
beforeCreate(创建前)
组件实例刚被创建,组件属性计算之前,比如data属性等
created(创建后)
组件实例刚创建完成,属性已经绑定,此时DOM还未完成,$el属性还不存在
beforeMount(载入前)
模板编译、挂载之前
mounted(载入后)
模板编译、挂载之后
beforeUpdate(更新前)
组件更新之前
updated(更新后)
组件更新之后
beforeDestroy(销毁前)
组件销毁前调用
destroyed(销毁后)
组件销毁后调用
单向数据流在Vue中通过props传递数据是单向的,也就是父组件数据会传递给子组件,但是反过来不成立。之所以这样设计,就是尽可能将父子组件解耦,避免子组件无意间修改父组件的状态。
业务中经常遇到两种需要改变pr ...