<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[休息休息夏的博客]]></title><description><![CDATA[从基础开始学前端，记录每个知识点]]></description><link>https://blog.youkuaiyun.com/qq_42881159</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_42881159]]></copyright><item><title><![CDATA[29.VUE自定义指令directive和inserted]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117389698</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117389698</guid><author>qq_42881159</author><pubDate>Sat, 29 May 2021 19:38:53 +0800</pubDate><description><![CDATA[VUE自定义指令directive和inserted1.什么事自定义指令1.2使用自定义指令的方式2.设置自定义组件2.1 设置全局指令2.2 设置私有指令2.3 钩子函数3. 案例

1.什么事自定义指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 例外)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
简单的讲就是： 指令是可以写在DOM元素的小命令，以v-为前缀，vue就能识别这是一个]]></description><category></category></item><item><title><![CDATA[28.VUE自定义事件--$emit()]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117383597</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117383597</guid><author>qq_42881159</author><pubDate>Sat, 29 May 2021 13:42:06 +0800</pubDate><description><![CDATA[VUE自定义事件--$emit

自定义事件：


当我们需要对子组件中某些特定行为进行监控时，需要让子组件使用$emit来发出通知。


$emit发送事件通知时，可以从子组件携带参数到父组件，实现子级向父级通信的功能。
注意：
此方法只用于子组件向父组件发送消息（数据）
隔代组件或兄弟组件间通信此种方式不合适


案例：


&lt;body&gt;
&lt;div id="app"&gt;
&lt;!--    &lt;son&gt;&lt;/son&gt;--&gt;
    &lt;parent&]]></description><category></category></item><item><title><![CDATA[27.VUE组件的状态保持keep-alive]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117307578</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117307578</guid><author>qq_42881159</author><pubDate>Wed, 26 May 2021 23:13:27 +0800</pubDate><description><![CDATA[VUE组件的状态保持keep-alive1. 使用场景：2.使用keep-alive

1. 使用场景：
&nbsp;&nbsp;&nbsp;&nbsp;当有一个页面组件，需要加载和请求较多的数据，页面渲染的内容可能比较复杂，那么这个页面加载完毕的话会花费比较多的时间(如2,3秒左右)。
&nbsp;&nbsp;&nbsp;&nbsp;比如从这个A页面切换到了下一个B页面，就会销毁当前页面组件，渲染新的页面组件。下一次重新切换回加载渲染时间比较多的组件A的时候，又会花费2,3秒钟的时间重新进行渲染和加载；这]]></description><category></category></item><item><title><![CDATA[26.VUE过渡实现tabs切换案例]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117305761</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117305761</guid><author>qq_42881159</author><pubDate>Wed, 26 May 2021 21:23:07 +0800</pubDate><description><![CDATA[文章目录


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        *{
            margin:0;
            padding:0;
]]></description><category></category></item><item><title><![CDATA[25.多组件和transition-group列表元素的过渡]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117305329</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117305329</guid><author>qq_42881159</author><pubDate>Wed, 26 May 2021 21:15:02 +0800</pubDate><description><![CDATA[文章目录1.多组件过渡2.列表元素的过渡

1.多组件过渡

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .v-enter-active,.v-leave]]></description><category></category></item><item><title><![CDATA[24.VUE多标签过渡中key的使用]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117303965</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117303965</guid><author>qq_42881159</author><pubDate>Wed, 26 May 2021 20:04:57 +0800</pubDate><description><![CDATA[文章目录1.代码展示2.key的使用

1.代码展示

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .v-enter-active,.v-leave-ac]]></description><category></category></item><item><title><![CDATA[23.VUE使用动画完成过渡效果]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117303438</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117303438</guid><author>qq_42881159</author><pubDate>Wed, 26 May 2021 19:51:31 +0800</pubDate><description><![CDATA[文章目录1.使用动画完成过渡效果2.使用第三方动画库来实现过渡效果

1.使用动画完成过渡效果

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;

    &lt;style&gt;
        /*创建*/
        @keyframes myScale {
            from]]></description><category></category></item><item><title><![CDATA[22.VUE移动过渡效果]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117257077</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117257077</guid><author>qq_42881159</author><pubDate>Tue, 25 May 2021 15:25:45 +0800</pubDate><description><![CDATA[22.VUE移动过渡效果

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
    &lt;style&gt;
        .move-enter-active,.move-leave-active{
  ]]></description><category></category></item><item><title><![CDATA[21.VUE显示和隐藏动画]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117256548</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117256548</guid><author>qq_42881159</author><pubDate>Tue, 25 May 2021 15:13:50 +0800</pubDate><description><![CDATA[VUE显示和隐藏动画

     &lt;style&gt;
        /*设置transition组件管理的内容在显示和隐藏时候的样式*/
        .v-enter-active,.v-leave-active{
            transition: all 2s;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
        }
        .v-enter-to,.v-leave{
     ]]></description><category></category></item><item><title><![CDATA[20.VUE中的监听器（侦听器）]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117233091</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117233091</guid><author>qq_42881159</author><pubDate>Mon, 24 May 2021 21:32:08 +0800</pubDate><description><![CDATA[20.VUE中的监听器（侦听器）

监听器:在监听器中设置需要被监听的属性，被监听的属性的值只要发生变化，监听器就会自动调用
被监听的属性，必须是data中的某个值，也就是说watch中属性名必须存在于data中，否则无效

&lt;body&gt;
&lt;div id="app"&gt;
    &lt;input type="text" v-model="msg1"&gt;
    &lt;p&gt;{{msg1}}&lt;/p&gt;
    &lt;p&gt;{{msg2}}&lt;/p&gt;
]]></description><category></category></item><item><title><![CDATA[19.Vue计算属性]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117231458</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117231458</guid><author>qq_42881159</author><pubDate>Mon, 24 May 2021 20:42:08 +0800</pubDate><description><![CDATA[19.Vue计算属性1.计算属性介绍2.计算属性的使用计算属性的好处（缓存）：3.计算属性的setter和getter

1.计算属性介绍
什么是计算属性:是对data的补充。使用计算属性和使用data一致，没有区别。
计算属性的特点:

计算属性必须有一个函数并且返回值
计算属性默认只读，不可更改
计算属性默认缓存依赖，多次渲染时，依赖如果没有变化则只会调用一次。

2.计算属性的使用
注意点

计算属性中的属性名可以直接在插值表达式或者指令中调用，和调用data中的值一样
计算属性中的方法不能有参数!!]]></description><category></category></item><item><title><![CDATA[18.使用VUE自己封装a标签]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117200205</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117200205</guid><author>qq_42881159</author><pubDate>Mon, 24 May 2021 08:46:04 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="app"&gt;
    &lt;!--属性值为布尔类型时，原生html中想要表示f]]></description><category></category></item><item><title><![CDATA[17.VUE自定义验证属性值]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117200117</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117200117</guid><author>qq_42881159</author><pubDate>Sun, 23 May 2021 20:35:04 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="app"&gt;
    &lt;!--v-bind来管理的属性后加的双引号中写数字]]></description><category></category></item><item><title><![CDATA[16.VUE--自定义组件的属性]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117199918</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117199918</guid><author>qq_42881159</author><pubDate>Sun, 23 May 2021 20:26:01 +0800</pubDate><description><![CDATA[&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
    &lt;script src="vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="app"&gt;
    &lt;test mytitle="hello world]]></description><category></category></item><item><title><![CDATA[15.VUE---插槽slot]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117199323</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117199323</guid><author>qq_42881159</author><pubDate>Sun, 23 May 2021 20:02:04 +0800</pubDate><description><![CDATA[文章目录1.插槽的理解2.solt插槽的使用3.具名插槽

1.插槽的理解
根据自己看的博客，优快云，引用其他博主，来理解插槽。
&nbsp;&nbsp;&nbsp;&nbsp;插槽的目的在于，是组件更具有扩展性。举个栗子，电脑预留的usb接口，可以用来连接多种外部设备，耳机、音响、U盘等等，使得更具有扩展性。插槽slot的作用正是如此，例如，组件中的一个地方，默认情况下为button，而在使用的时候，我们有需求需扩展为span,扩展为input，这时候我们就需要使用到插槽。
&nbsp;&nbsp;&n]]></description><category></category></item><item><title><![CDATA[vue实现tabs切换]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117191412</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117191412</guid><author>qq_42881159</author><pubDate>Sun, 23 May 2021 11:36:01 +0800</pubDate><description><![CDATA[vue实现tabs切换

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Title&lt;/title&gt;
  &lt;script src="vue-2.4.0.js"&gt;&lt;/script&gt;
  &lt;style&gt;
    #app div{
      height: 200px;
      width: ]]></description><category></category></item><item><title><![CDATA[14.VUE过滤器filter]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117190814</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117190814</guid><author>qq_42881159</author><pubDate>Sun, 23 May 2021 11:30:35 +0800</pubDate><description><![CDATA[文章目录1.全局过滤器2.私有过滤器

1.全局过滤器
    Vue.filter('myFilter',function (value){
        // return '你好 世界';
        return value.replace('hello','HELLO');
    });

    &lt;!-- | 管道符--&gt;
    &lt;p&gt;{{msg | myFilter}}&lt;/p&gt;
    &lt;p :title="msg | myFilter"&g]]></description><category></category></item><item><title><![CDATA[13.v-model的修饰符]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117189671</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117189671</guid><author>qq_42881159</author><pubDate>Sun, 23 May 2021 11:10:40 +0800</pubDate><description><![CDATA[文章目录1.lazy2.number3.trim

&lt;script&gt;
    let vm = new Vue({
        el: "#app",
        data: {
            msg:"hello world",
            msg2:"",
            age:22,
            age2:22,
            info:'',
        },
        methods: {
            ]]></description><category></category></item><item><title><![CDATA[12.VUE表单元素的数据绑定]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117189042</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117189042</guid><author>qq_42881159</author><pubDate>Sun, 23 May 2021 10:46:40 +0800</pubDate><description><![CDATA[12.VUE表单元素的数据绑定1.输入框input2.复选框3.选择框

&lt;script&gt;
    let vm = new Vue({
        el: "#app",
        data: {
            msg:"hello world",
            cb:false,
            hobby:[],
            sex:'',
            citys:["徐州市","南京市","苏州市"],
           ]]></description><category></category></item><item><title><![CDATA[11.VUE组件的切换和动态组件:is的使用]]></title><link>https://blog.youkuaiyun.com/qq_42881159/article/details/117186697</link><guid>https://blog.youkuaiyun.com/qq_42881159/article/details/117186697</guid><author>qq_42881159</author><pubDate>Sun, 23 May 2021 09:50:05 +0800</pubDate><description><![CDATA[11.组件的切换和动态组件:is的使用1.组件的切换2.动态组件:is

1.组件的切换
页面用简单的文字来表示“登录”，“注册”页面
&lt;body&gt;
&lt;div id="app"&gt;
    &lt;button type="button" :class="{'active':isLogin}" @click="change(true)"&gt;登录&lt;/button&gt;
    &lt;button type="button" :class="{'active':!isLogi]]></description><category></category></item></channel></rss>