[JavaScript知识库]Vue计算，插槽及自定义事件

vue

计算属性(类似于Mybatis缓存)

设计计算属性的初衷是用于简单运算的，在一个计算属性里可以完成各种复杂的逻辑，包括运算，函数调用等，最终返回一个结果即可。

将计算出来的结果保存在属性中，在内存中运行。

<div id="a">
  <p>Now:{{currentTime()}}</p>
</div>
<script type="text/javascript">
  var vm = new Vue({
    el: "#a",
    data: {
      message: "hello ,cyl"
    },
    methods: {
      currentTime: function () {
        return Date.now();//返回当前时间戳
      }
    },
    computed: {//计算属性，方法名与计算属性不能重名
               //如果出现重名，仅会调用methods中的方法
      currentTime: function () {
        return Date.now();//返回当前时间戳
      }
    }
  });
</script>

summary：调用方法时，每次都要进行计算，既然有计算就会有系统开销，如果这个值不会经常性变化，此时就会将此结果缓存起来，采用计算属性可以做到这一点。
计算属性的特性就是为了将不经常变化的计算结果缓存起来，以节约系统开销。因为前端的并发量比后端要高出好几倍，所以节约一点缓存对前端来讲很有必要。

插槽(vital)

在vue中，我们可以使用元素作为分发内容的出口，可应用在组件组合的场景中。

//view
<div id="a">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>

<script type="text/javascript">
    //定义插槽
    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>'
    });
    var vm = new Vue({
        el: "#a",
        data: {
            title: "cyl",
            todoItems:['java','python','C++','php']
        }
    });
</script>

自定义事件

Vue为我们提供了自定义事件的功能，能很好的解决这个问题，使用this.$emit(‘自定义事件名’,参数)

//前端
<div id="a">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    v-bind:item="item" v-bind:index="index"
                    v-on:remove="removeItem(index)" v-bind:key="index"></todo-items>
    </todo>
</div>

//js文件
<script type="text/javascript">
    //定义插槽
    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','index'],
        template: '<li>{{index}}--{{item}}<button @click="remove">delete</button></li>',
        methods: {
            remove: function (index) {
                //自定义事件分发
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#a",
        data: {
            title: "cyl",
            todoItems:['java','python','C++','php']
        },
        methods: {//删除方法
            removeItem: function (index) {
                alert(this.index+"已删除!");
                this.todoItems.splice(index,1);//一次移除一个元素
            }
        }
    });
</script>

• 在组件中移除vue的对象
• 前端和vue通过标签id进行绑定
• 组件(component)通过插槽(slot)也和前端实现绑定
• 我们是要删除vue中的元素
• 通过$emit()事件可以绑定前端自定义事件
• 通过自定义事件调用vue实例中的删除事件进行删除

总结一下

• Vue核心：数据驱动，组件化
  Vue是极其纯净的视图框架，因此不包含类似于Ajax的通信功能，为解决异步通信，使用Axios框架
  1.Vue的基础语法
• v-if
• v-else-if
• v-else
• v-for
• v-on 绑定事件，简写’@’
• v-model 数据双向绑定
• v-bind 给组件绑定参数

组件化

• 组合组件插槽(slot)
• 组件内部绑定事件使用this.$emit(“eventName”,param)
• 具有计算属性，缓存计算数据
  2.条件判断
  3.Vue网络通信Axios(前后端交互)
  4.组件及界面布局(至此，Vue入门结束)