vue
yakunyang(2016)
入坑2016,留下一些日志,做留恋流年
展开
-
vue hook
//父组件<rl-child :value="40" @hook:mounted="childMountedHandle" />method () { childMountedHandle() { // 子组件触发mounted,父组件就触发这个事件 }},//子组件,什么也不需要操作mounted() {document.addEventListener('scroll', this.throttle);this.$once('hook:...原创 2021-03-10 21:14:42 · 83 阅读 · 0 评论 -
每周有收获之--实战德芙般丝滑tabs
像element ui 一样nav 部分丝滑的tabs切换关键在于获取dom 的宽度。通过宽度计算自己应该的left 和自身宽度 然后使用css3transition: all 1s ease;或者其他 css 插件或者js 插件实现动画红色标记处切换要有丝滑动效果。mounted 后执行截图中的函数;乘以 0.8 是因为 。 ui要求 下划线的宽度是 当前nav 宽度的 80%...原创 2021-01-18 21:10:01 · 104 阅读 · 0 评论 -
每周有收获之--Vue 边界组件循环引用、es6 Module循环引用
Vue 边界循环引用。需要注意的地方如果是tree状态递归组件,注意递归过程中的<Tree v-if> 判断。否则容易溢出 index业务页面中先A组件,但是A使用了B组件。B组件中也使用了A组件“形成了父子悖论”除了注意v-if判断。A组件可以在动态引入B组件。或者在A组件beforeCreate中注册B组件。或者将二者全注册。方法1://方法2在Tree组件中beforeCreate: function (...原创 2021-01-17 11:15:16 · 239 阅读 · 0 评论 -
vue 组件通信之--非业务性组件不应该依赖 vuex
组件信息之间传递$bus this.$parent Provide inject Vue.observable // 创建临时store原创 2020-12-28 21:04:56 · 92 阅读 · 0 评论 -
每周一组件 之-懒加载指令
const LazyLoad = {init(el, val, defaultSrc) {el.setAttribute('data-src', val)el.setAttribute('src', defaultSrc)},observe(el) {var io = new IntersectionObserver((entries) => {const realSrc = el.dataset.srcif (entries[0].isIntersecting) {原创 2020-12-28 20:57:48 · 86 阅读 · 0 评论 -
每周一组件之--指令-- 防抖截流指令
可以来回传递参数的指令。可以进行封装上传组件之类的const throttleHaveParam = {inserted: function(el, binding) {let timeoutel.addEventListener('input', function() {const _this = this;const args = arguments;if (!timeout) {timeout = setTimeout(() =&g...原创 2020-12-28 20:53:51 · 169 阅读 · 0 评论 -
每周一组件之- MP3组件的自我管理
<template><div class="player"><audioclass="hidden"ref="audio"@pause="pause"@play="play"@timeupdate="updateTime"@ended="ended":src="src"controls="controls"controlslist="nodownload"></audio><div @click="paly原创 2020-12-28 20:47:23 · 119 阅读 · 0 评论 -
vue 一些必须的规则(规范)
1,父子组件(强耦合)则 父亲为 ToDoList 儿子组件应该在父亲组件的名字之上命名 例如ToDoListItem2,组件的命名的单词的顺序。应该是描述性质的形容词或动词在最后。例如SearchButtonClear.vue(名词在前) 而不是ClearSearchButton3.单例组件(不需要props传输值)命名:举个例子:TheHead TheSiderBar4.私有属性 建议: $_siyoushuxing(){} 或者:methods:{ p...原创 2020-11-19 18:37:51 · 401 阅读 · 0 评论 -
vue 中的 computed 的 set
先看代码computed: {fullName: {// getterget: function() {return this.firstName + ' ' + this.lastName},// setterset: function(newValue) {console.log('9999');var names = newValue.split(' ')this.firstName = names[0]}}},解释:代码中,fullName原创 2020-11-19 17:14:46 · 6918 阅读 · 0 评论 -
vue 组件之间的通信 非业务性组件不应该依赖 vuex
vue 组件之间的通信。(非业务性组件。不应依赖vuex) 或者 自己管理好自己。provide/inject祖先组件中通过provider来提供变量,然后在孙组件中通过inject来注入变量procide/inject API主要解决了跨域组件间的通讯问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系下边通过一个例子来说明provide/inject的用法:父组件<template> <div> .原创 2020-11-13 11:46:16 · 155 阅读 · 0 评论 -
vue v-html 字符串 动态 渲染模版 v-html 动态组件 添加事件
// 1,首先在 webpack 配置中alias: {'vue$': 'vue/dist/vue.esm.js' // 内部为正则表达式 vue结尾的}// 2 在main 中// new Vue({// router,// store,// render: h => h(App)// }).$mount("#app")// 3 动态组件demo...原创 2020-09-27 21:47:50 · 2645 阅读 · 0 评论 -
vue-cli3.0中vue.config.js配置
vue-cli3.0中vue.config.js配置// 打包去掉consoleconst TerserPlugin = require('terser-webpack-plugin');module.exports = { // 查阅 https://github.com/vuejs/vue-cli/tree/dev/docs/zh/config // 项目部署的基础路径,我们默认假设你的应用将会部署在域名的根部,比如 https://www.my-app.com原创 2020-08-27 14:24:18 · 523 阅读 · 0 评论 -
vue 新增新属性,vue书写规范
有时你可能需要为已有对象赋予多个新属性,比如使用Object.assign()或_.extend()。在这种情况下,你应该用两个对象的属性创建一个新的对象。所以,如果你想添加新的响应式属性,methods: {clickAdd(){this.obj = Object.assign({},this.obj,{"age":1111})}vue 方法放置顺序comp...原创 2019-01-18 14:16:26 · 439 阅读 · 0 评论 -
vue sync 修饰符 vue2.23 重新引入了
这篇博客 已经写的很清楚了, 但是还需要补充一点。https://www.jianshu.com/p/6b062af8cf01 感谢!具体小坑如下图:原创 2019-04-18 15:44:39 · 117 阅读 · 0 评论 -
vue 监听数组对象 深度监听
watch: {//监视交核实题目这个开关,如果是开启,才能有添加按钮SwitchOne(val){alert("---hahha 开关被监视了",val)if(val){this.isShowAddBtn = true;}else{this.isShowAddBtn = false;}},'dynamicValidateForm':{ // 监视选中的数据...原创 2018-11-29 19:04:40 · 2449 阅读 · 0 评论 -
Vue 组件通信 非父子组件之间通信(兄弟组件之间通信)
1, 父子组件之间通信(属性传值,props承接,this.$emit往上带参传值,自定义事件接受。....过程省去,,,,,);2,父子,非父子,可使用 vuex 实现,过程省去,goole解决(以及官网解决之);2,方法二,非父子组件之间通信(1,需要建立一个中转的Vue实例Bus,然后组件A,组件B 通过这个bus实例中转一下达成AB通信的目的);(1),建立bus.js(bus...原创 2018-07-20 16:05:42 · 499 阅读 · 0 评论 -
vue v-if v-show
1.共同点都是动态显示DOM元素2.区别(1)手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;(2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换;(3)编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为...原创 2018-02-27 23:22:36 · 175 阅读 · 0 评论