- 博客(102)
- 收藏
- 关注
RSS订阅原创 数据库操作
是最低层次的透明性，该透明性提供数据到局部数据库的映像，即用户不必关心局部DBMS支持哪种数据模型、使用哪种数据操作语言，数据模型和操纵语言的转换是由系统完成的。同真实的表一样，视图包含一系列带有名称的列和行数据。设R(U,F)是属性U上的一个关系模式，X和Y是U的子集，r为R的任一关系，如果对于r中的任意两个元组u, v, 只要有u[X]=v[Y], 则称X函数决定Y，或称Y函数依赖于X，记为X->Y。是指用户不必关心数据是如何分片的，它们对数据的操作在全局关系上进行，即如何分片对用户是透明的。
2023-10-10 08:55:48
104
原创 Vue正式篇（四）理解Vue设计思想（二）
Vue中的数据响应化目标代码kvue.html<div id="app"> <p>{{counter}}</p></div><script>const app = new Vue({ el: '#app', data: { counter: 1 },})setInterval(() => { app.counter++}, 1000)</script>
2021-02-08 08:38:16
320
原创 Vue正式篇（四）理解Vue设计思想（一）
理解Vue的设计思想MVVM模式MVVM框架的三要素：数据响应式、模板引擎及其渲染数据响应式： 监听数据变化并在视图中更新Object.defineProperty()Proxy模板引擎： 提供描述视图的模板语法插值：{{}}指令：v-bind, v-on, v-model, v-for, v-if渲染： 如何将模板转换为html模板=> vdom => dom数据响应式原理数据变更能够响应在视图中，就是数据响应式。vue2中利用Object.definePr
2021-02-08 08:36:01
387
原创 Vue正式篇（三）全家桶Vuex
Vuexvuex集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。vue add vuex核心概念state状态、数据mutations更改状态的函数actions异步操作store包含以上概念的容器状态-statestate保存应用状态export default new Vuex.Store({ state: { counter: 0 }})状态变更-mutationsmutations用于修改状态，store.jsexport def
2020-09-20 20:22:42
449
原创 Vue正式篇（二）全家桶vue-router
vue-routerVue Router是Vue.js官方的路由管理器。它是Vue.js的核心深度集成，让构建单页面应用变得易如反掌。安装：vue add router核心步骤：步骤一：使用vue-router插件，router.jsimport Router from 'vue-router'Vue.use(Router)步骤二：创建Router实例，router.jsexport default new Router({...})步骤三：在根组件上添加该实例，main.jsimp
2020-09-20 18:43:56
168
原创 Vue正式篇（一）组件化
组件化Vue组件系统提供了一种抽象，让我们可以使用独立可复用的组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件化能提高开发效率，利于复用，简化调试步骤，提升项目可维护性，便于多人协同开发。组件通信常用方式propseventbusvuex自定义事件：边界情况– $parent– $children– $root– $refs– provide/inject非prop特性– $attrs– $listeners注：事件的派发和监听是同一个。props父
2020-09-20 18:43:02
341
原创 Vue正式篇（一）番外 v-model和:model的区别？
v-model和:model的区别？v-model通常用于input的双向数据绑定<input v-model="parentMsg">，也可以实现子组件到父组件数据的双向数据绑定。父组件：<div> <input type="text" v-model="msg"> <child v-model='msg'></child></div>子组件：Vue.component('child', { props: ['va
2020-08-30 18:32:31
284
原创 Vue预习篇（十）vuex
Vuex安装vue add vuex起始State将应用全局状态定义在state中state: { isLogin: false}Mutation修改state只能通过mutationmutations: { login(state) { state.isLogin = true }, logout(state) { state.isLogin = false }}获取和修改状态使用store.state获取状态<button @click="logi
2020-08-30 15:17:42
200
原创 Vue预习篇（九）路由vue-router
7、路由安装vue add router起步路由规划、配置，router/index.js商品列表（home） - 商品管理（about）路由出口、导航，App.vue<nav> <router-link to="/">首页</router-link> <router-link to="/about">管理</router-link></nav><router-view></router-view
2020-08-30 13:25:58
179
原创 Vue预习篇（八）Vue Cli
Vue Cli快速原型开发你可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发。
2020-08-30 13:24:11
212
原创 Vue预习篇（七）5、插件
5、插件插件通常用来为Vue添加全局功能。插件的功能范围一般由下面几种：添加全局方法或属性。添加全局资源：指令/过滤器/过渡等。通过全局混入来添加一些组件选项。添加Vue实例方法，通过把它们添加到Vue.prototype上实现。一个库，提供自己的API，同时提供上面提到的一个或多个功能。插件声明Vue.js的插件应该是暴露一个install方法。这个方法的第一个参数是vue构造器，第二个参数是一个可选的选项对象：MyPlugin.install = function(Vue, opt
2020-08-30 13:22:08
206
原创 Vue预习篇（七）4、混入
4、混入混入（mixin）提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。// 定义一个混入对象var myMixin = { created: function() { this.hello() }, methods: { hello: function() { console.log('hello f
2020-08-30 13:21:25
102
原创 Vue预习篇（七）3、渲染函数
3、渲染函数Vue推荐在绝大多数情况下使用模板来创建你的HTML。然而在一些场景中，你真的需要JavaScript的完成编程的能力。这时你可以用渲染函数，它比模板更接近编译器。
2020-08-30 13:21:05
374
原创 Vue预习篇（七）2、自定义指令
2、自定义指令除了核心功能默认内置的指令（v-model和v-show），Vue也允许注册自定义指令。注意，在Vue2.0中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通DOM元素进行底层操作，这时候就会用到自定义指令。范例：输入框获取焦点Vue.directive('focus', { inserted(el) { el.focus() }})使用，cource-add<input v-focus>范例：按钮权限控制const role = '
2020-08-30 13:19:55
134
原创 Vue预习篇（七）1、过滤器
1、过滤器Vue.js允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和b-bind表达式（后者从2.1.0+开始支持）。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示：<!-- 在花括号中 -->{{ message | capitalize }}<!-- 在`v-bind`中 --><div v-bind:id="rawId | formatId"></div>范例：course
2020-08-30 13:19:05
130
原创 Vue预习篇（五）Vue必会API
1、数据相关APIVue.set向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。使用方法：Vue.set(target, propertyName/index, value)范例：批量设置商品价格<template> <!-- 添加批量价格更新 --> <p> <input v-model.number="price"> <button @click="batchUpd
2020-08-27 21:15:53
242
原创 Vue预习篇（四—番外篇）.sync修饰符
理解vue中的 .sync 修饰符.sync是vue中用于实现简单的“双向绑定”的语法糖。vue的prop是单向下行绑定：父级的prop的更新会向下流动到子组件中，但是反过来不行（vue的单向数据流）。可是有些情况，我们需要对prop进行“双向绑定”。这个时候，就可以用.sync来解决。.sync用法<text-document :title.sync="doc.title"></text-document>// 当子组件需要更新 title 的值时，它需要显式的触发一个
2020-08-27 21:03:50
134
原创 Vue预习篇（四）组件化
组件化Vue组件化的理解组件化是Vue的精髓，Vue应用就是由一个个组件构成的。Vue的组件化涉及到的内容非常多，当面试时被问到：谈一下你对Vue组件化的理解。这时候有可能无从下手，可以从以下几点进行阐述：定义：组件是可复用的Vue实例，准确讲它们是Vue Component的实例，继承自Vue。优点：复用性、可维护性和可测试性。使用场景：什么时候使用组件？以下分类可作为参考：通用组件：实现最基本的功能，具有通用性、复用性，例如按钮组件、输入框组件、布局组件等。业务组件：它们完成具体业务，具
2020-08-27 20:58:25
150
原创 Vue预习篇（三）生命周期
生命周期图使用场景分析beforeCreate(){} // 执行时组件实力还未创建，通常用于插件开发中执行一些初始化任务created(){} // 组件初始化完毕，各种数据可以使用，常用于异步数据获取beforeMounted(){} // 未执行渲染、更新，dom未创建mounted(){} // 初始化结束，dom已创建，可以用于获取访问数据和dom元素beforeUpdate(){} // 更新前，可用于获取更新前各种状态updated(){} // 更新后，所有状态已是最新
2020-08-27 20:51:07
264
原创 Vue预习篇（二）计算属性和监听器
2、计算属性和监听器const app = new Vue({ computed: { total() { return this.courses.length + '门' } }, // 下面这种不能生效，因为初始化时不会触发 // watch: { // couses(newVal, oldVal) { // this.totalCount = newVal.length + '门' // } // } watch: { courses: { immedia
2020-08-27 20:47:08
178
原创 Vue预习篇（一）模板语法
预习1、模板语法Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。文本<p>{{ message }}</p>Html<div id="app"> <div v-html="message"></div></div> <script>new
2020-08-27 20:46:07
211
原创 图片懒加载记录
// 图片处理$.each(data.imgList, function(i, n) { body.contents().find('#panel_imgList').append('<img src="' + tcymjcmJmqr.interfacePrefix + 'app/img/jiazai.gif" data-src="' + tcymjcmJmpr.interfacePre...
2020-04-23 14:12:12
169
原创 es6中的map
详解map？创建map集合？Map集合支持的方法？传入数组来初始化Map集合？同名属性碰撞？遍历？转为数组？forEach?JS的对象（Object），本质上是键值对的集合（Hash结构），但是传统上只能用字符串当做键，这给它的使用带来了很大的限制。为了解决这个问题，ES6提供了MAP数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。...
2020-04-22 15:47:19
274
转载 对es6中class的理解
ES6提供了更接近传统语言的写法，引入Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类，与多数传统语言类似。// 定义类class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ',' + this.y + ')'; ...
2020-04-21 17:01:38
352
原创 对es中的iterable的理解
iterable为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型，具有iterable类型的集合可以通过for…of循环来遍历var a = ['A', 'B', 'C'];var s = new Set(['A', 'B', 'C']);var m = new Map([[1, 'x'], [2, 'y'], [3, 'z'...
2020-04-21 09:11:55
407
原创 重新理解vuex
store.js中基本代码：import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const cart = {};export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {}, modules: {...
2020-01-03 16:59:01
151
原创 vue中实现表单校验
前提条件：vue-cli创建一个项目，安装async-validator（npm i async-validator -S）在components中新建FormTest.vue组件，并在App.vue中引入。一个form表单需要form、formItem、input，初步代码如下：formTest:<template> <div> for...
2020-01-02 21:00:11
3313
1
转载 数据双向绑定原理
所谓双向数据绑定，无非就是数据层和视图层中的数据同步，在写入数据时视图层实时的跟着更新，具体描述:实现mvvm的双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，出发相应的监听回调。就必须要实现以下几点：实现一个数据监听器Observer，能够对数据对象的所有属性进...
2020-01-02 11:09:03
743
原创 微信小程序有关事件绑定与冒泡捕获的描述
事件绑定的写法和组件属性一致，以key="value"的形式，其中：1、key以bind或者catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。2、value是一个字符串，需要在对应的页面Page构造器中定义同名的函数，否则触发事件时在控制台会有报错信息。bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段，如图：以下示例中，点击 in...
2019-10-09 09:25:25
208
1
原创 各种时间日期处理收集
当前日期：function currentTime() { var now = new Date(); var year = now.getFullYear(); // 年 var month = now.getMonth() + 1; // 月 var day = now.getDate(); // 日 var hh = now.getHours(); // 时 var m...
2019-08-27 13:41:46
278
原创 websocket心跳重连（避免断网、服务器重启等）
背景websocket链接，为实现断网、服务器重启等特殊情况。原理每隔一段时间向服务器发送一次数据 即（heartCheck.start()），服务器接收数据后返回一次信息，用来证明一切正常，否则就开始启动新的定时器来尝试重新连接（websocketReconnect()一定的时间尝试重连，如此重复）。代码var lockReconnect = false;//避免重复连接var ws...
2019-02-18 17:19:14
14480
3
原创 前端处理后端传来的文件流实现下载或预览
直接下载var url = this.GLOBAL_URL + "/api/GetFile?id=" + id; // 请求的url + idvar xhr = new XMLHttpRequest();xhr.open("GET", url, true)xhr.responseType = "blob";xhr.setRequestHeader("client_type", "DES...
2019-01-07 16:29:28
21080
6
原创 关于vue中slot的理解
将父组件的内容放到子组件指定的位置叫做内容分发// 在父组件里使用子组件<son-tmp> <div>我是文字，我需要放到son-tmp组件里面指定的位置</div></son-tmp>1.单个插槽父组件：father.vue<template> <div id="app"> <son-
2019-01-07 10:57:29
3492
4
原创 vue项目加载优化之懒加载，以及Loading chunk {n} failed解决方法
一、懒加载懒加载：随时用随时加载，避免单页面应用一次性加载所造成的时间过长。import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { path: '/', redirect: '/login' ...
2019-01-07 10:08:18
11832
转载 基于Elementui的日期选择器时间范围限制
一般在实际开发场景中我们需要对时间选择做一些限制，如不能选择今天之前的时间、不能选择今天以后的日期、限制日期不能大于开始日期等等。日期组件<el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0"> </el-date-picker...
2019-01-07 09:25:53
2578
2
原创 js获取两个日期之间的所有日期
在实际项目中，我们偶尔会用到获取两个日期之间的所有日期getAll(begin, end){ // 开始日期和结束日期 if(!begin || !end){ // 去除空的可能性 console.log('有时间为空')； return false; } // 在时间Date的原型中定义一个format方法 Date.prototype.format = functio...
2018-11-20 09:27:00
4995
5
原创 vue项目中的elementui的表格中画甘特图
最近的项目要求甘特图在elementui中实现，在此做出总结。性能限制，不能传入太多的数据。需要条件：时间：计划开始时间、计划结束时间、开始时间、结束时间最大时间和最小时间。思维：渲染表格头、渲染天数、填充色块。实现简单的表格&lt;el-table :data = "tableData" border&gt; &lt;el-table-column label="...
2018-11-19 20:11:39
11910
6
转载 webpack进阶之路三、（实战一，使用ES6、ts、Flow、SCSS）
一、使用新语言来开发项目1、使用ES6语言通常我们需要将采用ES6编写的代码转换成目前已经支持良好的ES5代码，包含如下：将新的ES6语法用ES5实现，例如ES6的class语法用ES5的prototype实现；为新的API注入polyfill，例如使用新的fetch API时在注入对应的polyfill后才能让低端浏览器正常运行。认识BabelBabel(https://bab...
2018-11-07 19:19:12
3072
1
转载 webpack进阶之路二、（配置）
Entry：配置模块的入口。Output：配置如何输出最终想要的代码。Module：配置处理模块的规则。Resolve：配置寻找模块的规则。Plugins：配置扩展插件DevServer：配置DevServer。其他配置项：其他零散的配置项。整体配置解构：整体地描述各配置项的结构。多种配置类型：配置文件不止可以返回一个Object，还可以返回其他形式。配置总结：寻找配置Webp...
2018-11-07 09:22:13
1362
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人