Vue.js基础
关注
分享
扫一扫
A cold winter
夜阑卧听风吹雨，铁马冰河入梦来。
展开
-
Js使用removeEventListener对全局事件的解绑
activated () { window.addEventListener('scroll',this.handleScroll) }, deactivated () { window.removeEventListener('scroll',this.handleScroll) }Vue在使用keep-alive标签时,提供...原创 2019-12-27 14:03:57 · 681 阅读 · 0 评论 -
Vue异步组件实现按需加载
当我们访问我们项目首页的时候，app.js会被加载，加载完成后，访问其它页面app.js文件不会加载，因为已经加载好放在内存里了，直接拿来用就好了。因为app.js存放的是项目中所有页面的逻辑代码，所以当我们的项目变大时候，比如app.js大于1MB的时候，项目的加载速度会变慢，这时候推荐使用异步组件按需加载，意思就是访问这个页面的时候只加载这个页面所需要的js文件，访问另一个页面的时候再加载另一...原创 2019-12-25 15:54:58 · 173 阅读 · 0 评论 -
Vue项目打包后dist文件目录详解
css文件夹下的.css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里css文件夹下的.css.map文件是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。目的是帮助我们调试被压缩过的css代码，只是方便我们开发的时候做调试使用。js文件夹下的.js...原创 2019-12-25 15:16:54 · 25411 阅读 · 0 评论 -
Vue使用keep-alive来提高网页的性能
使用keep-alive标签来提高网页的性能，把一些已经访问过的组件内容存储在内存中，不用每次渲染的时候都要发送ajax请求。<keep-alive> //显示当前路由地址对应的内容 <router-view/> </keep-alive>但是有的页面需要在用户的操作后数据发生变化，所以当使用keep-alive标签的时候，vu...原创 2019-12-25 14:46:12 · 198 阅读 · 0 评论 -
Vue中的列表过渡
Vue中的列表过渡的原理： <transition-group> <div v-for="item of list" :key="item.id"> {{item.title}} </div> </transition-group>相当于 <transition>...原创 2019-12-03 17:16:28 · 203 阅读 · 0 评论 -
Vue中多个元素或组件的过渡
Vue中多个元素的过渡与单个元素的过渡类似：多个元素的过渡：<style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style> </head> <bo...原创 2019-12-03 16:12:34 · 157 阅读 · 0 评论 -
在Vue中使用animate.css库
我们可以自定义Vue在动画过程中自动添加的class的名字<style> @keyframes bounce-in{ 0%{ transform: scale(0); } 50%{ /*只有一个参数的时候，表示X,Y的缩放大小一样*/ transform: scale(1.5); } 100%{ t...原创 2019-12-02 16:06:59 · 379 阅读 · 0 评论 -
Vue中CSS动画原理
transition标签过渡动画的原理:当一个元素被transition包裹了之后，Vue会自动分析元素的css样式,然后构建一个动画的流程.上图的线加上几个点就是动画从的流程，在动画即将被执行的这一瞬间，他会往内部的div上增加两个class,分别是fade-enter和fade-enter-active,当动画第一帧执行结束之后，Vue会在动画执行到第二帧的时候，fade-enter这个...原创 2019-12-02 14:37:41 · 216 阅读 · 0 评论 -
Vue动态组件与v-once指令
动态组件会根据is属性数据的变化动态自动加载不同的组件，下面这段代码就是通过动态组件实现了一个toggle的功能<body> <div id="root"> <component :is="type"></component> <button @click="handleClick">change</button&...原创 2019-12-02 10:44:00 · 154 阅读 · 0 评论 -
Vue中的作用域插槽
默认插槽和具名插槽的概念比较好理解，这里主要以官方文档的案例来讲解一下作用域插槽。首先是有一个currentUser的组件：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...转载 2019-11-12 23:24:46 · 124 阅读 · 0 评论 -
在Vue中使用插槽(slot)
<body> <div id="root"> <child> <p>Dell</p> </child> </div> <script> Vue.component('child',{ template:`<div> <slot>...原创 2019-11-12 15:28:04 · 137 阅读 · 0 评论 -
给组件绑定原生事件
JavaScript的事件类型分为原生事件和自定义事件。原生事件就是比如click，change，blur这种事件，而自定义事件是指自己定义的事件。<body> <div id="root"> <child @click="handleClick"></child> </div> <script> V...原创 2019-11-08 14:01:40 · 199 阅读 · 0 评论 -
Vue组件参数校验与非props特性
父组件是通过属性绑定的方式向子组件传值的原创 2019-11-07 19:08:42 · 131 阅读 · 0 评论 -
Vue父子组件的数据传递
Vue有一个单项数据流的概念，我们不能对父组件传递过来的属性直接修改，因为一个父组件可能会有多个子组件，这个属性也有很多个子组件在使用，这个子组件修改了会影响另一个子组件。那么我们就是需要对传递过来的属性值进行修改该怎么办呢？...原创 2019-09-30 17:58:20 · 195 阅读 · 0 评论 -
Vue使用组件的细节点
一：is属性的使用：例如:<table> <tbody> <row></row> <row></row> <row></row> </tbody> </table> <script> Vue.co...原创 2019-09-30 15:30:57 · 109 阅读 · 0 评论 -
Vue-cli脚手架工具
Vue团队提供了一个脚手架工具vue-cli可以快速构建一个Vue项目，同时这个工具自带了webpack的各种配置。 安装和构建一个Vue项目过程: 首先安装node.js https://nodejs.org/en/ -node.js官网 安装node.js时它会自带安装npm(国内可以使用淘宝npm镜像，提高速度) 在终端使用命令检测是否安装完成：D:\vue&amp;amp;gt;node -...原创 2018-09-27 15:33:02 · 120 阅读 · 0 评论 -
Vue组件学习
组件是指页面上的某一部分，当创建一个大型的项目时，项目可以被分为很多组件，维护时就变的简单多了。 Vue组件分为全局组件和局部组件，局部组件需在实例中声明（注册）。 全局组件声明简例：Vue.component('todo-item',{ template:'&amp;lt;li&amp;gt;item&amp;lt;/li&amp;gt;' })局部组件声明简例：/...原创 2018-09-07 10:55:02 · 343 阅读 · 0 评论 -
Vue指令学习
v-text,v-html的区别：与JQuery的text()和html()方法差不多,v-text是会对其中的html标记进行转义，转换为字符串形式的文本，v-html则可正常显示html标记的作用；v-show和v-if在设置内容显示时的区别:v-show方法是把元素的dispaly属性设置为none,而v-if则根据布尔值的改变通过销毁Dom和重建Dom来实现；v-else if,v-e...原创 2018-09-06 23:26:20 · 207 阅读 · 0 评论 -
Vue.js学习笔记一
Vue.js是主要由尤雨溪开发的是一套用于构建用户界面的渐进式框架 官方中文文档地址：https://cn.vuejs.org/v2/guide/ Vue.js是javascript的一个MVVM库，它是以数据驱动和组件化的思想构建的。 在学习之间，需要简单了解一下什么是MVVM模式ViewModel: 相比较于MVC新引入的视图模型。是视图显示逻辑、验证逻辑、网络请求等...原创 2018-09-04 22:46:45 · 162 阅读 · 0 评论