<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[SOALIN的博客]]></title><description><![CDATA[学习了呀~]]></description><link>https://blog.youkuaiyun.com/SOALIN228</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; SOALIN228]]></copyright><item><title><![CDATA[面向对象]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/90137506</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/90137506</guid><author>SOALIN228</author><pubDate>Sun, 12 May 2019 10:05:11 +0800</pubDate><description><![CDATA[构造函数
function person(name,sex,age){
	this.name = name;  //this.name属性     name参数 习惯上 属性名称==参数
	this.sex  = sex;
	this.age  = age;
	this.show = function(){
		alert(this.name+"---"+this.sex+"---"+this.a...]]></description><category></category></item><item><title><![CDATA[事件]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89873463</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89873463</guid><author>SOALIN228</author><pubDate>Mon, 06 May 2019 07:45:01 +0800</pubDate><description><![CDATA[DOM2级事件
可以绑定多个事件，松耦合
&lt;div id="btn"&gt;我是btn&lt;/div&gt;
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
    alert("btn被触发了");
});
btn.addEventListener("click", f...]]></description><category></category></item><item><title><![CDATA[计算器]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89764799</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89764799</guid><author>SOALIN228</author><pubDate>Thu, 02 May 2019 20:52:51 +0800</pubDate><description><![CDATA[&lt;div id="calculator"&gt;
  &lt;p&gt;
    &lt;input type="text" class="formerInput" value="1" /&gt;
    &lt;span class="sign"&gt;+&lt;/span&gt;
    &lt;input type="text" class="laterInput" value="1"...]]></description><category></category></item><item><title><![CDATA[函数]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89762919</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89762919</guid><author>SOALIN228</author><pubDate>Thu, 02 May 2019 17:06:06 +0800</pubDate><description><![CDATA[for…in
可以遍历数组和对象
var arr = ["html", "js", "jq"];
for (p in arr) {
  console.log(p); // 0 1 2
  console.log(arr[p]); // html js jq
}

var arr = {
  "html": '结构',
  "css": '样式',
  "js": '功能'
};
for (p i...]]></description><category></category></item><item><title><![CDATA[变量、作用域和内存]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89762900</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89762900</guid><author>SOALIN228</author><pubDate>Thu, 02 May 2019 17:03:52 +0800</pubDate><description><![CDATA[变量




基本类型
引用类型




不可修改
可以修改


保存在栈内存中
保存在堆内存中


按值访问
按引用访问


比较时，值相等即相等
比较时，同一引用才相对


复制时，创建一个副本
复制的是指针


按值传递参数
按值传递参数


用typeof检测类型
用instanceof检测类型


作用域

有局部作用域和全局作用域
作用域链用于查询变量，从调用位置想外查询

js在es...]]></description><category></category></item><item><title><![CDATA[DOM操作]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89762254</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89762254</guid><author>SOALIN228</author><pubDate>Thu, 02 May 2019 16:09:34 +0800</pubDate><description><![CDATA[创建节点

document.createElement() 创建节点
document.createTextNode() 创建文本
document.createDocumentFragment() 创建文档片段

实例
var fragment = document.createDocumentFragment(); // 创建文档片段
var ul = document.getElement...]]></description><category></category></item><item><title><![CDATA[svg]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89336259</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89336259</guid><author>SOALIN228</author><pubDate>Tue, 16 Apr 2019 16:30:45 +0800</pubDate><description><![CDATA[视口
viewport
SVG可见区域的大小，类比于画布
实例
&lt;svg width="800" height="400"&gt;&lt;/svg&gt;

viewBox
相当于在显示器(画布)上截屏时的框，将截取的内容显示出来
viewBox="x y width height"



x：左上角横坐标


y：左上角纵坐标


width ： 宽度


height：高度


坐标
S...]]></description><category></category></item><item><title><![CDATA[sass基础语法]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89295750</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89295750</guid><author>SOALIN228</author><pubDate>Sun, 14 Apr 2019 13:50:54 +0800</pubDate><description><![CDATA[变量
$width: 300px; // 定义一个变量

width: $width; // 使用定义的变量

$str: 'hello.jpeg'; 

background-image: url('./img/'+$str); // 使用+拼接

background-image: url('./img/#{$str}'); // 使用#{}拼接

数据类型
$width: 300px;

/...]]></description><category></category></item><item><title><![CDATA[拖拽上传]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89288384</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89288384</guid><author>SOALIN228</author><pubDate>Sat, 13 Apr 2019 20:40:45 +0800</pubDate><description><![CDATA[draggable=“true” 页面设置后才可以拖拽
dragstart 事件 开始拖动元素时触发
drop 事件 拖动过程中，释放鼠标键时触发此事件
dragover 事件 被拖动的对象在另一对象容器范围内拖动时触发此事件
dragenter 事件 完拖动的对象进入其容器范围内时触发此事件
dragleave 事件 拖动的对象离开其容器范围内时触发此事件

书写就按照上面的顺序
实例
&lt...]]></description><category></category></item><item><title><![CDATA[flex布局]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/89160046</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/89160046</guid><author>SOALIN228</author><pubDate>Tue, 09 Apr 2019 19:59:05 +0800</pubDate><description><![CDATA[一、Flex 布局是什么？
.box{
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
二、基本概念

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫...]]></description><category></category></item><item><title><![CDATA[Vue 中的动画特效(二)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84949380</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84949380</guid><author>SOALIN228</author><pubDate>Tue, 11 Dec 2018 08:11:57 +0800</pubDate><description><![CDATA[Vue中多个元素或组件的过渡

元素过渡：元素设置时注意要加上 key 来告诉 Vue 不要复用 DOM ，否则不会出现动画，我们为 transition 设置 mode 即可实现过渡效果


.v-enter,
.v-leave-to {
   opacity: 0;
 }
 .v-enter-active,
 .v-leave-active {
   transition: opacity 1...]]></description><category></category></item><item><title><![CDATA[Vue 中的动画特效(一)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84933863</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84933863</guid><author>SOALIN228</author><pubDate>Mon, 10 Dec 2018 09:14:59 +0800</pubDate><description><![CDATA[Vue中的CSS动画原理
Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡, transition 的 name 可以替换过度的类名
过渡的类名
1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在...]]></description><category></category></item><item><title><![CDATA[走进HTML5 新增标签]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84812473</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84812473</guid><author>SOALIN228</author><pubDate>Sun, 09 Dec 2018 23:56:59 +0800</pubDate><description><![CDATA[新增标签1. 结构标签2. 多媒体标签3. Web应用标签4. 其他标签
1. 结构标签
结构标签的实质就是有语义的div

&amp;amp;amp;lt;article&amp;amp;amp;gt;   &amp;amp;amp;nbsp;&amp;amp;amp;nbsp;定义一篇文章
&amp;amp;amp;lt;header&amp;amp;amp;gt;   定义一个页面的头部
&amp;amp;amp;lt;nav&amp;amp;amp;gt;    &amp;amp;amp;nbsp;]]></description><category></category></item><item><title><![CDATA[深入了解 Vue 组件(四)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84846238</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84846238</guid><author>SOALIN228</author><pubDate>Thu, 06 Dec 2018 23:46:59 +0800</pubDate><description><![CDATA[Vue中的插槽
插槽 slot 可以使我们优雅的进行 DOM  的传递

]]></description><category></category></item><item><title><![CDATA[深入了解 Vue 组件(三)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84846234</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84846234</guid><author>SOALIN228</author><pubDate>Thu, 06 Dec 2018 07:59:33 +0800</pubDate><description><![CDATA[非父子组件间传值
定义一个bus属性，将他绑定到 prototype 上，这样每个 Vue 实例都会有 bus 这个属性，通过 bus 来向外触发事件，使用 methods 在被挂载的时候执行，需要注意的是因为作用域发生了变化所以不能直接使用 this ，记得不要修改父组件传过来的值哦

&amp;lt;child content=&quot;hello&quot;&amp;gt;&amp;lt;/child&amp;gt;
&amp;lt;child c...]]></description><category></category></item><item><title><![CDATA[深入了解 Vue 组件(二)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84846198</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84846198</guid><author>SOALIN228</author><pubDate>Thu, 06 Dec 2018 07:26:59 +0800</pubDate><description><![CDATA[组件参数校验
可以通过 type 来指定子组件接收的参数类型，当指定参数为数字时要给  content 加上  : ,并指定  type 为  Number ，否则接受到的是字符串。 required 可以指定是否必须传参数，当没有传递参数时使用  default 的值，可以在  validator 进行自定义的校验，本例定义传递的参数长度必须大于  5 位
&amp;lt;child content=&quot;...]]></description><category></category></item><item><title><![CDATA[深入了解 Vue 组件(一)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84845019</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84845019</guid><author>SOALIN228</author><pubDate>Wed, 05 Dec 2018 23:46:03 +0800</pubDate><description><![CDATA[组件使用中的细节点

因为浏览器的规范，所以有些自定义组件在解析时会出现问题，这时候就需要使用  is  标签来解决


&amp;amp;lt;table&amp;amp;gt;
  &amp;amp;lt;tbody&amp;amp;gt;
    &amp;amp;lt;tr is=&amp;quot;row&amp;quot;&amp;amp;gt;&amp;amp;lt;/tr&amp;amp;gt;
    &amp;amp;lt;tr is=&amp;quot;row&amp;quot;&am]]></description><category></category></item><item><title><![CDATA[Vue 基础精讲(五)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84782566</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84782566</guid><author>SOALIN228</author><pubDate>Tue, 04 Dec 2018 09:30:11 +0800</pubDate><description><![CDATA[列表渲染v-for 把一个数组对应为一组元素一个对象的 v-forkey数组更新检测set
v-for 把一个数组对应为一组元素
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item of items 形式的特殊语法，list 是源数据数组并且 item 是数组元素迭代的别名, v-for 还支持一个可选的第二个参数为当前项的索引
&amp;amp;amp;amp;lt;div v-for=...]]></description><category></category></item><item><title><![CDATA[Vue 基础精讲(四)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84782363</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84782363</guid><author>SOALIN228</author><pubDate>Tue, 04 Dec 2018 07:41:53 +0800</pubDate><description><![CDATA[条件渲染v-ifv-elsev-else-if用 key 管理可复用的元素v-showv-if vs v-show
v-if
在 Vue 中我们可以通过 v-if 指令来判断是否渲染这个对象

&amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt;
&amp;amp;amp;lt;html lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;head&amp;amp;amp;gt;
  &]]></description><category></category></item><item><title><![CDATA[Vue 基础精讲(三)]]></title><link>https://blog.youkuaiyun.com/SOALIN228/article/details/84745981</link><guid>https://blog.youkuaiyun.com/SOALIN228/article/details/84745981</guid><author>SOALIN228</author><pubDate>Mon, 03 Dec 2018 10:16:38 +0800</pubDate><description><![CDATA[Class 与 Style 绑定

绑定 HTML Class

&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;html lang=&amp;amp;amp;quot;en&amp;amp;amp;quot;&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;head&amp;amp;amp;amp;gt;
  &amp;amp;amp;amp;lt;meta charset=]]></description><category></category></item></channel></rss>