Vue——TWO

s### vue 复习

• options的根属性
  • el:目的地（string||DOM元素）
  • template 模板
  • data 是一个函数，return 一个函数 对象中的key，可以直接在页面中使用…在js中this.key名
    • data中的属性… 在dom中 直接用，在js中 this.xxx
  • components:key是组件名，value是组件对象
  • methods:一般用来配合 xxx事件
  • props:子组件接受的参数设置[‘tetle’]
• 指令
  • v-if/v-show: if就是插入或移除的问题，show时候隐藏的问题
  • v-else-if/v-else 必须和v-if是相邻的元素
  • v-bind/v-on：bind是给属性赋值，v-on给事件进行绑定
    • v-bind：属性=“变量” ===> :属性名=“xxx”
    • v-on：事件名=“函数” ===> @事件名
  • v-bind/v-model：bind就是单向数据流（vue->页面） model是双向的（vue->页面，页面->vue）

注册全局组件

• 应用场景：多出使用的公共性功能组件，就可以注册成全局组件，减少冗杂代码
• 全局API Vue.component('组件名',组件对象);

//注册公共的全局组件，省去很多的components:{ xxx:Xxx }
Vue.component('my-btn',{
        template:`
        <button style="background-color:red;">漂亮的按钮</button>
        `
    })
    var MyHeader = {
        template:`<div>
            我是header组件
            <my-btn/>
        <div/>`
    };
    var MyFooter = {
        template:`<div>
            我是footer组件
            <my-btn/>
        <div/>`
    };

    //入口组件
    var App = {
        components:{
            'my-header':MyHeader,
            'my-footer':MyFooter,
        },
        template:`<div>
            <my-header/>
            <hr/>
            <my-footer/>

            <hr/>
            App入口组件使用全局组件如下
            <my-btn/>
        </div>`
    }

    new Vue({
        el:'#app',
        components:{
            app:App
        },
        template:'<app/>'
    });

附加功能：过滤器&监视改动

• filter || filters
  • 全局过滤器（给数据添油加醋显示）：Vue.filter( '过滤器名'，过滤方式fn );
  • 组件内的过滤器filters : { ' 过滤器名 '，过滤方式fn }
  • 将数据进行添油加醋的操作
  • 过滤器分为两种
    • 1、组件内的过滤器（组件内有效）
    • 2、全局过滤器（所有组件共享）
  • 先注册后使用
  • 组件内filters ：{ 过滤器名：过滤器 fn }最终fn内通过return产出最终的数据
  • 使用方法是{{ 原有数据 | 过滤器名 }}
  • 需求
    • 页面input框输入字符串，反转字符串输出，按参数显示label（中英文）
  • 过滤器fn：
    • 声明function(data,argv1,argv2...){ }

//2-2过滤器
        //过滤器能给数据显示进行添油加醋
        //需求：原本显示的数据是abc...添油加醋后...反转成cba
        //需求实现：1.为了互动性更好，用Input + v-model 来获取数据到vue中
        //2.输出；{{ 内容 | 使用过滤器输出 }}
    var App = {
        template:`
            <div>
                <input type="text" v-model="myText" />  
                {{ myText | reverse }}
            </div>  
        `,
        data:function() {
            return { myText:''}
        },

        //组件内的过滤器
        filters:{
            reverse:function( dataStr ) {//  参数1就是传递的原数据
                // return '固定字符串';//return 就是显示的内容
                //变数组  反转   变字符串
                return dataStr.split('').reverse().join('');
            }
        }
    }

 //全局过滤器      {{ 'xxx' | myreverse('arg1') }}
    Vue.filter('myreverse',function(data,arg1) {
        return 'xxx';
    })
  
    new Vue({
        el:'#app',
        components:{
            app:App
        },
        template:'<app/>'
    })

• watch 监视单个
  基本数据类型简单监视，复杂数据类型深度监视

//2-3watch 
    var App = {
        template:`
            <div>
                <input type="text" v-model="myText" />
                {{myText}}
                <button @click="stus[0].name='rose';">改变stus[0].name属性</button>
            </div>  
        `,
        data:function() {
            //监视简单属性，
            return { myText:'111' , stus:[{name:'jack'}] }
        },
        watch:{
            //监视复杂类型  无法监视的原因是因为坚实的是对象的地址，地址没改，改的是同地址属性的值
            // stus:function() {
            //     console.log('监视成功，不可能！');
            // },
            //深度监视：object||array
            stus:{
                deep:true,
                handler:function (newV) {
                    console.log('监视复杂数据类型成功！');
                }
            },

            //key是属于data属性的属性名，value是监视后的行为
            myText:function(newV,oldV) {
                console.log(newV,oldV);
                if(newV === 'iloveyou') {
                    alert('我不爱你！');
                }
            }
        }
    }

    new Vue({
        el:'#app',
        components:{
            app:App
        },
        template:'<app/>'
    })

• computed 监视多个
  • computed:{ 监视的业务名：function() {return 显示一些内容 }}
    • 使用：{{ 计算属性的名称 }}

//2-4 computed
        var App = {
            template:`
                <div>
                    <input type="text" v-model="n1" />
                    +
                    <input type="text" v-model="n2" />
                    *
                    <input type="text" v-model="rate" />
                    = {{ result }}
                </div>  
            `,
            data:function() {
                //监视简单属性，
                return { n1:0,n2:0,rate:0 }
            },
            computed:{
                //包含原值不变，缓存不调函数的优化机制
                result:function () {
                    //监视对象，写在了函数内部，凡是函数内部有this.相关属性，改变都会触发当前函数
                    //this.n1 this.n2 this.rate
                    console.log('监视到了')
                    return ((this.n1-0) +(this.n2-0)) *this.rate;
                }
            }
        }
    
        new Vue({
            el:'#app',
            components:{
                app:App
            },
            template:'<app/>'
        })

总结

• 全局：组件/过滤器 让大家直接用 全局不带s
• 过滤器：function （原数据，参数1，参数2）{ return 结果；}
  • 调用 {{ ‘数据’ | 过滤器名（参数1，参数2）}}
• watch 单个监视
• computed 群体监视