vue笔记整理

Vue
    渐进式的JS前端框架

    Vue Core 核心模块 只负责页面的显示，时间的格式化

    主要是做SPA类型的项目

Vue的核心
    1，MVVM模式
    2，组件化开发

Vue基础
    1，创建Vue实例
        new Vue({
            el: "#app",
            data:{

            },
            methods:{

            }    
        });
    2，模板语法 （写在<div id="App">{{aa}}</div>里）
        2.1 插值语法 ,插入文本处
            {{"aaa"}}
        <input type="text" value="{{aa}}"> //错误
        <span>{{Math.random()}} {{"aaa".indexOf("a")}}</span>
            可以写
                常量
                data中的变量（不需要this）
                表达式  1+1  true?"OK":"NoOK"
                方法（自定义方法，js函数）
            不可以写
                if
        2.2 指令
            系统指令
            1，v-bind 给任意属性绑定vm中的数据模型（单向绑定）
                简写  :
            2，v-model 给value属性定vm中的数据模型（双向绑定）
            3，v-once 只渲染一次，如果以后值发生改变，加上v-once之后就不会变了
            4，v-on   给元素绑定事件，不光可以调用方法，也可以直接写代码
                简写 @
            5，v-html 写在标签中，会解析html标签放置文本中
            6，v-text 写在标签中，不会解析html标签放置文本中
            7，v-if   控制标签的显示和隐藏，true显示，false消失
            8，v-else 与v-if成对出现，取反
            9，v-show 控制标签的显示和隐藏，根据css display属性控制元素隐藏和显示
            10，v-for 循环遍历
            11，v-cloak 能够解决模板闪烁问题
            自定义指令

    3，Class 与 Style 绑定
        <input :class="{'样式名',true/false}">
        - 语法：`<div :class="{类名:是否添加该类名,...}"></div>`
        - 例如：`<div :class="{btn:true,red:false}"></div>`
            
        - :style="{csss属性:css属性值,...}"`
        - `:style="[{csss属性:css属性值,...}]"`
        - css属性值最好遵循驼峰命名，或者用引号包起来。

    4，过滤器
        4.1 定义全局过滤器
            //定义全局过滤器
            Vue.filter("formatDate",function(val){
                console.log(val);
            });
        4.2 定义局部过滤器
            const vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {  
            },
            filters: {
                'formatDate':function(val){
                    const myDate = new Date(val)
                    return myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate();
                }
            }
        });
        4.3 使用过滤器
            {{brand.createTime | formatDate}} 

        小结：
        总结：

        - 全局的  `Vue.filter(过滤器名称,处理函数)`
        - 局部的 `new Vue({filters:{过滤器名称:处理函数}})`
        - 如果有参数处理 `num|formatNum(20)`   
            Vue.filter("formatNum",function(val,num){ //num = 20
                console.log(val);
            });
        - 处理函数里面一定要return  

过滤器，函数的区别
    过滤器：一般用来做字符格式的转换
    函数：处理复杂业务逻辑
    插值语法{{}}：显示数据，或者简单的表达式

    5，vue操作dom
        1，首先，给你想获取dom的容器上加上一个ref属性
            <input ref="txt1" type="text" >     
        2，在vm实例对象中有一个 $refs 属性，该属性包含了所有定义了 ref 属性的标签
             const txt1 = this.$refs.txt1; 
            可以获得Dom实例对象
    
    6，自定义指令  
        6.1,定义自定义指令
            定义全局自定义指令  
            // 全局自定义指令
            // Vue.directive('focus',{
            //     inserted(el){
            //         el.focus();
            //     }
            // });
            定义局部自定义指令 directives 是与 data,el,methods,filters同级
            directives:{
                'focus': {
                    inserted(el){
                        console.log(el);
                        el.focus();
                    }
                }
            }
        6.2 使用自定义指令
            定义的时候不需要`v-`，但是使用的时候加上`v-`    
            <input v-focus ref="txt1" type="text" > 
    7，计算属性
        语法： //计算属性 与el,data,methods,filters,directives,平级
        computed: {
            msgComputed : function(){
                console.log("计算属性...");
                return this.msg.split('').reverse().join('');
            }
        },
        使用：
        {{msgComputed}}

        计算属性和方法的区别
        - 函数也可以实现数据逻辑处理得到新数据，但是多没使用一次执行一次逻辑，性能不优。
        - 计算属性，在多次使用的时候，会走缓存，性能更好。
        - 将来对数据进行（较为复杂）逻辑处理，建议使用计算属性。

    8，侦听器  
        语法： 与el,data,methods,filters,directives,平级
        // 该侦听器是对count对象进行侦听，当值发生改变时会触发该方法的执行
        watch: {
            count: function(newVal,oldVal){
                console.log("count的值从"+oldVal+"变成了"+newVal);
            }
        }

    9，事件修饰符
        ①.stop:阻止冒泡
        --对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果子级元素设置@click.stop的话就不会触发父级的click事件
        ②.prevent:阻止默认行为
                --对于如<a href="www.baidu.com" @click.prevent="linkMethod">百度</a>自带事件的,添加prevent事件后,href跳转路径将不会触发
        ③.self:仅绑定元素自身触发,防止事件冒泡
                --对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果父级元素设置@click.self的话就不会被子级元素的click事件影响
        ④.once: 事件只触发一次(常用表单提交)
        ⑤.passive: 滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用,浏览器内核线程在每个事件执行时查询prevent,造成卡顿,使用passive将会跳过内核线程查询,进而提升流畅度
        ⑥.capture: 对于冒泡事件,且存在多个冒泡事件时,存在该修饰符的会优先执行,如果有多个,则从外到内执行
        ⑦.native: 将vue组件转换为一个普通的HTML标签,如果该修饰符用在普通html标签上是不起任何作用的

    10，Vue生命周期