一天带你入门到放弃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">
    <boos></boos>
    <worker></worker>
</div>

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

组件的建立

//调度器
var Event=new Vue();
//boos组件
Vue.component('boos',{
template:`
    <div>
    老板发给我的了¥<input type="text" v-model="boos_money" @blur="onChange">
</div>
`,
methods:{
    onChange:function(){
        //$emit负责对事件的监听,类似jquery的trigger
        Event.$emit('onChange',this.boos_money)
    }
},
data:function(){
    return{
        boos_money:'',
    }
}
})
//worker组件
Vue.component('worker',{
    template:`<div>这个月我领取了的工资是¥ {{gongzi}}  </div>`,
    data:function(){
        return{
            gongzi:""
        }
    },
    mounted:function(){
        //钩子(类似小程序声明周期,页面渲染完毕后)
        var that=this;//使用其他变量获得当前component
        //监控当前事件
        Event.$on('onChange',function(data){
            console.log(data)
            that.gongzi=data
        })
    }

})

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

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

原数据的methos方法

methods:{
    onChange:function(){
        //$emit负责对事件的监听,类似jquery的trigger
        Event.$emit('onChange',this.boos_money)
    }
},

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

   mounted:function(){
        //钩子(类似小程序声明周期,页面渲染完毕后)
        var that=this;//使用其他变量获得当前component
        //监控当前事件
        Event.$on('onChange',function(data){
            console.log(data)
            that.gongzi=data
        })
    }

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

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

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

相关文章:

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏liulun

自己动手写客户端UI库——创建第一个控件

在上一篇文章中我们主要讲了C#如何和JS通信, 这一篇文章中,我们将创建一个最基础的Button控件 WUI库中控件的继承机制 我们先解释最简单的继承...

1947
来自专栏ionic3+

【技巧】ionic3独享滚动区域之滑动segment

其实这两个列表是公用ion-content的滚动条的,也就是说,当列表1滚动到一定距离,当切换到列表2显示时,列表2已滚动到列表1所在的位置了(效果图我就不上了...

1232
来自专栏DeveWork

自定义WordPress 标签云小工具相关参数

相信你知道WordPress 标签云widget(小工具)是什么,如果你的WordPress 主题支持小工具,就可以在后台启用标签云小工具,该小工具不仅能展示标...

2508
来自专栏木子昭的博客

Redux实现组合计数器

1053
来自专栏互联网杂技

React数据流和组件间的通信总结

首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

3737
来自专栏大前端开发

从编程小白到全栈开发:响应用户的操作

咳嗽连续咳了一个多月,蓝瘦,我都快要忘记更新文章了...还好一个读友提醒我怎么好久没更新了,我才提起一口气,嘎吱嘎吱的重新转起我这磨损严重的脑袋来。

934
来自专栏开源优测

Selenium3源码之common下action_chains.py模块分析

介绍 本文主要对action_chains.py模块的源码进行分析说明,其代码位置如图: ? 在action_chains.py模块中定义和实现了类:Actio...

3236
来自专栏IMWeb前端团队

shadow dom解析

1.shadowdom解析 1.1 什么是shadow dom 先看个例子: <video controls autoplay name="media"> ...

3555
来自专栏HaHack

学习 React Native for Android:React 基础

1272
来自专栏一个会写诗的程序员的博客

JS如何模拟鼠标点击X,Y坐标

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

1.7K5

扫码关注云+社区

领取腾讯云代金券