- 博客(19)
- 收藏
- 关注
RSS订阅原创 vue路由进阶
官方文档：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html一、导航守卫（类似中间件）全局前置守卫（还有很多钩子函数，具体可看文档）你可以使用 router.beforeEach 注册一个全局前置守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => { // to: Route: 即将要进入的目标 路由.
2021-02-27 23:10:58
148
原创 vue路由基础
https://router.vuejs.org/zh/guide/#html一、基础HTML<div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --.
2021-02-26 15:58:23
174
原创 vue-cli
一、介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 实现的交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。一个运行时依赖 (@vue/cli-service)，该依赖：可升级；基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理
2021-02-23 22:20:40
85
原创 vue动态组件&异步组件
https://cn.vuejs.org/v2/guide/components-dynamic-async.html一、在动态组件上使用 keep-alive重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。<!-- 失活的组件将会被缓存！--><keep-alive> <componen.
2021-02-23 16:16:11
130
原创 21/3/10-vue插槽
https://cn.vuejs.org/v2/guide/components-slots.html一、插槽概述在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute注意： v-slot 只能添加在 <template> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。跟 v-on 和 v-bin.
2021-02-23 00:08:20
117
原创 vue组件
一、组件基础为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：注意：每个组件必须只有一个根元素二、父传子（props）<div id="app"> <ul> <!-- 从父组件传值到子组件 --> <!-- 静态属性 --> <school school-name="清华"></school&
2021-02-21 23:12:43
83
原创 vue生命周期
https://cn.vuejs.org/v2/guide/instance.html一、生命周期钩子每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期钩子的 this 上下文指向调用它的 Vue 实例注意：不要在选项 property 或回调上使用箭头函数，比如 created: ().
2021-02-20 17:49:36
101
原创 vue过渡&动画
一、概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js二、过渡的类名v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效
2021-02-20 16:40:36
274
原创 vue表单输入绑定（v-model）
https://cn.vuejs.org/v2/guide/forms.html一、基础用法v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：text 和 textarea 元素使用 value property 和 input 事件；checkbox 和 radio 使用 checked property 和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件。<div id="app">.
2021-02-19 17:57:08
325
原创 vue事件处理
https://cn.vuejs.org/v2/guide/events.html一、监听事件<div id="app"> <h1>点击次数：{{count}}</h1> <button type="button" @click="count+=1">点击1</button> <button type="button" @click="clickE">点击2</button></div><.
2021-02-18 23:41:22
92
原创 vue初识
企业提高开发效率的发展历程原生JS->jquery之类的库->前端模板引擎->Vue.js/Angular.js/React.js（能够帮助我们减少不必要的DOM模板——虚拟DOM；提高渲染效率）框架和库的区别框架：框架是一套完整的解决方案对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。但是优点也很明显，其功能完善，提供了一整套的解决方案库（插件）只是提供某一个小功能对项目入侵性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求Vue和
2021-02-18 16:45:41
159
1
原创 面试笔记（七）
1. 面试题（一）var name = 111var a = { name: 222, say: function(){ console.log(this.name) }}var fun = a.sayfun() // 111a.say() // 222var b = { name: 333, say: function(fun) { fun() //相当于fun.call(window, ...) }}b.say(a.say) // 111b.say = a.sa
2021-02-13 23:32:27
160
2
原创 面试笔记（六）
1. Vue2.0/3.0双向数据绑定的实现原理https://developer.mozilla.org/zhcn/docs/web/javascript/reference/global_objects/object/definepropertyES5：Object.definePropertyES6：Proxy<body> 姓名：<span id="spanName"></span><br> <input type="text"
2021-02-10 00:38:47
141
原创 面试笔记（五）
1. get和post的区别携带数据：get（请求头），post（请求体或请求头）语义：get（获取数据），post（创建数据）缓存：get可以被缓存，post不会安全性：都不安全，但post比get更安全一点，密码等敏感信息放到post上2. Event Loopasync function async1(){ console.log('async1 start'); // 2 await async2() // 3 console.log('async1 end'); // 6}
2021-02-09 01:33:57
177
原创 面试笔记（四）
什么是JSONjson是一直数据格式或结构，本质是一段字符串json格式和js对象结构一致，对js语言更友好JSON.parse：js对应的数据类型=>json格式JSON,stringify：与上面相反
2021-02-07 00:16:29
176
原创 面试笔记（三）
1. 常见兼容性问题浏览器默认有一个margin和padding =>通过*{margin:0;padding:0;}，还有更好的初始化。a访问后hover，active样式失效=> 可改变CSS的顺序解决（L-V-H-A）即a：link{} visited{} hover{} active{}具体可看：https://www.cnblogs.com/angel648/p/11392262.html2. iframe缺点会阻塞主页面onload事件和主页面共享连接池，浏览器
2021-02-06 00:14:27
64
原创 W3C
一、对W3C标准以及W3C的理解和认识https://www.w3school.com.cn/w3c/w3c_intro.aspWEB标准分为结构（HTML）、表现（css样式表）、行为（主要是JS）WEB标准一般是将该三部分独立分开，使其更具模块化。但一般产生行为时，就会有结构或者表现的变化，也使得三者界限并不那么清晰W3C，其宗旨是通过促进通用协议的发展并确保其通用型，以激发 web 世界的全部潜能。W3C对标准提出了规范化要求：结构要求：标签字母要小写、标签要闭合、标签不允许随意嵌套
2021-02-03 23:57:44
91
原创 css面试笔记（二）
1. CSS Hack具体看大佬代码：https://blog.csdn.net/qq_31635733/article/details/81660897概念CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的CSS Hack常见的三种表现形式属性值Hack：比如IE6能识别下划线_和星号*，IE7能识别星号*，但不能识别下划线_ ，而firef
2021-02-02 23:58:28
85
原创 css面试笔记（一）
1. 消除图片底部间隙图片块状化-无基线对齐：img{display：block;}图片底线对齐：img{vertical-align：bottom;}父级设置：font-size：0;行高足够小-基线位置上移：.box{line-height：0;}2. 文本显示行数控制单行：p{ overflow: hidden; text-overflow: elipsis; // 溢出显示... white-space: nowrap; //不进行换行}多行：p{ max-
2021-02-02 16:03:15
218
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人