![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
林不羁
这个作者很懒,什么都没留下…
展开
-
结合源码,Vue组件data为什么必须是个函数而Vue的根实例则没有此限制
源码:src\core\instance\state.js-initData()函数每次执行都会返回全新data对象实例1.测试代码<body> <div id="demo"> <comp></comp> <comp></comp> </div> <script src=...原创 2020-04-02 12:21:48 · 264 阅读 · 0 评论 -
结合源码,谈谈v-for和v-if谁的优先级高?应该如何正确使用避免性能问题?
对应源码的位置compiler/codegen/index.js1.测试的案例代码<body> <div id="demo"> <p v-for="child in children" v-if="isFolder">{{child.title}}</p> <!-- <template v-if="isFold...原创 2020-04-02 12:24:24 · 952 阅读 · 0 评论 -
结合源码谈谈对vue组件化的理解
1.组件定义全局组件和单文件组件两种方式2.1 全局组件源码分析1:src\core\global-api\assets.js//是component,filter,directive三个的综合方法export function initAssetRegisters (Vue: GlobalAPI) { /** * Create asset registration me...原创 2020-04-02 12:23:35 · 572 阅读 · 0 评论 -
结合源码,谈谈对vue中diff算法的理解
源码分析1:必要性,lifecycle.js-mountComponent()源码分析2:执行方式,patch.js - patchVnode()源码分析3:高效性,patch.js-updateChildren()1.测试代码2.源码分析2.1必要性首先mountComponent方法是由$mount调用的。也就是任何一个vue组件的实例,在它创建完成之后,要挂载的时候去调...原创 2020-04-02 12:22:37 · 511 阅读 · 0 评论 -
结合源码,谈谈vue中key的作用和工作原理
对应源码的位置src\core\vdom\patch.js-updateChildren()1.测试的案例代码<body> <div id="demo"> <p v-for="item in items" :key="item">{{item}}</p> </div> <script src="../di...原创 2020-03-17 22:43:38 · 1258 阅读 · 1 评论 -
使用Vuex和导航守卫实现底部导航栏的显示和隐藏
使用Vuex和导航守卫实现底部导航栏的显示和隐藏1.需求说明要求在进入登录注册页面的时候底部导航栏不显示2.问题分析而底部导航栏是直接在App.vue根组件中使用的,登陆页也是通过路由显示在根组件上的,所以登录页没法传值直接控制底部导航栏的显示。那么我能通过什么解决了,想到了!用vuex状态管理,开工!3.解决步骤1.先用npm安装vuex2.然后在src下创建文件夹store,创...原创 2020-02-28 10:53:38 · 1239 阅读 · 1 评论 -
better-scroll滚动无效 几种原因
一、DOM层级关系<div class="wrapper"> <div class="content"> content... </div></div>wrapper里面不能存在多个同级div,如果你这样写:<div class="classifyTitle" ref="wrapper"> <di...转载 2020-02-10 12:32:15 · 871 阅读 · 0 评论 -
vue项目中不能使用console而只能使用window.console的解决办法
**问题:**vue项目中不能使用console而只能使用window.console.问题原因:vue脚手架创建的项目package.json中有关eslint的默认配置如下: "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:v...转载 2020-02-06 15:33:42 · 1147 阅读 · 0 评论 -
定义vue-html的template
1.写好模板<body> <div id="app"> <h2>{{message}}</h2> </div><script src="../node_modules/vue/dist/vue.js"></script><script> const app = ...原创 2020-01-27 22:26:58 · 378 阅读 · 0 评论 -
Debug:Unexpected mixed usage of different slot syntaxes
意外混用了不同的slot语法//新旧语法不能混用在一个组件标签上//slot="xxx" slot-scope="xx" 均为旧写法,是可以的//v-slot:xxx slot-scope="xxx" 新旧写法混合,直接报错//渲染错误: Unexpected mixed usage of different slot syntaxes<tag1> <...转载 2020-01-09 13:56:07 · 4059 阅读 · 0 评论 -
Vue子组件调用父组件的方法
第一种方法是在子组件里用emit向父组件触发一个事件,父组件监听这个事件就行了。具体就是子组件触发emit向父组件触发一个事件,父组件监听这个事件就行了。具体就是子组件触发emit向父组件触发一个事件,父组件监听这个事件就行了。具体就是子组件触发emit绑定的事件:fatherMethod, 然后父组件监听fatherMethod, - 旦fatherMethod被触发,便会触发父组件的fath...原创 2020-01-09 15:00:54 · 497 阅读 · 2 评论 -
vue中表单非空项的提交(筛掉为空项)
可以用element-ui 中为input输入框加一个clearable属性当表单域为空时,为自动触发clear方法,将该项置为null,这样表单提交的时候就不用判断表单项是不是有空项了...原创 2020-01-08 16:51:17 · 1481 阅读 · 0 评论 -
Vue---day3
Vue---day31.品牌列表案例1.1 从数据库获取列表1.2 完成添加功能1.3 完成删除功能1.4 全局配置数据接口的根域名和emulateJSON选项2.动画2.1 实现动画2.1.1 使用过渡类名实现动画2.1.2 使用第三方animate.css类库实现动画2.1.3 钩子函数实现半场动画2.1.4 小球动画每次重新开始的位置说明2.2 实现列表动画2.2.1 transition-...转载 2019-08-04 22:12:27 · 157 阅读 · 0 评论 -
Vue基础---day1
Vue---day11.Vue.js 基本代码 和 MVVM 之间的对应关系2 .Vue之 - `基本的代码结构`和`插值表达式`、Vue的指令3.事件修饰符4.Vue指令之`v-model`和`双向数据绑定`4.1 简易计算器案例5.在Vue中使用样式5.1使用class样式5.2使用内联样式6.Vue指令之`v-for`和`key`属性7.Vue指令之`v-if`和`v-show`8.总结1...原创 2019-08-02 10:50:52 · 169 阅读 · 0 评论 -
Vue---day2
Vue---day21.品牌案例1.1 添加功能1.2 根据id删除功能1.3 Vue-devtools的安装方式1.4 根据关键字实现数组的过滤2.过滤器2.1 Vue中全局过滤器的基本使用2.2 定义格式化时间的全局过滤2.3 定义私有过滤器3.字符串的padStart方法使用4.自定义按键修饰符5.自定义指令5.1 让文本框获取焦点5.2 指令-使用钩子函数的第二个binding参数拿到传递...转载 2019-08-03 15:13:17 · 138 阅读 · 0 评论