前言 在日常开发中 动画是必不可少的一部分 不仅能让元素直接的切换显得更加自然 同时也能极大的增强用户体验 因此 在Vue之中也提供了非常强大的关于动画这方面的支持 Vue不仅支持用CSS来写一些过渡效果 同时也是支持JS的 不过在这个文章中讲述的都是如何利用CSS来实现过渡动画、keyframes动画以及实现的原理 过渡动画实现的原理 1.首先最基础的一点在于 如果你想要在单元素/单个组件之中实现过渡动画 那么 你需要在元素/组件所在的...
一、前言forEach和map是数组的两个方法，作用都是遍历数组。在vue项目的处理数据中经常会用到，这里介绍一下两者的区别和具体用法示例。 二、代码1. 相同点 都是数组的方法都用来遍历数组两个函数都有4个参数：匿名函数中可传3个参数item(当前项), index(当前项的索引), arr(原数组)，还有一个可选参数this匿名函数中的this默认是指向window的对空数组不会调用回调函数不会改变原数组(某些情况下可改变)2. forEach(1) 没有返回值。...
今天给大家介绍一款基于vue2的canvas时钟倒计时组件，这个时钟倒计时组件采用canvas动画的炫酷动画效果形式，根据剩余时间的多少变换颜色和旋转扇形的速度，适合抢购、拍卖、下注等业务场景，且对移动端友好。 具体步骤分析： 假如设定倒计时总时间为15s， 变黄色时机为10s，变红色时机为5s。 1、开始倒计时后颜色为绿色。绿色含义是：倒计时的时间离结束时间还很长。 2、10s后变黄色。黄色的含义是：倒计时的时间离结束时间挺近了...
大家还记得我们在老版本中，对于线上环境配置中会把所有的 css 多打成一个文件： 核心是使用了插件 extract-text-webpack-plugin，方式如下： 第一步都是加载插件 const ExtractTextPlugin = require(extract-text-webpack-plugin)这个插件的描述如下：Extract text from a bundle, or bundles, into a separate file.然后配置如下：（省去了 rules 相关的配置） 一般配置 filename 来保证最终生成的 css 文件名 plugins: [new Ext...
路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。 点击之后，怎么做到正确的对应，比如，我点击home 按钮，页面中怎么就正好能显示home的内容。这就要在js 文件中配置路由。 路由中...
前言 最近死磕了一段时间vue源码，想想觉得还是要输出点东西，我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。 Vue.set()和this.$set()应用的场景 平时做项目的时候难免不会对 数组或者对象 进行这样的骚操作操作，结果发现，咦~~，他喵的，怎么页面没有重新渲染。 const vueInstance = new Vue({data: {arr: [1, 2],obj1: {a: 3}} }); vueInstance.$data.arr[0] = 3; // 这种骚操作页面不会重新渲染...
从很久之前就已经接触过了angularjs了，当时就已经了解到，angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后，再接触了vue.js，当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天，就我们就来一步步解析vue.js响应式的原理，并且来实现一个简单的demo。 首先，先让我们来了解一些基础知识。 基础知识 Object.defineProperty es5新增了Object.defineProperty这个api，它可以允许我们为对象的属性来设定ge...
首先需要明确，a() {}和 b: () => {}是不同的let obj = {a() {},// 相当于a:function() {},b: () => {} }1 VUE.js 源码解析 注意此处只设计核心代码 这段代码也是UMD实现原理，本文这里不是重点，有兴趣的可以自行探究。 (function (global, factory) {typeof exports === object && typeof module !== undefined ? module.exports = factory() :typeof define === function && define.amd ? define(factory) :(global.Vue = facto...
首先在使用 vue create my-project 创建项目的时候要选择使用 css 预处理器。 安装 vue-cli 首先使用 npm 安装 vue-cli v3.0。 npm install -g @vue/cli安装完成后使用 vue -V 查看版本号，如果显示版本号说明安装完成。 创建项目 vue-cli v3.0 创建项目的命令与 2.0 有所不同。3.0 创建项目的命令为： vue create test-project 创建过程中首先选择创建的模式，是采用默认配置，还是自定义配置： 通过上下箭头进行选择。window 默...
vue单文件 vue是现今非常流行的框架之一，整体给人的感觉就是优雅，小巧，最近开始学习着使用该框架做一些项目，学习，当然是从实践开始，在浏览了一遍官方文档之后，便开始用vue-cli脚手架来快速搭建一个vue项目，从实践中快速学习。在看了一遍项目文件结构后，对于.vue结尾的单文件却是有很多不解的地方，具体碰到的问题如下： 什么是<template/>标签template是html5的一个新元素，主要用于保存客户端中的内容，表现为浏览器解析...
最近研究了vue性能优化，涉及到vue异步组件和懒加载。一番研究得出如下的解决方案。 原理：利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载。 案例： 首先是组件，创建四个组件分别命名为first、second、three和four；内容如下 first<template> <div>我是第一个页面</div> </template>second<template> <div>我是第二个页面</div> </template>three<template> <div>我是第三个页面</div> </temp...
基本实例 <div id="example"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({el: #example,data: {message: Hello},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split().reverse().join()}} })结果：Original message: "Hello" Computed reversed message: "olleH"这里我们声明了一...
vue.js是什么？ Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。 说明及下载Vue.js使用文档已经写的很完备和详细了，通过以下地址可以查看： https://cn.vuejs.org/v2/guide/ vue.js如果当成一个库来使用，可以通过下面地址下载： https://cn.vuejs.org/v2/guide/installation.html Vue.js基本概念我们下载了vue.js后，需要在页面上通过script标签引入vue.js，开发中可以使用开发版本vue.js，产品上线要换成...
v-bind 指令用于响应地更新 HTML 特性 形式如：v-bind:href 缩写为 :href; v-on 指令用于监听DOM事件 形式如：v-on:click 缩写为 @click; <body><div id="test"><img v-bind:src="src"><a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a><a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel=...
我们平时写的 .vue 文件称为 SFC(Single File Components)，本文介绍将 SFC 解析为 descriptor 这一过程在 vue 中是如何执行的。 vue 提供了一个 compiler.parseComponent(file, [options]) 方法，来将 .vue 文件解析成一个 descriptor： // an object format describing a single-file component. declare type SFCDescriptor = {template: ?SFCBlock;script: ?SFCBlock;styles: Array<SFCBlock>;customBlocks: Array<SFCBlock>; ...