<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[qq_40104992的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/qq_40104992</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_40104992]]></copyright><item><title><![CDATA[vue.js-day14]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/93769137</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/93769137</guid><author>qq_40104992</author><pubDate>Wed, 26 Jun 2019 19:30:05 +0800</pubDate><description><![CDATA[在data中定义即将渲染的数据，及active
data() {
  return {
   wpList: [
    {
     name: '食品饮料'
    },
    {
     name: '鲜花'
    },
    {
     name: '蛋糕'
    },
    {
...]]></description><category></category></item><item><title><![CDATA[vue.js-day13]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/93645661</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/93645661</guid><author>qq_40104992</author><pubDate>Tue, 25 Jun 2019 19:19:55 +0800</pubDate><description><![CDATA[概述
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

包括以下工具：

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js
演示
我们来看一下一个最基本的动画例子

点击查...]]></description><category></category></item><item><title><![CDATA[vue.js-day12]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/93508003</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/93508003</guid><author>qq_40104992</author><pubDate>Mon, 24 Jun 2019 18:31:40 +0800</pubDate><description><![CDATA[　路由中有三个基本的概念 route, routes, router。

　　　　1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 =&gt; home内容， 这是一条route, about按钮 =&gt; about 内容， 这是另一条路由。

　　　　2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =&gt;h...]]></description><category></category></item><item><title><![CDATA[vue.js周末]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/93418303</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/93418303</guid><author>qq_40104992</author><pubDate>Sun, 23 Jun 2019 23:10:08 +0800</pubDate><description><![CDATA[组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

下面一段简单的代码给大家介绍Vue加载组件的几种方式，具体代码如下所示：

//正常加载
import index from '../pages/index.vue'
impor...]]></description><category></category></item><item><title><![CDATA[vue.js-day010]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/93101194</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/93101194</guid><author>qq_40104992</author><pubDate>Thu, 20 Jun 2019 19:18:23 +0800</pubDate><description><![CDATA[简单打包
命令行方式
安装webpack，使用全局安装模式。
cnpm install -g webpack@1.13.2

cnpm install -g webpack@1.13.2
一个简单的a.js：

document.write("hello webpack");
运行打包命令：webpack a.js bundle.js

一个index.html文件：

&lt;html&gt;
...]]></description><category></category></item><item><title><![CDATA[vue.js-day09]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/92841474</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/92841474</guid><author>qq_40104992</author><pubDate>Wed, 19 Jun 2019 19:11:23 +0800</pubDate><description><![CDATA[vue生命周期的理解

vue生命周期是指vue实例对象从创建之初到销毁的过程。

vue的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后

vue生命周期的作用：生命周期中有多个钩子，可以让我们在控制整个vue实例时更容易形成好的逻辑



● 1、创建前/后：

beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/w...]]></description><category></category></item><item><title><![CDATA[vue.js-day08]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/92798241</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/92798241</guid><author>qq_40104992</author><pubDate>Tue, 18 Jun 2019 19:06:22 +0800</pubDate><description><![CDATA[1、 Vue中的全局变量是通过 Vue.prototype实现的
2、vue入口
1）main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件
2）App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。

index.html文件入口
src放置组件...]]></description><category></category></item><item><title><![CDATA[vue.js-day07]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/92679501</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/92679501</guid><author>qq_40104992</author><pubDate>Mon, 17 Jun 2019 19:02:31 +0800</pubDate><description><![CDATA[v-if，v-else，v-else-if
实现逻辑判断控制
代码
html：

&lt;div id="app"&gt;
  &lt;div v-if="role == 'admin'"&gt;
    管理员你好
  &lt;/div&gt;
  &lt;div v-else-if="role == 'hr'"&gt;
    hr你好
  &lt;/div&g...]]></description><category></category></item><item><title><![CDATA[vue.js-day06]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/92567789</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/92567789</guid><author>qq_40104992</author><pubDate>Mon, 17 Jun 2019 09:48:04 +0800</pubDate><description><![CDATA[Vue实例
每个 Vue 应用都是通过实例化一个新的 Vue对象开始的：
window.onload = function(){
  var vm = new Vue({
    el:'#app',
    data:{message:'hello world!'}
  });
}  
......

&lt;div id="app"&gt;{{ message }...]]></description><category></category></item><item><title><![CDATA[vue.js-day05]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/91885871</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/91885871</guid><author>qq_40104992</author><pubDate>Thu, 13 Jun 2019 19:16:34 +0800</pubDate><description><![CDATA[v-if是条件渲染指令，他根据表达式的真假来删除和插入元素，它的基本语法如下:

v-if=”expression”

expression是一个返回bool值的表达式，表达式可以使一个bool属性，也可以返回一个bool的运算时

Vue.js 模板语法（v-html）

&lt;div id="app"&gt;

&lt;div v-html="message"&gt;&lt;/div&gt;...]]></description><category></category></item><item><title><![CDATA[web移动端-day07]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/90450064</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/90450064</guid><author>qq_40104992</author><pubDate>Wed, 22 May 2019 19:06:42 +0800</pubDate><description><![CDATA[一、meta的使用

1、&lt;meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;

强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览

2...]]></description><category></category></item><item><title><![CDATA[web移动端周末]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/90348775</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/90348775</guid><author>qq_40104992</author><pubDate>Sun, 19 May 2019 22:05:08 +0800</pubDate><description><![CDATA[.viewport模板

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"&gt;...]]></description><category></category></item><item><title><![CDATA[web移动端-day02]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/90243109</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/90243109</guid><author>qq_40104992</author><pubDate>Wed, 15 May 2019 19:26:41 +0800</pubDate><description><![CDATA[一、meta标签

html代码中最关键的就是meta标签设置，开发移动端页面首先一定要设置viewport（可视区域）

device-width - 设备的宽度

initial-scale - 初始的缩放比例

minimum-scale - 允许用户缩放到的最小比例

maximum-scale - 允许用户缩放到的最大比例

user-scalable - 用户是否可以手...]]></description><category></category></item><item><title><![CDATA[c3h5-day09]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/90179739</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/90179739</guid><author>qq_40104992</author><pubDate>Mon, 13 May 2019 19:29:47 +0800</pubDate><description><![CDATA[transition属性

transition:让元素变化的时候有动画效果（过渡效果） */
    参数1：参与过渡的属性，一般写all，代表所有属性都参与过渡，也可以写其他的，写什么就代表什么属性参与过渡
    参数2：过渡的持续时间，记得要加单位s代表多少秒
    参数3：代表延迟几秒执行（延迟时间）
    参数4：运动曲线 linear匀速 st...]]></description><category></category></item><item><title><![CDATA[h5c3-day08]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/90045887</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/90045887</guid><author>qq_40104992</author><pubDate>Thu, 09 May 2019 19:17:17 +0800</pubDate><description><![CDATA[js 的Math库，自带了许多常见函数方法，其中关于 三角函数的求解还是很齐全的，于是想到，利用canvas 绘制一个比较准确的 sin、cos、tan、sinh、cosh、tanh图像。

canvas绘制坐标轴

坐标轴由两条直线构成，直接将坐标定在中心点就好，这样容易绘制。同时为坐标的箭头定义边长。

绘制坐标轴上的尺度和文字

思路：将坐标轴线的长度平均分割，分别定义好x轴和y轴每个尺度的...]]></description><category></category></item><item><title><![CDATA[c3h5-day06]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/89927345</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/89927345</guid><author>qq_40104992</author><pubDate>Tue, 07 May 2019 19:05:08 +0800</pubDate><description><![CDATA[《QQ TIM》案例
Stellar插件
描述

视差滚动（Parallax Scrolling）指网页滚动过程中，
多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术
主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。
这种效果可以给网站一个很好的补充。
特性

视差滚动效果酷炫，适合于个性展示的场合。
视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。
视差滚动容易迷...]]></description><category></category></item><item><title><![CDATA[c3h5-day05]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/89889290</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/89889290</guid><author>qq_40104992</author><pubDate>Mon, 06 May 2019 19:11:45 +0800</pubDate><description><![CDATA[h5新增语义化标签

标签语义化:在合适的地方放合适的标签 利于seo优化

&lt;header&gt;头部&lt;/header&gt;
&lt;nav&gt;导航&lt;/nav&gt;
&lt;section&gt;
&lt;aside&gt;侧边栏&lt;/aside&gt;
&lt;article&gt;文章&lt;/article&gt;
&lt;/section&gt;...]]></description><category></category></item><item><title><![CDATA[c3h5-day03]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/89680855</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/89680855</guid><author>qq_40104992</author><pubDate>Mon, 29 Apr 2019 18:47:41 +0800</pubDate><description><![CDATA[transition属性

transition:让元素变化的时候有动画效果（过渡效果） */
    参数1：参与过渡的属性，一般写all，代表所有属性都参与过渡，也可以写其他的，写什么就代表什么属性参与过渡
    参数2：过渡的持续时间，记得要加单位s代表多少秒
    参数3：代表延迟几秒执行（延迟时间）
    参数4：运动曲线 linear匀速 st...]]></description><category></category></item><item><title><![CDATA[c3h5-day02]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/89642237</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/89642237</guid><author>qq_40104992</author><pubDate>Sun, 28 Apr 2019 17:29:02 +0800</pubDate><description><![CDATA[transform：可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。
示例：

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
【矩阵变形】
matrix(&lt;number&gt;,&lt;number&gt;,&lt...]]></description><category></category></item><item><title><![CDATA[周末作业]]></title><link>https://blog.youkuaiyun.com/qq_40104992/article/details/89607439</link><guid>https://blog.youkuaiyun.com/qq_40104992/article/details/89607439</guid><author>qq_40104992</author><pubDate>Sat, 27 Apr 2019 21:04:26 +0800</pubDate><description><![CDATA[1.属性选择器

语法特点：[]

e[attr] 具有某属性的标签

e[attr = ""]属性值完全等于某个值的标签

e[attr *= ""] 属性值里包含某个值的标签

e[attr ^= ""] 属性值以某个值开头的标签

e[attr $= ""] 属性值以某个值结尾的标签

2.伪类选择器（位置伪类）

e:first-child 父元素的第一个子元素 例子：li:first...]]></description><category></category></item></channel></rss>