• 一天带你入门到放弃vue.js(二)


    接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论!

    v-if

    index.html

    
    
    <div id="app">
       <p v-if="user=='admin' &&  chmod == 777">欢迎管理员</p>
        <p v-else-if="user != 'admin' && user !='' ">欢迎用户登录</p>
        <p v-else>欢迎游客登录</p>
    </div>

    可以使用不同的数据进行判断呈递不同的显示效果

    计算属性

    可以调用计算属性的方法,在vue中调取comouted中定义

    看一下简单个人计算存款的html

    <table>     
       <thead>
            <th>项目名称</th>
            <th>资产分配情况(单位:&yen;)</th>
            </thead>
            <tbody>
                <tr>
                    <td>支付宝</td>
                    <td><input type="text" v-model.number="alipay"></td>
                </tr>
                <tr>
                    <td>京东金融</td>
                    <td><input type="text" v-model.number="jd"></td>
                </tr>
                <tr>
                    <td>银行卡</td>
                    <td><input type="text" v-model.number="yhk"></td>
                </tr>
                <tr>
                    <td>定期</td>
                    <td><input type="text" v-model.number="dq"></td>
                </tr>
                <tr>
                    <td>基金</td>
                    <td><input type="text" v-model.number="jj"></td>
                </tr>
            <!--使用内置的计算方式:computed-->
                <tr>
                    <td>总存款</td>
                    <td>{{sum}}</td>
                </tr>
            <tr>
                <td>资产均值</td>
                <td>{{average}}</td>
            </tr>
            </tbody>
        </table>

    main.js中data数据

      

    data: {
        alipay:1154,
        jj:3552,
        dq:24000,
        jd:3580,
        yhk:36871
     }

    想必我们大家都会使用传统的方式进行data中变量进行如下假发计算获取

    
    
            <!--普通方式计算-->
            <!--<tr>-->
                <!--<td>总存款</td>-->
                <!--<td>{{alipay+jd+yhk+dq+jj}}</td>-->
            <!--</tr>-->

    至此在vue中提供了计算属性,computed,在main.js指定computed对象中指定计算

      

    computed:{
      sum:function (){
          return this.alipay+this.jj+this.dq+this.jd+this.yhk;
      },
    那么前台直接去调取computed中的方法
            <tr>
                <td>总存款</td>
                <td>{{sum}}</td>
            </tr>
        <tr>
            <td>资产均值</td>
            <td>{{average}}</td>
        </tr>

    在前台中我们使用了if-model绑定了data的数据可以根据自行的改变,视图层,数据层则随之改变,但是input的数字变为String类型,无法达到计算的效果!前面我们说过使用if-model.number可以返回数值类型!此时可以达到计算效果

    自定义组件

    组件:具有特定功能的标签,我们可以去指定,这样的标签可以进行大量的使用!

    分类:全局组件和局部组件

    区别:全局组件在所有范围通用,局部组件只在特点的element元素中生效!

    全局组件

    定义方式

      

    Vue.component('btn',{
        data:function (){
            return{
                count:0
            }
        },
        template:`<button @click="count++">此按钮被你狠点了{{count}}下</button>`
    })

    此时这个btn组件(全局组件,定义完成,但是使用还需要进一步建立Vue实例)

      

    new Vue({
        el:"#app"
    })

    前台调用组件

    
    
    <div id="app">
     <btn></btn>
    </div>

    简单介绍下这个组件,btn是组件名称,在定义组件的时候捆绑的data必须是一个函数(Function),而且这个函数必须拥有return,所调取的数据是通过return返回的对象!

    template是这个组件构建的模板!

    局部组件

    通过名字很容易联想到这个组件的使用范围具有限制性,

    定义方式

      

    st1=new Vue({
        el: "#st1",
        components: {
            alert: {
                data:function (){
                    return{
                        str:"113354",
                        rea:111
                    }
                },
                template: `<button @click="onAlert">弹死你!!!</button>`,
                methods: {
                    onAlert: function () {
                        alert(this.rea)
                    }
                }
            }
        }
    })

    局部组件在新建Vue实例的时候,新建一个components对象指定出组件模板,方法(methods),以及数据(data),此时组件的应用范围只有在新建实例的el指定的范围,否则Vue则报错!

    组件配置

    全部组件和局部组件大家通过上述的实例差不多了解了,进一步了解一下咱们自己写的组件还有那些配置项,这些配置项的功能都有哪些!

    一般常用的三个:

    1.template(模板,必选)

    2.data数据

    3.methods定义的方法

    组件通讯

    前面我们简单的了解了组件的定义,以及配置!这里我们看一下组件直接的数据传递也叫组件通讯如何实现!

    分类:

    1.父子传递(父传子)

    2.子父传递(子传父)

    3.同级传递(同一辈分组件)

    父子传递

    我们定义一个alert组件用于弹出信息提示框

    首先我们看下前台(msg为弹出的提示信息)

    
    
    <alert msg="你好!!!"></alert>

    main.js

      

    Vue.component('alert',{
        template:`<button @click="onClick">点我</button>`,
        props:['msg'],
        methods:{
            onClick:function (){
                alert(this.msg)
            }
        }
    })

    在组件的中新建一个props数组,这里是msg于调取时候的消息msg名称保持一致,此时这个数据存储在props中,我们需要点按钮去改变这个内容,在组件的methos方法中定义alert(this.msg),this只带这个组件(component中的msg),数据传递成功!

    子父传递

    我们有个需求,在一个父级组件中包含一个子组件,而改变了子组件的状态后,父级组件得到不同的状态反馈!此时这个子组件的状态变量如何传递呢?接下来看一下这个传递实现方式!

    首先定义一下父组件

      

    Vue.component('parent',{
        template:  `
            <div>
                <son @show_ye="show_ye"></son>
                <p v-if="show">余额:¥183.25</p>
                
            </div>
        `
    })

    新建子组件

      

    //子组件
    Vue.component('son',{
        template:`<button @click="onClick">我的余额</button>`,
        methods:{
            onClick:function(){
                this.$emit('show_ye',{
                    a:1,
                    b:2
                })
            }
        }
    })

    新建的父组件(<parent></parent>)子组件(<son></son>),子组件是一个按钮,点击后会执行click事件,

    此时需要在父组件中的子组件(<son></son>)上捆绑一个事件监控v-on:show_ye,绑定这个事件,

    而在子组件进行监听这个show_ye事件,在methods中的this.$emit是监听了这个事件,{a:1,b:2}是成功监听后传出的数据,在父组件中有个是否显示余额的变量show,在父组件中默认是false,父组件的methos中要有这个show_ye方法,成功监听到这个事件后,子组件则传递到父组件,并将data的数据发送给父组件

    完整的组件代码(main.js)

      

    //父组件
    Vue.component('parent',{
        template:  `
            <div>
                <son @show_ye="show_ye"></son>
                <p v-if="show">余额:¥183.25</p>
                
            </div>
        `,
        data:function(){
            return{ 
                show:false
            }
        },
        methods:{
            show_ye:function(data){
                this.show=true
                console.log(data)
            }
        }
    })
    
    //子组件
    Vue.component('son',{
        template:`<button @click="onClick">我的余额</button>`,
        methods:{
            onClick:function(){
                this.$emit('show_ye',{
                    a:1,
                    b:2
                })
            }
        }
    })

    在子组件成功监听到这个show_ye后,父组件的methods方法指定这个使用data参数则就能获取到子组件的data!

    同级传递

    前台2个组件

    <div id="app">
        <interview>aa</interview>
        <worker>bb</worker>
    </div>

    interview和worker两个同级组件,boos中指定了input框,并使用v-model绑定了这个变量,可以去在数据层改变这个数,而在worker中可以正常显示这个变量的数值

    组件的建立

      

    <script type="text/javascript">
    
        //调度器
        var Event = new Vue();
    
        //面试
        Vue.component('interview', {
            //定义组件模板内容
            template: `
                <div>我今天面试拿到的税前工资是:
                    <input v-model="pre_tax_money" type="number" @blur="onChangeMethod" >
                    </div>`,
            //定义组件的方法
            methods: {
                onChangeMethod: function () {
                    //$emit负责对事件的监听,类似jquery的trigger
                    Event.$emit("onChangeMethod", this.pre_tax_money);
                }
            },
            data: function () {
                return {
                    pre_tax_money: "",//税前工资
                }
            }
        });
    
        //面试成功,工作
        Vue.component('worker', {
            //定义组件模板内容
            template: `
                <div>我今天面试拿到的税后工资是:
                    {{after_tax_money}}
                    </div>`,
            data: function () {
                return {
                    after_tax_money: "",//税后工资
                }
            },
            //钩子(类似小程序声明周期,页面渲染完毕后)
            mounted: function () {
                var _this = this;
                //监控当前事件
                Event.$on("onChangeMethod", function (pre_tax_money) {
                    console.log("pre_tax_money=" + pre_tax_money);
                    _this.after_tax_money = pre_tax_money * 0.9;
                })
            }
    
        });
    
        new Vue({el: "#app"});
    
    </script>
     

    在boos这个组件捆绑一个数据pre_tax_money,当执行这个onChange后,进行监听这个事件,把这个数值传给调度器(Event),此时就是只要父组件中onChange执行后,则被调度器监听!数值被传入Event对象中

    在被需要获取这个数据的组件中,首先定义一个数据data,return返回的名称于原数据不同,此时我们叫after_tax_money,还需要定义一个类似小程序的生命周期的东西,这里Vue官方称之为钩子,在这个组件中新建的对象mounted:中指定,在这个钩子中我们用调度器绑定刚才监听的那个事件onChange,回调函数的参数为data,就是刚才传入的data,但是此时使用this,这个this指定为Event对象,而不是component,在Event.$on之外我们首先要获取到这个component,使用that代替,然后进入钩子(mounted)赋值给component的data数据层就可以了!

    原数据的methos方法

      

            //定义组件的方法
            methods: {
                onChangeMethod: function () {
                    //$emit负责对事件的监听,类似jquery的trigger
                    Event.$emit("onChangeMethod", this.pre_tax_money);
                }
            },

    获取数据的钩子代码(mounted)

      

            //钩子(类似小程序声明周期,页面渲染完毕后)
            mounted: function () {
                var _this = this;
                //监控当前事件
                Event.$on("onChangeMethod", function (pre_tax_money) {
                    console.log("pre_tax_money=" + pre_tax_money);
                    _this.after_tax_money = pre_tax_money * 0.9;
                })
            }

    首先在钩子内指定获取到这个component!

    完整的代码在组件建立的就是了!

    转自 十月梦想博客 。
    原文地址《一天带你入门到放弃vue.js(一)

    相关文章:

    一天带你入门到放弃vue.js(一)

    一天带你入门到放弃vue.js(二)

    一天带你入门到放弃vue.js(三)

  • 相关阅读:
    vue-router 路由拦截 beforeEach 添加静态路由 与 动态添加路由
    elementUI el-upload 根据上传的图片高度,进行自适应宽度
    vue 中 字符串分两行显示
    MySQL中的<=>
    Spring mvc再启动时候会打印项里面的所有路径
    一次解决前后台交互问题
    数据库表分区,分表
    支付宝接口
    打印js中一个对象的所有属性的值
    var
  • 原文地址:https://www.cnblogs.com/IT-study/p/9592205.html
Copyright © 2020-2023  润新知