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

2023-11-21 08:12:16

一、计算属性

二、内容分发【重点】

demo1

第一步：定义一个待办事项的组件

第二步：我们需要让，待办事项的标题和值实现动态绑定，怎么做呢？我们可以留出一个插槽！

一、计算属性

vue的特色

什么是计算属性

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

<!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>

<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

<script type="text/javascript">
    var mv = new Vue({
        el:"#vue",
        data: {
          message:"hello"
        },
        methods:{
            currentTime1: function() {
                return Date.now();//返回一个时间戳
            }
        },
        computed: {
          currentTime2: function() { //计算属性：methods，computed方法名不能重名，重名之后，只会调用methods的方法
              this.message; //mybatis 缓存 第一次计算 存在结果里面,有增删改 之后重新计算
              return Date.now();//返回一个时间戳
          }
        }
    });
</script>


</body>
</html>

说明：

methods：定义方法，调用方法使用currentTime1，需要带括号
computed：定义计算属性，调用属性使用currentTime2,不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用vm.message=”qinjiang”，改变下数据的值，再次测试观察效果！

结论：周用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

二、内容分发【重点】

在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；

solt 插槽动态的可拔插实现复用

demo1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
   <p>列表书籍</p>
   <ul>
       <li>Java</li>
       <li>Linux</li>
       <li>Python</li>
   </ul>
</div>

</body>
</html>

测试

比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

第一步：定义一个待办事项的组件

<div id="app">
    <todo>
    </todo>
</div>


<script>
    Vue.component('todo',{
        template:'  <div>\
                        <div>待办事项</div>\
                        <ul>\
                            <li>学习</li>\
                        </ul>\
                   </div>'
    });
</script>

第二步：我们需要让，待办事项的标题和值实现动态绑定，怎么做呢？我们可以留出一个插槽！

1-将上面的代码留出一个插槽，即slot

    Vue.component('todo',{
        template:'  <div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                   </div>'
    });

2-定义一个名为 todo-title 的待办标题组件和 todo-items 的待办内容组件

    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props:['item'],
        template:'<li>{{item}}</li>'
    });

3-实例化Vue并初始化数据

    var mv = new Vue({
        el: "#app",
        data: {
            title: '列表书籍',
            message: ['Java','Linux','Python']
        }
    });

4-将这些值，通过插槽插入

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item1 in message" :item="item1"></todo-items>
    </todo>
</div>

demo2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item1 in message" :item="item1"></todo-items>

    </todo>
</div>

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

<script>

    Vue.component('todo',{
        template:'  <div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                   </div>'
    });

    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props:['item'],
        template:'<li>{{item}}</li>'
    });

    // ['Java','Linux','Python']
    var mv = new Vue({
        el: "#app",
        data: {
            title: '列表书籍',
            message: ['Java','Linux','Python']
        }
    });
</script>

</body>
</html>

三、自定义事件

通以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用this.$emit(‘自定义事件名’，参数) ，操作过程如下：

JavaScript 移除数组元素

splice（）方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

var arr = ['Microsoft','Apple','Yahoo','AOL','Excite', 'Oracle']; 
//从索引2开始删除3个元素，然后再添加两个元素：
arr.splice(2,3,'Google'，'Facebook')；//返回删除的元素['Yahoo'，'AoL'，'Excite'] 
arr; // ['Microsoft','Apple','Google','Facebook','oracle']
//只制除，不添加：
arr.splice(2, 2); // ['Google','Facebook'] 
arr; // ['Microsoft', 'Apple', 'Oracle'] 
//只添加，不删除：
arr.splice(2，0，‘Google'，‘Facebook'）；//返回[]，因为没有删除任何元素 
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'oracle']

删除按钮

    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}----<button>删除</button></li>',
        methods: {
            remove: function () {
                alert("1111")
            }
        }
    });

绑定删除事件自己调用

    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}----<button @click="remove">删除</button></li>',
        //组件里面也可以写方法 可以调用自己   当前组件  绑定当前事件
        methods: {
            remove: function () {
                alert("1111")
            }
        }
    });

1-在vue的实例中增加了methods对象并定义了一个名为removeItems的方法

    var mv = new Vue({
        el: "#app",
        data: {
            title: '列表书籍',
            message: ['Java','Linux','Python']
        },
        methods:{
            removeItems: function (index) {
                console.log("删除"+this.message[index] + "Ok");
                //只要执行了这个 removeItems 方法， 就自我删除 index 这个 元素
                this.message.splice(index,1)//一次删除一个元素  splice（）方法是修改Array的“万能方法”
            }
        }
    });

2-修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件

    Vue.component("todo-items", {
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}--{{item}}----<button @click="remove">删除</button></li>',
        //组件里面也可以写方法 可以调用自己   当前组件  绑定当前事件
        methods: {
            remove: function (index) {
                //这里的remove是自定义事件名称，需要在HTML中使用v-on:remove的方式
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

3-修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！

<todo-items slot="todo-items" v-for="(item,index) in message" :item="item"
            v-bind:index="index" @remove="removeItems(index)" :key="index">
</todo-items>

对上一个代码进行修改，实现删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    要实现的效果可以动态删除数据
-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in message" :item="item"
                    v-bind:index="index" @remove="removeItems(index)" :key="index">
        </todo-items>
    </todo>
</div>

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

<script>
    Vue.component('todo',{
        template:'  <div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                   </div>'
    });
    
    Vue.component('todo-title',{
        props:['title'],
        template:'<div>{{title}}</div>'
    });
    //vue  组件   组件 与 组件 之间可以用插槽
    Vue.component("todo-items", {
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}--{{item}}----<button @click="remove">删除</button></li>',
        //组件里面也可以写方法 可以调用自己   当前组件  绑定当前事件
        methods: {
            remove: function (index) {
                //这里的remove是自定义事件名称，需要在HTML中使用v-on:remove的方式
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });
    /*   组件 怎么调用  vue  里面的方法  并且删除掉数据   */
    //vue  实例
    var mv = new Vue({
        el: "#app",
        data: {
            title: '列表书籍',
            message: ['Java','Linux','Python']
        },
        methods:{
            removeItems: function (index) {
                console.log("删除"+this.message[index] + "Ok");
                //只要执行了这个 removeItems 方法， 就自我删除 index 这个 元素
                this.message.splice(index,1)//一次删除一个元素  splice（）方法是修改Array的“万能方法”
            }
        }
    });
</script>

</body>
</html>

Vue入门小结

核心：数据驱动，组件化

优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

常用的属性：

v-if
v-else-if
v-else
v-for
v-on绑定事件，简写@
v-model数据双向绑定
v-bind给组件绑定参数，简写：

组件化：

组合组件slot插槽
组件内部绑定事件需要使用到 this.$emit("事件名",参数);
计算属性的特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

说明 Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~

码农公寓

一、计算属性

二、内容分发 【重点】

demo1

第一步：定义一个待办事项的组件

第二步：我们需要让，待办事项的标题和值实现动态绑定，怎么做呢？我们可以留出一个插槽！

demo2

三、自定义事件

JavaScript 移除数组元素

Vue入门小结

相关文章

二、内容分发【重点】