![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue2
文章平均质量分 57
坏萝卜
这个作者很懒,什么都没留下…
展开
-
vue-自定义指令
自定义指令一、定义语法:(1).局部指令:new Vue({ new Vue({directives:{指令名:配置对象} 或 directives{指令名:回调函数}}) })(2).全局指令:Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)二、配置对象中常用的3个回调:(1).bind:指令与元素成功绑定时调用。(2).inserted:指令所在元素被插入原创 2021-07-27 20:05:48 · 442 阅读 · 0 评论 -
vue-内置指令
内置指令v-text指令:1.作用:向其所在的节点中渲染文本内容。2.与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会<div id="root"> <div>你好,{{name}}</div> <div v-text="name"></div> <div v-text="str"></div> </div> </body> <scrip原创 2021-07-27 20:03:55 · 367 阅读 · 0 评论 -
vue-过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。语法:1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}2.使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”备注:1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据, 是产生新的对应的数据<!DOCTYPE html><html> <head&g原创 2021-07-27 19:59:19 · 189 阅读 · 0 评论 -
Vue监视数据的原理
Vue监视数据的原理: 1. vue会监视data中所有层次的数据。 2. 如何监测对象中的数据? 通过setter实现监视,且要在new Vue时就传入要监测的数据。 (1).对象中后追加的属性,Vue默认不做响应式处理 (2).如需给后添加的属性做响应式,请使用如下API: Vue.set(target,propertyName/index,value) 或 vm.$set(target,p..原创 2021-07-27 19:56:38 · 557 阅读 · 0 评论 -
key的原理(vue)
面试题:vue中的key有什么作用?(key的内部原理)1. 虚拟DOM中key的作用:key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较,比较规则如下:2.对比规则:(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:①.若虚拟DOM中内容没变, 直接使用之前的真实DOM!②.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。(2).旧虚拟DOM中未找到原创 2021-07-27 19:53:30 · 594 阅读 · 0 评论 -
条件渲染和列表渲染
条件渲染1.v-if写法:(1).v-if=“表达式”(2).v-else-if=“表达式”(3).v-else=“表达式”适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。2.v-show写法:v-show=“表达式”适用于:切换频率较高的场景。特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到原创 2021-07-27 19:49:07 · 105 阅读 · 0 评论 -
vue -监视属性与计算属性
监视属性监视属性watch:1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作2.监视的属性必须存在,才能进行监视!!3.监视的两种写法:(1).new Vue时传入watch配置(2).通过vm.$watch监视<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性</title> <!-- 引入Vue原创 2021-07-26 19:14:56 · 425 阅读 · 0 评论 -
vue-键盘事件
键盘事件1.Vue中常用的按键别名:回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊,必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)3.系统修饰键(用法特殊):ctrl、alt、原创 2021-07-26 17:55:29 · 584 阅读 · 0 评论 -
vue的数据代理
数据代理vue中的数据代理: 通过vm对象来代理data对象中属性的操作(读/写)好处: 通过vm对象就可以方便的操作data中的数据基本原理:1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性2). 所有添加的属性都包含get/set方法3). 在get/set方法中去操作data中对应的属性属性描述符:1.数据描述符configurable:是否可以重新定义enumerable:是否可以枚举value:初始值原创 2021-07-26 17:11:55 · 230 阅读 · 0 评论 -
fastclick-解决移动端300ms延迟以及图片懒加载
fastclick-解决移动端300ms延迟第一步安装fastclickyarn add fastclick第二步使用图片懒加载什么叫懒加载通俗讲 : 懒加载就是延时加载,即当需要用到的时候再去加载。懒加载原理是什么先将 img 标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再 img 标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。第一步安装yarn add vue原创 2021-07-23 17:47:51 · 144 阅读 · 1 评论 -
【vue项目踩坑记录】(一)
搭建项目用户评论时,能够完整渲染出整体界面无问题,但开发者工具仍然报出“Error in render: “TypeError: Cannot read property ‘avatar’ of undefined” found in”错误,具体如下首先,查看了Devtools中是否接收到了数据,发现数据确实存在:【根本原因】:我们发现这里的commentInfo是父组件中异步网络请求加载的数据,调用显示,然后vue渲染机制中:异步数据先显示初始数据,再显示带数据的数据,所以上来加载commen原创 2021-07-23 11:24:47 · 163 阅读 · 0 评论 -
防抖操作处理
防抖操作防抖debounce/节流throttle防抖函数作用的过程:如果我们直接执行 refresh,那么refresh函数会被执行30次。可以将refresh函数传入到debounce函数中,生成一个新的函数。之后在调用非常频繁的时候,就使用新生成的函数而新生成的函数,并不会非常频繁的使用,如果下一次执行来的非常快,那么会将上一次取消掉debounce(func,delay){ let timer = null; return function (...args){ if (t原创 2021-07-22 13:35:17 · 174 阅读 · 0 评论 -
better-scroll插件---@2.4.1
关于better-scroll插件的无法滑动bugbetter-scroll滚动原理wrapper作为父容器,它的高度会随着内容的大小而撑高。那么,当content的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了BetterScroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略所以也给定了如下页面结构<div class="wrapper"> <ul class="content原创 2021-07-21 19:28:28 · 329 阅读 · 3 评论 -
Vue-Router(二)
$router和$route的区别$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法$route为当前router跳转对象里面可以获取name,path,query,params等导航守卫我们可以利用beforeEach来完成标题的修改首先,我们可以在钩子当中定义一些标题,可以利用meta来定义其次,利用导航守卫,修改我们的标题前置守卫(guard)导航钩子的三个参数解析:to:即将要进入的目标的路由对象from:当前导航即将要离开的路原创 2021-07-14 15:05:33 · 71 阅读 · 0 评论 -
vue-cli4-文件路径的引用问题
文件路径的引用问题一般默认下@等价于目录的src,可以添加和修改默认路径第一步:第二步:原创 2021-07-14 15:00:28 · 234 阅读 · 0 评论 -
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:‘xxx‘
出现以下错误:vue-router.esm.js:2066 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/home/news”.解决办法:方式一:在使用 replace、push等方法时捕获异常方式二:原创 2021-07-14 11:43:34 · 307 阅读 · 0 评论 -
vue路由简介
什么是路由?路由就是通过互联的网络把信息从源地址传输到目的地址的活动。路由中有一个非常重要的概念叫路由表路由表本质上就是一个映射表,决定了数据包的指向。后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示。但是,一个网站,这么多页面服务器如何处理?一个页面有自己对应的网址,也就是URLURL会发送到服务器,服务器会通过正则对该URL进行匹配。并且最后交给一个Controller进行处理Controller进行各种处转载 2021-07-13 19:57:03 · 101 阅读 · 0 评论 -
Vue-Router
URL的hashURL的hash也就是锚点(#),本质上是改变window.location的href属性我们可以通过直接赋值location.hash来改变href,但是页面不发生刷新HTML5的history模式pushStatehistory接口是HTML5新增的,它有五种模式改变URL而不刷新页面history.pushState({},"","home") //添加新的一层history.back() //返回上一层replaceStatehisto原创 2021-07-13 19:51:50 · 235 阅读 · 0 评论 -
VUE CLI
什么是VUE CLI如果你只是简单写几个Vue的Demo程序,那么你不需要Vue CLI.如果你在开发大型项目,那么你需要,并且必然需要使用Vue CLI使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都需要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是什么意思?CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架。Vue CLI是一个官方发布原创 2021-07-12 18:26:57 · 219 阅读 · 0 评论 -
vue-更改项目安装时使用npm/yarn
更改项目安装时使用npm/yarn关键是修改.vuerc文件。先找到.vuerc文件,一般在如下路径里面:C:\Users\[你使用的用户文件夹]然后打开.vuerc文件{ "useTaobaoRegistry": true, "packageManager": "yarn", "latestVersion": "4.5.13"}根据自己的需要修改"packageManager"即可,退出保存。...原创 2021-07-12 18:11:20 · 876 阅读 · 0 评论 -
vue.js安装
安装Vue方式有很多:方式一:直接CDN引入 你可以选择引入开发环境版本还是生产环境版本 <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.原创 2021-07-11 12:14:03 · 99 阅读 · 0 评论 -
slot插槽
slot插槽组件的插槽:1.组件的插槽也是为了让我们封装的组件更加具有扩展性。2.让使用者可以决定组件内部的一些内容到底展示什么。slot使用1.插槽的基本使用 <slot></slot>2.插槽的默认值 <slot>默认值</slot>3.如果有多个值,同时放入到组件进行替换,一起作为替换元素<body> <div id="app"> <cpn><button>按钮<原创 2021-07-09 15:27:32 · 70 阅读 · 0 评论 -
vue组件化
组件化什么是组件化如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但如果,我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易。组件化是Vue.js中的重要思想 它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。 任何的应用都会被抽象成一颗组件树。组件化思想的应用: 有了组件化的思想,我们在之后的开发中就要充分的利用它。 尽可能的将页原创 2021-07-08 20:01:33 · 438 阅读 · 0 评论 -
表单绑定v-model
表单绑定v-modelvue中使用v-model指令来实现表单元素和数据的双向绑定。v-model原理:1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件<body> <div id="app"> <input type="text" v-model="message"> <input type="text" v-bind:value="message" v-on:input="val原创 2021-07-08 19:54:40 · 149 阅读 · 0 评论 -
vue语法(二)
事件监听在前端开发中,我们需要经常和用户交互 这个时候,我们就必须监听用户发生的时间,比如点击、拖拽,键盘事件等等 在Vue中如何监听事件?使用v-on指令v-on介绍 作用:绑定事件监听器 缩写:@ 预期:Function | Inline Statement | Object 参数:event当通过methods中定义方法,以供@click调用时,需要注意参数问题:1.如果该方法不需要额外参数,那么方法后的()可以不添加。但是注意:如果方法本身中有一个参数,那么会原创 2021-07-06 18:20:13 · 236 阅读 · 0 评论 -
vue语法(一)
Mustache可以通过Mustache语法(大括号)将data中的文本数据,插入到HTML中,并且数据是响应式。<body> <div id="app"> <h2>{{message}}</h2> <h3>{{message}},world</h3> <!-- mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式 --> <h2原创 2021-07-05 18:03:05 · 65 阅读 · 0 评论 -
vue中的MVVM
vue中的MVVMview层: 视图层 在我们前端开发中,通常就是DOM层。 主要的作用是给用户展示各种信息。Model层: 数据层 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。 在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。vueModel层: 视图模型层 视图模型层是view和model沟通的桥梁。 一方面它实现了Data Binding,也就是数据绑定。将Model的改变实时的反应到view中 另一方面它实原创 2021-07-05 18:01:16 · 330 阅读 · 0 评论 -
vue2初体验
vue初体验:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue初体验</title></head><body> <div id="app"> <h2>{{message}}</h2> <h3>{{code}}原创 2021-07-05 17:49:26 · 57 阅读 · 0 评论