网站栏目内容和功能,微信链接的微网站怎么做的,saas系统是什么意思,泰安网站建设步骤一、虚拟DOM
1、原生JS是命令式编程#xff0c;当渲染在页面的数据发生一点点变化#xff0c;需要整个重新渲染一编。vue.js渐进式框架有个虚拟DOM的概念#xff0c;运用diff算法#xff0c;比较新旧数据#xff0c;相同的数据不变不重渲染#xff0c;不同的部分新数据…一、虚拟DOM
1、原生JS是命令式编程当渲染在页面的数据发生一点点变化需要整个重新渲染一编。vue.js渐进式框架有个虚拟DOM的概念运用diff算法比较新旧数据相同的数据不变不重渲染不同的部分新数据覆盖旧数据。
二、MVVM
1、MVM是数据‘模块’V是DOM元素‘视图’
2、VM是指Vue对象实例。是M和V联系的桥梁
三、数据代理
1、Object.defineProperty() let a{x:9}; let b{y:1}; Object.defineProperty(b,x,{ get(){ return a.x ; } , set(value){ a.xvalue } , }) 2、输出vue实例对象data下的数据存放在vm的_data对象中。而dom元素插值数据是从vm下的取的属性值。也就是说vue封装了数据代理机制(底层用了Object.defineProperty()方法)。 四、事件修饰
0、clickhandle(event)等价于clickhandle($event)
1、prevent阻止默认行为比如a表亲啊加链接的跳转行为会被阻止
2、stop阻止冒泡事件
3、onece事件只能执行一次
4、capture冒泡模式切换成捕获模式
5、self只有事件发生在自己身上不是因为冒泡或者捕获触发的事件才会触发事件
6、passive比如wheel事件只有执行完方法里的代码才会回调滚动滚动条加了passive,会先滚动滚动条再执行方法里的行为。
7、事件修饰可以连着写比如click.prevent.stophandle()
五、键盘事件
1、event.key获取键盘按键的名称evant.keycode获取键盘按键的代码
2、keydown,keyup
3、常用按键名称enter、tab只对keydown有效、eac、delete、space、top、bottom、left、right
4、特殊用法的几个按键ctrl、alt、shift、meta
配合keyup使用按下按键配合其他按键再释放其他按键触发事件比如ctrls再释放s键
配合keydown用正常使用
当配合keyup使用的时候可以指定另一个按键如keyup.ctrl.khandle(),这样就只能配合k使用了。
5、也可以配合使用按键的keycode随时会停止维护不推荐
6、自定义键名vue实例外Vue.keycodes.自定义建名按键编码
六、插值语法{{}}、方法methods、计算属性computed
1、当任意数据发生改变时dom元素和插值语法中的数据或者方法写插值语法中的防范必须带括号会重新解析一遍
2、而计算属性只会初次加载和相关联数据发生改变的时候才会触发计算属性重新解析因为计算属性可以缓存数据
3、计算属性中有getter方法和setter方法当只有getter方法没有setter方法的时候计算属性可以简写写在插值语法中的方法名可以不带括号 computed:{ get:function handle(){ return this.a; }, } 简写 computed:{ handle() { return this.a; }, } 七、 监视、深度监视、另一种写法、简写
1、监视当data中的属性或者computed计算属性发生改变回调的方法。如果将immediate属性改为true则每次进入页面的时候自动对该属性进行一次监视。 data:{ a:1, }, watch:{ a:{ immediatetrue, handler(newValue,oldValue){ console.log(a发生改变了) } } } 2、 深度监视当属性是嵌套的对象监视属性中的某个属性变化就是深度监视 如 data:{ a:{ b:2, c:3, } } //1、此时要监视a属性中的b发生变化后的回调则加引号读取对象a的b值 watch:{ a.b:{ handler(newValue,oldValue){ console.log(a的b发生改变了) } } } //2、那如果是监测a对象a对象地址即a{o:9}发生改变的回调呢 watch:{ a:{ immediatetrue, handler(newValue,oldValue){ console.log(a发生改变了) } } } //3、那如果是监测a对象中任一值发生改变的回调呢答将deep属性改为true值。 watch:{ a:{ deeptrue, handler(newValue,oldValue){ console.log(a的某某值发生改变了) } } } 3、深度监视 【1】Vue中的watch默认不监测对象内部值的改变只监测一层 【2】加deep属性改为true值watch可以检测对象内部值的改变可以检测对象多层嵌套层里面的值 【3】但是Vue自身是可以检测到对象内部多层数据的改变只是Vue提供的watch属性不允许。
4、监视、深度监视还可以这样写 const vmnew Vue({ data:{ a:1, } }); vm.$watch(a,( handle(newValue,oldValue){ console.log(a发生改变) } )) 5、监视的简写当只有handle回调没有immediate、deep等其他配置项的时候监视是可以像getter一样监视的 简写1 watch:{ a(newValue,oldValue){ console.log(a发生改变了) } } 简写2 vm.$watch(a,function(newValue,oldValue){ console.log(a发生改变了) }) 八、computed计算属性和watch侦听
1、computed能办到的watch也能办到watch能办到的computed不一定能办到比如watch中可以写异步函数computed中不能写异步函数
九、什么时候用箭头函数
1、非Vue管理的函数定时器、Promise、axios等回调函数里面用箭头函数这样用的this指向的是vm Vue实例或组件实例对象。
2、所有Vue管理的函数最好写成普通函数
十、Vue侦听和watch侦听原理
1、一斑窥豹 【1】未添加setter和getter方法的对象打印出来是这样的 【2】添加setter和getter方法的对象打印出来是这样的
2、如果在对象本身上添加setter会造成n次递归内存溢出所以封装一个类似Observer的构造函数在另一人身上复刻属性并添加setter和getter方法 [异常RangeError: Maximum call stack size exceeded at Object.get [as name]
范围错去:name属性超过Object处的最大调用堆栈大小。
3、Vue封装了一个递归查询可以找出对象嵌套多层中的对象并为之添加setter和getter方法直到最后不是对象类型的数据为止如数组、字符串、数字、Boolean、null、undefined等等。
4、 为所有哪怕深层嵌套的对象添加setter和getter之后会将其拷贝到vm._data中紧接着将vm._data数据代理到vm自身上。实现Vue框架上的dom元素可实时获取vm身上的数据。如{{information.name}}。
十一、从Vue侦听原理得出未添加setter和getter方法的非对象类属性是不可被直接更改的
问题 一
点击按钮往对象a中添加一个属性b页面不呈现b的值。是因为Vue没有侦听到b属性b属性不具备getter和setter操作。 点击之后数据不呈现 2、解决办法
【1】把a对象这个数据更新一遍因为a身上有getter和setterthis.a{......}。
【2】用Vue自身上的set方法添加属性Vue.set(target,key,value)前提是引入import Vue from vue。比如Vue.set(a,b,你很好真的很好)。或者this.$set(target,key,value)。效果一样。
【3】注意不能再vm自身或者根目录上比如vm._data用set方法。
问题二删除属性,就是用对象的原生方法delete删除属性也存在没效果的问题
解决办法用this.$delete(对象名对象属性),Vue.delete(对象名对象属性)前提是引入import Vue from vue
问题三
同理直接添加或者修改不被setter和getter的数组呢
比如对象里面放数组数组里面对象但凡对象都有setter和getter那么中间一层的数组没有setter二号getter那么直接改变数组的话页面不呈现改变后端信息 解决办法
【1】用this.$set(persons,0,{id:001},name:马老师age:50,sex:男)
【2】用Vue封装的操作数组push() pop() shift( unshift() splice() sort() reserve() 1这些方法本质做了两件事1、包裹Array原型链上的原生方法2、重新解析解析模板进而更新页面。
十二、常用命令
1、v-bind 语法糖——“”
2、v-model
3、v-if v-else-if v-else
4、v-on 语法糖——
5、v-show
6、v-click v-事件,指令遇到驼峰命名改大写为-作为衔接符号比如v-caps-lock 7、v-cloak 后面不加属性表示当vue接管dom容器的时候删除原来的带v-cloak的dom用于js阻塞情景和css样式结合使用如overflowhidden
8、v-once
9、v-pre 后面不加属性加了该指令的dom不被解析跳过解析解析后面的dom
10、v-text 不解析标签
11、v-html 能解析标签存在安全隐患容易收到XSS攻击
十三、自定义指令
往vue实例种添加配置项类似于data mehods computed等directives:{}
两种形式1、函数形式2、对象形式
element参数是自定义指令所绑的dom元素
binding参数自定义指令可以绑定属性比如input v-fbind:valuename type“text” 2、自定义指令遇到定义名称为驼峰命名使用指令名称用-衔接例如lookYou,使用的时候是
v-look-you。
3、directives配置项中的this指向的是window
4、配置全局指令
Vue.directive(bind,{
函数形式或者对象形式的属性
})
十四、mixin混合
1、建一个混入js文件mixin.js里面放一个对象并导出里面放data、methods、mounted等配置项 2、 再在组件中引入混合文件对象如import {hunhe1,hunhe2} from ./mixin.js
3、通过mixins配置项
mixins:[hunhe1,hunhe2] 十五、插件
vue中如何自定义指令directive_vue.directive binding.value 空_小聪_的博客-CSDN博客
1、创建js后缀文件在里面创建一个对象并export导出
2、对象中放install(Vueoption){}方法参数Vue就是方法中的可以获取Vue构造函数Vue身上的方法属性随便用
3、install方法中可以写全局配置项目
【1】全局Vue.filter(将调用的过滤名称,{......过滤动作})
【2】自定义全局指令Vue.directive(“名称”function(element,bingding){......})
【3】全局混入Vue.mixin({。。。。。}) 【4】还可以Vue.prototype.方法或者属性名称。。。。
【5】在main.js中引入插件文件如 import plugin from ./plugin.js(局部输出加花括号并且引入名称由局部输出的名称决定默认呼出不加花括号引入名称可以自定义)再在下面Vue.use(plugin)
经过上面的操作后自定义的全局过滤器、全局指令、全局混入、方法、属性在所有组件中可以在dom元素中直接使用vm实例下获取r如this.x //100。
十六、脚手架依托于webpack
1、获取webpack的所有版本信息
npm view webpack versions
十七、mapState mapGatters 十八、mapMutations mapStations 3、namspaced:true
十八、插槽
1、默认插槽
2、具名插槽
3、作用局插槽
