<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[WebDestiny的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/WebDestiny</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; WebDestiny]]></copyright><item><title><![CDATA[（三）react中JSX语法的基本使用]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/129718052</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/129718052</guid><author>WebDestiny</author><pubDate>Thu, 23 Mar 2023 09:18:27 +0800</pubDate><description><![CDATA[JSX即JavaScript XML，表示 JavaScript 代码中写 XML（HTML）格式的代码，就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展，]]></description><category></category></item><item><title><![CDATA[(二)如何用react脚手架构建项目以及文件目录的基本介绍]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/129717610</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/129717610</guid><author>WebDestiny</author><pubDate>Wed, 22 Mar 2023 19:52:45 +0800</pubDate><description><![CDATA[rename、 please try running this.command again as root/Administrator等类似信息，为了让目录结构更易懂，所以我们需要删除一些不必要的文件；可以在目录的reade.me文件看到启动项目的相关指令！比较适合单页面项目应用开发，所以暂时只包含一个。即只要保留入口文件即可。项目中会用到的一些依赖或者一些第三方库；工程的入口页面，即启动项目后，打开的首页。：里面包含了我们项目中的启动页面，：该文件包含了一些我们自己使用的。文件夹下原来的所有东西，除了。]]></description><category></category></item><item><title><![CDATA[（一）react介绍以及脚手架创建项目环境配置]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/129716532</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/129716532</guid><author>WebDestiny</author><pubDate>Wed, 22 Mar 2023 19:19:15 +0800</pubDate><description><![CDATA[背景介绍：React起源于Facebook的内部项目，因为该公司对市场上所有框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。什么是即：用来构建UI的JavaScript库。React不是一个MVC框架，仅仅是视图（V）层的库;]]></description><category></category></item><item><title><![CDATA[eslint代码规范介绍]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/128673860</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/128673860</guid><author>WebDestiny</author><pubDate>Fri, 13 Jan 2023 14:33:12 +0800</pubDate><description><![CDATA[eslint代码规范]]></description><category></category></item><item><title><![CDATA[git简单配置]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/122487524</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/122487524</guid><author>WebDestiny</author><pubDate>Fri, 14 Jan 2022 09:39:16 +0800</pubDate><description><![CDATA[一：安装git

二：在桌面点击鼠标右键，打开菜单里的 git bash

三：设置用户名和邮箱

$ git config --global user.name "zhaojixiang"
$ git config --global user.email "827541105@qq.com"

四：执行 $ ssh-keygen -t rsa -C "827541105@qq.com" 生成git 秘钥，连续敲击enter直到重新出现空白$符号

五：在本地文件中查找生成的秘钥文件——路径：C:\User]]></description><category></category></item><item><title><![CDATA[Angular中constructor和ngOnInit适用场景的差异化]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/114331576</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/114331576</guid><author>WebDestiny</author><pubDate>Wed, 03 Mar 2021 19:56:17 +0800</pubDate><description><![CDATA[区别

constructor是ES6引入类的概念后新出现的东东，是类的自身属性，并不属于Angular的范畴，所以Angular没有办法控制constructor。constructor会在类生成实例时调用：


import {Component} from '@angular/core';

@Component({
    selector: 'hello-world',
    templateUrl: 'hello-world.html'
})

class HelloWorld {
    c]]></description><category></category></item><item><title><![CDATA[Angular-Cli创建项目的全部过程]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/111636798</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/111636798</guid><author>WebDestiny</author><pubDate>Thu, 24 Dec 2020 17:02:28 +0800</pubDate><description><![CDATA[使用 CLI 创建一个项目并配置默认路由：
	

ng new helloAngular –routing

如果要跳过npm install 安装,则使用以下命令：

ng new my-app --skip-install


	项目结构目录分析
	

|--E2e	应用的端对端(e2e)测试，用 Jasmine 写成并用 protractor 端对端测试运行器测试。
|--Node_modules	依赖包
|--Src	
|--App	Angular应用文件
|--App.module.ts	
|..]]></description><category></category></item><item><title><![CDATA[防止暴力点击（节流）]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/103310184</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/103310184</guid><author>WebDestiny</author><pubDate>Fri, 29 Nov 2019 15:18:01 +0800</pubDate><description><![CDATA[节流(throttle)

在n秒内点击多次，只有一次生效。



&lt;template&gt;
  &lt;div&gt;
    &lt;button @click="throttle"&gt;按钮&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
//定义
let timer, lastTime;
let no...]]></description><category></category></item><item><title><![CDATA[如何在vue项目中给ul>li列表使用事件委托]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/103310615</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/103310615</guid><author>WebDestiny</author><pubDate>Fri, 29 Nov 2019 14:57:18 +0800</pubDate><description><![CDATA[ul&gt;
    &lt;li v-for="(item, index) in data" @click="handleClick(index)"&gt;
        Click Me
    &lt;/li&gt;
&lt;/ul&gt;



然后这样的话，结果就是所有的li元素都绑定了事件。


我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。为了更好...]]></description><category></category></item><item><title><![CDATA[如何使用react脚手架构建项目]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/102657492</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/102657492</guid><author>WebDestiny</author><pubDate>Mon, 21 Oct 2019 09:53:35 +0800</pubDate><description><![CDATA[前提：保证您的电脑已经成功安装了node和npm环境

通过cmd执行 node -v 和 npm -v 查看是否下载成功和下载成功后的版本号。





一、安装react脚手架，cmd执行 npm i -g create-react-app (-g为全局下载)



二、在桌面上新建一个文件夹，打开后按住shift键并单击鼠标右键，在菜单栏中选择在此处打开命令窗口，在命令行中执行 cre...]]></description><category></category></item><item><title><![CDATA[the content must be served over HTTPS 解决方案]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/102382630</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/102382630</guid><author>WebDestiny</author><pubDate>Tue, 08 Oct 2019 14:16:28 +0800</pubDate><description><![CDATA[起因

上传图片出现了如下警告：



报错的原因就是当前页面是https协议加载的，但是这个页面发起了一个http的ajax请求，这种做法是非法的。HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。

客户端解决办法

可以在相应的页面的&lt;head&gt;里加上这句代码，意思...]]></description><category></category></item><item><title><![CDATA[bubbly-bg.js实现动态气​​泡背景效果]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/102368620</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/102368620</guid><author>WebDestiny</author><pubDate>Tue, 08 Oct 2019 10:31:27 +0800</pubDate><description><![CDATA[前言

bubbly-bg.js是基于HTML5画布，压缩后的版本小于1kb，但是它能制作出各种漂亮的动态气​​泡背景效果，非常强大。

使用

可以通过npm来安装bubbly-bg.js动态气泡背景插件。


npm install bubbly-bg --save

可以在页面中约会bubbly-bg.js文件。


&lt;script type="text/javascript" src...]]></description><category></category></item><item><title><![CDATA[Bideo.js实现全屏视频背景]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/102368024</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/102368024</guid><author>WebDestiny</author><pubDate>Tue, 08 Oct 2019 10:23:37 +0800</pubDate><description><![CDATA[特性

自动调整：Bideo.js可以根据当前浏览器窗口的大小自动调整视频尺寸，当浏览器窗口调整时，它会自适应窗口尺寸，移动端、PC端都能自动调整，使视频作为背景并全屏展示。

覆盖：视频作为网页背景后，我们可以任意在视频上层放置任意HTML内容。

视频封面：页面打开时，视频可能需要几秒钟才能加载完，那么我们可以设置一张图片作为视频的封面，等加载完再播放。



HTML

在你的页面body...]]></description><category></category></item><item><title><![CDATA[Vue移动端右滑屏幕返回上一页]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/102367355</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/102367355</guid><author>WebDestiny</author><pubDate>Tue, 08 Oct 2019 10:14:18 +0800</pubDate><description><![CDATA[有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件，提高用户体验。

安装依赖

使用npm安装vue-directive-touch组件。


npm install vue-directive-touch --save


引入组件

在main.js中引入vue...]]></description><category></category></item><item><title><![CDATA[使用element UI的日期选择器时，默认显示当天日期。]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/101699342</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/101699342</guid><author>WebDestiny</author><pubDate>Mon, 30 Sep 2019 15:58:00 +0800</pubDate><description><![CDATA[需求：输入框中要把当天日期显示在输入框中


&lt;el-form-item label="交易数据"&gt;
      &lt;el-date-picker
       type="date"
       placeholder="选择日期"
       v-model="searchFormField.date"
    ...]]></description><category></category></item><item><title><![CDATA[vue面试题]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/101710622</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/101710622</guid><author>WebDestiny</author><pubDate>Mon, 30 Sep 2019 15:42:50 +0800</pubDate><description><![CDATA[Vue的双向数据绑定原理是什么？


vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：
第一步：需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter
这样的话，给这个对象的某个值赋值，就会触...]]></description><category></category></item><item><title><![CDATA[vue项目引入字体.ttf]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/101703165</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/101703165</guid><author>WebDestiny</author><pubDate>Mon, 30 Sep 2019 15:28:49 +0800</pubDate><description><![CDATA[一、下载完字体后在src下新建common文件，文件夹中包含以下文件（FZCYJ.ttf 为例）



二、打开font.css


@font-face { 
 font-family: 'myfont'; //重命名字体名
 src: url('FZCYJ.ttf'); //引入字体
 font-weight: normal; 
 font-style: normal; 
}...]]></description><category></category></item><item><title><![CDATA[react生命周期函数详解]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/101717347</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/101717347</guid><author>WebDestiny</author><pubDate>Mon, 30 Sep 2019 15:23:15 +0800</pubDate><description><![CDATA[react生命周期函数图详解


根据上图我们可以看出react中的生命周期函数主要分为三个阶段创建、更新、销毁

创建阶段
getDefaultProps()

此阶段为组件初始化，定义propTypes或者defaultProps

getInitialState()

与getDefaultProps的区别在于前者设置默认的 props，后者设置初始的state在使用es6的class语法时...]]></description><category></category></item><item><title><![CDATA[浏览器的同源策略]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/101774001</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/101774001</guid><author>WebDestiny</author><pubDate>Mon, 30 Sep 2019 15:17:27 +0800</pubDate><description><![CDATA[前言：

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源的交互。这是一个用于隔离潜在恶意文件的安全机制。

同源的定义

如果两个页面的协议，端口（如果有指定）和主机都相同，则两个页面具有相同的源。我们也可以把它称为“协议/主机/端口 tuple”，或简单地叫做“tuple". ("tuple" ，“元”，是指一些事物组合在一起形成一个整体，比如（1，2）叫二元，（1，2，3）叫...]]></description><category></category></item><item><title><![CDATA[页面导入样式时，使用link和@import有什么区别？]]></title><link>https://blog.youkuaiyun.com/WebDestiny/article/details/101771805</link><guid>https://blog.youkuaiyun.com/WebDestiny/article/details/101771805</guid><author>WebDestiny</author><pubDate>Mon, 30 Sep 2019 14:39:53 +0800</pubDate><description><![CDATA[（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

（3）import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

 ( 4 )link支持使...]]></description><category></category></item></channel></rss>