Vue初级_02

最新推荐文章于 2024-01-02 16:40:13 发布

追涨杀跌的小韭菜

最新推荐文章于 2024-01-02 16:40:13 发布

阅读量148

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_32054169/article/details/84879495

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

注册全局组件

应用场景:多处使用:的公共功能组件,就可以注册全局组件,减少冗余代码
全局API:Vue.component('组件名',组件对象);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        //注册公共的全局组件,省去很多的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></my-header>
                    <my-footer></my-footer>
                    <my-btn/>
                </div>
            `

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

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

filter||filters

将数据进行添油加醋的操作 Vue.filter("过滤器名",过滤方式fn)

过滤器分两种:

组件内的过滤器(组件内有效)

全局过滤器(所有组件共享)

先注册,后使用

组件内:filters:{过滤器名:过滤器fn},最终fn内通过return产出最终的数据

使用方式是{{原有数据|过滤器}}

需求:页面input框输入字符串,反转字符串输出,按参数显示label(中英文)

过滤器fn:声明function(data,argv1,argv2....){}

使用:{{数据|过滤器名(参数1,参数2)}}

watch监视单个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
    var App={
        template:`
            <div>
                <input type="text" v-model="myText">
                {{myText | reverse('反转字符串')}}
                <button @click="stus[0].name='rose'">改变stus[0].name属性</button>
            </div>
        `,
        data:function(){
            return {
                myText:'111',
                stus:[{name:'jack'}]
            }
        },
        watch:{
            //监视复杂类型,无法监视的原因是因为监视的事对象的地址
            //地址没改,改的是地址同属性的值
            // stus:function(){
                
            // },
            //深度监视:object||array
            stus:{
                deep:true,
                handler:function(newV,oldV){
                    alert("复杂类型监视成功")
                }
            },
            //key是属于data属性的属性名,value是监视后的行为
            myText:function(newV,oldV){
                if(newV=='i love you'){
                    alert("i love you,too");
                }
            }
            
        },
        //组件内的过滤器
        filters:{
            reverse:function(dataStr,reverseStr){ //参数1就是传递的原数据
                                //变数组  反转     变字符串
                return reverseStr+':'+dataStr.split('').reverse().join('');  //显示的内容
            }
        }
    };
    //全局过滤器
    Vue.filter('myreserve',function(data,arg1){
        return 'xxx'
    });
    new Vue({
        el:"#app",
        components:{
            app:App,
        },
        template:`<app/>`
    });
    </script>
</body>
</html>

computed监视多个

computed:{监视的业务名:function(){return 显示一些内容}}

使用:{{计算属性的名称}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
    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,相关属性,改变都会触发当前函数
                return ((this.n1-0)+(this.n2-0))*this.rate;
            }
        }
     
      
     
    };
  
    new Vue({
        el:"#app",
        components:{
            app:App,
        },
        template:`<app/>`
    });
    </script>
</body>
</html>

slot

内置的组件
slot就是子组件里给DOM留下的坑
<子组件>DOM</子组件>
slot动态的DOM,props是动态的数据

组件的生命周期

需要频繁的创建和销毁组件,比如页面中部分内容显示与隐藏,但是用的是v-if
组件缓存

内置组件中<keep-alive>

被其包裹的组件,在v-if=false的时候,不会销毁,而是停用

v-if=true,不会创建,而是激活

避免频繁的创建组件对象的性能损耗

成对比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        var Test={
            template:`
                <div>
                    我是test组件{{text}}
                    <button @click="text=text+1">点我加1</button>
                </div>
            `,
            data:function(){
                return {
                    text:'hello world'
                }
            },
            beforeCreate:function(){
                //组件创建之前
                //console.log(this.text);
                console.log("beforeCreate");
            },
            created:function(){
                //组件创建之后
                //console.log(this.text);
                console.log("created");
            },
            //使用该组件,就会触发以上的事件函数(钩子函数)
            //created中可以操作数据,并且可以实现Vue->页面的影响
            //应用:发起ajax请求

            // beforeMount:function(){
            //     //vue起作用,装载数据到DOM之前
            //     //console.log(document.body.innerHTML);
            //     console.log("beforeMount");
            // },
            // mounted:function(){
            //     //vue起作用,装载数据到DOM之后
            //     //console.log(document.body.innerHTML);
            //     console.log("mounted");
            // },
            // //基于数据改变,影响页面
            // beforeUpdate:function(){ //改变前
            //     console.log(document.body.innerHTML);
            // },
            // updated:function(){  //改变后
            //     console.log(document.body.innerHTML);
            // },
            //以上两个是当有更改数据才会触发
            //应用:beforeUpdate 可以获取原DOM
            //updated可以获取新DOM

            //对应父组件v-if false 就销毁当前组件

            activated:function(){
                console.log("组件被激活了");
            },
            deactivated:function(){
                console.log("组件被停用了");
            },
            //created和activated 都是v-if="true"子组件的状态
            //created没有被keep-alive内置组件包裹,activated被包裹了
            //销毁和停用同上
            beforeDestroy:function(){
                console.log("beforeDestroy");
            },
            destroyed:function(){
                console.log("destroyed");
            },
            //销毁,最终都是做一些其他功能的释放,比如:保存到LocalStorage
        };
        var App={
            components:{
                test:Test
            },
            data:function(){
                return {
                    isExist:true,
                }
            },
            template:`
                <div>
                    <keep-alive>
                        <test v-if="isExist"></test>
                    </keep-alive>                   
                    <button @click="isExist=!isExist">事关子组件生死</button>
                </div>
            `,
        }
    new Vue({
        el:"#app",
        components:{
            app:App
        },
        template:"<app/>"
    });
    </script>
</body>
</html>

获取DOM元素

救命稻草,document.querySelector
在template中标识元素 ref="xxx"
在要获取的时候,this.$refs.xxx获取元素,创建组件,装载DOM,用户点击按钮
ref在DOM上获取的是原生DOM对象
ref在组件上获取的是组件对象
$el是拿其DOM,这个对象就相当于我们平时玩的this,也可以直接调用函数

追涨杀跌的小韭菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue初级_02

注册全局组件应用场景:多处使用:的公共功能组件,就可以注册全局组件,减少冗余代码全局API:Vue.component('组件名',组件对象); &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="view
复制链接

扫一扫

专栏目录