计算属性、内容分发、自定义事件

什么是计算属性
计算属性的重点突出在,属性两个字上(属性是名词),首先它是个属性其次这个属性有计算的能力(计算是动词),这里的计算就是一个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性),今次而已;可以想象为缓存! 上代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <p>currentTime1: {{currentTime1()}}</p>
    <p>currentTime2: {{currentTime2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>


    var vm=new Vue({
        el:"#vue",
        data: {
            message: "hello Vue"
        },
        methods: {
          currentTime1: function () {
                return Date.now();//返回一个时间戳
          }
        },
        computed: {//计算属性:methods,computed方法名不能重名,崇明之后,只会调用methods的方法
            currentTime2:function () {
                this.message;
                return Date.now();//返回一个时间戳
            }
        }

    });
</script>
</body>
</html>

注意:methods和computed里的东西不能重名

说明:

  • methods:定义方法,调用方法使用currentTime1(),需要带括号
  • computed:定义计算属性,调用属性使用currentTime2,不需要带括号;<code>this.message</code>是为了能够让currentTime2观察到因数变化而变化
  • 可以在控制台使用<code>vm.message="qinjiang",</code>改变下数据的值,再次测试观察结果

结论:

调用发发时,每次都需要进行计算,既然有计算过程则必定产生系统开销,所以可以用计算属性来优化这一点。计算属性的主要特性就是为了将不经常变化的计算结果进行缓存,以节约我们的系统开销

内容分发
Vue.js中我们使用<slot></slot>元素作为承载分发内容的出口,称之为插槽,可以应用在组合组件的场景中;
测试:
第一步:定义一个待办事项的组件
<div id="vue">
    <sxh> </sxh>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("sxh",{
        template: "<div>\
                     <p>爱情</p>\
                        <ul>\
                            <li>死循环</li>\
                            <li>滴滴答答</li>\
                            <li>大大</li>\
                        </ul>\
                    </div>"
    });
    var vm=new Vue({
        el:"#vue",
      
    });
</script>

第二部:我们需要让代办事项的标题和值实现动态绑定,怎么做呢?我们可以流出一个插槽!

  1. 将上面的代码留出一个插槽,即slot

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="vue">
        <sxh>
        </sxh>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        Vue.component("sxh",{
            template: "<div>\
                         <slot name='sxh-title'></slot>\
                            <ul>\
                                <slot name='sxh-context'></slot>\
                            </ul>\
                        </div>"
        });
    </script>
    </body>
    </html>
  1. 定义一个名为 sxh-title的代办标题组件 和 sxh-context 的代办内容组件

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        Vue.component("sxh-title",{
            props: ['title'],
            template: "<div>{{title}}}</div>"
        });
        Vue.component("sxh-context",{
            props: ['context'],
            template: "<li>{{context}}</li>"
        });
    </script>
  1. 初始化Vue并初始化数据

    <script>
    var vm=new Vue({
     el:"#vue",
     data: {
         SxhTitle: "爱情",
         SxhContext: [
             "死循环","滴滴答答","大大"
         ]
     }
    });
    </script>
  1. 将这些值,通过插槽插入

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    
    <div id="vue">
    <sxh>
     <sxh-title slot="sxh-title" :title="SxhTitle"></sxh-title>
     <sxh-context slot="sxh-context" v-for="sxhContext in SxhContext" :context="sxhContext"></sxh-context>
    </sxh>
    </div>
    </body>
    </html>
  2. 完整代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    
    <div id="vue">
    <sxh>
     <sxh-title slot="sxh-title" :title="SxhTitle"></sxh-title>
     <sxh-context slot="sxh-context" v-for="sxhContext in SxhContext" :context="sxhContext"></sxh-context>
    </sxh>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
    Vue.component("sxh",{
     template: "<div>\
                  <slot name='sxh-title'></slot>\
                     <ul>\
                         <slot name='sxh-context'></slot>\
                     </ul>\
                 </div>"
    });
    Vue.component("sxh-title",{
     props: ['title'],
     template: "<div>{{title}}}</div>"
    });
    Vue.component("sxh-context",{
     props: ['context'],
     template: "<li>{{context}}</li>"
    });
    var vm=new Vue({
     el:"#vue",
     data: {
         SxhTitle: "爱情",
         SxhContext: [
             "死循环","滴滴答答","大大"
         ]
     }
    });
    </script>
    </body>
    </html>

说明:我们的sxh-title和sxh-context组件分别被分发到了sxh组件的sxh-title和sxh-context插槽中

自定义事件
使用this.$emit(‘自定义事件名’,参数)在组件中操作Vue实例中的数据项的删除,操作过程如下: 1. 在vue的实例中,增加了methods对象定义一个名为removecontext的方法
var vm=new Vue({
        el:"#vue",
        data: {
            SxhTitle: "爱情",
            SxhContext: [
                "死循环","滴滴答答","大大"
            ]
        },
        methods: {
            removertext:function (index) {
                this.SxhContext.splice(index,1)//一次移除一个元素
            }
        }
    });
  1. 修改sxh-context代办内容组件的代码,增加一个删除按钮,并且绑定事件!

     Vue.component("sxh-context",{
            props: ['context','index'],
            template: "<li>{{context}}<button @click='removeli'>删除</button></li>",
            methods: {
                removeli:function (index) {
                    //这里的removeli是自定义事件的名称,需要在Html中使用v-on:removeli的方式指派
                    this.$emit('removeli',index);
                }
            }
        });
  1. 修改sxh-context代办内容组件的Html代码,增加一个自定义事件,比如叫removeli可以和组件的方法绑定,然后绑定到vue的方法中!

    //增加了v-on:removeli="removertext(index)”自定义事件,比如叫removeli,可以和组件的方法绑定,然后绑定到vue的方法中!
    <sxh-context slot="sxh-context" v-for="(sxhContext,index) in SxhContext" :context="sxhContext" :index="index" v-on:removeli="removertext(index)" :key="index">
逻辑理解
Vue入门小结
核心:数据驱动、组件化 优点:借鉴了AugulaJS的模块化开发和React的虚拟Dom,虚拟Dom就是把Dom操作放在内存中执行。 常用的属性: - v-if  - v-else-if - v-else - v-for - v-on 绑定事件,简写  <code>@</code> - v-model  数据双向绑定 - v-bind  给组件绑定参数,简写  <code>:</code> 组件化: - 组合组件slot插槽 - 组件内部绑定事件需要使用到<code>this.$emit("事件名",参数)</code> - 计算属性的特色,缓存计算数据 遵循SoC 关注度分离原则,Vue是纯粹的视图框架,并不包含,比如Ajax之类的通信功能,为了解决通信问题,我们需要使用Axios 框架做异步通信;
说明
Vue的开发都是要基于NodeJS, 实际开发采用 vue-cli脚手架开发,vue-router 路由,vuex做状态管理; Vue UI,界面我们一般使用 ElementUI(饿了么出品),或者ICE(阿里巴巴出品!)来快速搭建前端项目
Last modification:February 6th, 2020 at 03:17 pm
如果觉得我的文章对你有用,请随意赞赏