2020-10-15 修饰符 计算属性 生命周期 钩子函数

修饰符

• @click.stop 阻止事件冒泡
• @click.once 执行一次
• @click.prevent 阻止默认行为
• 一系列按键修饰符

计算属性

计算属性：就是Vue实例中一个有计算data数据功能的属性

应用场景：一条数据在不同的位置想展示不同的结果

<div id="demo">
    {{xiaoming}}
</div>
<div id="demo">
    {{xiaohong}}
</div>

<script>
new Vue({
    el:"#demo",
    data:{
        text:"abcdefghijklmn"
    },
    computed:{
        xiaoming(){
            //必须return处理工作
            return this.text.toUpperCase.substr(1,3),
        }
        xiaohong(){
            return this.text.toUpperCase
        }
    }
}),
</script>

计算属性与方法的区别 (computed 与 methods)

同样都是对数据进行处理并且在视图页面中能展示处理之后的数据
计算属性与方法有什么区别？
当数据没有改变的时候无论计算属性被调用了多少次 他都会只执行一次原因是因为 他在第一次 ,执行的时候会把结果保存在缓存中 但数据没有改变的时候 每次都是从缓存中读取

方法 只要被调用就会执行
计算属性与方法有什么区别用一句话来解释 就是计算**属性有缓存 方法没有 所以计算属性对性能的消耗更低
**

生命周期

生命周期：Vue从创建到销毁的过程

生命周期的钩子函数：Vue从创建到销毁的过程中被自动调用的函数

八个钩子函数(很重要)

• beforeCreate（创建实例）
• created（创建完成）
• beforeMount（开始创建模板）
• mounted（创建完成）
• beforeUpdate（开始更新）
• updated（更新完成）
• beforeDestroy（开始销毁）
• destroyed（销毁完成）

全局过滤器与局部过滤器

• 局部过滤器只能在当前的实例的el范围内进行使用
• 全局过滤器 能在所有的实例中的el范围内都使用

语法

<div id="demodiv">{{text|xiaohong}}</div>

<div id="demodivb">{{text|xiaohong}}</div>

// 全局,写在实例之前

Vue.filter("过滤器的名字",(val)=>{
    return 逻辑
})

// 局部，写在实例内部，与data等同级

filters:{
    xiaohong(val){
        return 
    }
}

特别注意:全局时filter没有s,局部时filters含有s

组件

组件的本质是自定义标签
实例：

    <script src="node_modules/vue/dist/vue.js"></script>
    <div id="demodiv">
        <mycom></mycom>    
    </div>
    <script>
        // 全局组件  组件的本质是自定义标签
        Vue.component("mycom",{
            template:"<h1>我是一个组件1</h1>"
        })
        new Vue({
            el:"#demodiv",
            data:{

            },
        })
    </script>

遇到的问题

• 不能驼峰式定义标签(因为html标签都是小写)
• 模板里有多个标签时只显示一个

以上两种问题的解决方式待查