• Vue学习之路---No.7(分享心得,欢迎批评指正)


    老规矩,先回顾一下上回的重点:

    1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换;如果设置了value,那么将会切换value值

    2.而多选框和单选框有相同的原理,只是多选框是以数组的方式返回值

    3.option如果没有设置value,那么渲染的值就为option中的内容

    4.各类修饰器,详情见上回分解



    回顾完上期的重点,我们来看一下今天的内容,之前几期我们对vue的基础进行了详细的学习;现在我们来看一看组件的知识:

    组件其实就是把交互功能模块独立出来,方便重复使用,形象一点说就好比是HTML中的公共样式;js中的方法。

    进入正题,那么我们该如何写一个组件呢,上代码:

    Vue.component ( ‘ my-component ’ ,{

      template: ' <div> c总,不要翻水水a </div> '

    })

      new Vue({

        el:' #nubiya ',

    })

    // 这就是一个最基本的组件;my-component是组件名;template后面跟的是组件需要渲染的内容

    <div id=" nubiya ">

      <template></template>

    </div>

    //  =>  

    <div id=" nubiya ">

      <div>c总,不要翻水水a</div>

    </div>

    需要注意的是:

    vue组件要写在前面,vue实例化要写在后面,不然就会报错;同时,组件只在vue作用域内有效,也就是在id为 nubiya 的结构下

    上面我们所认识的是 全局组件,也就是说,不管有多少个vm,全局组件都会在这些vm中生效;比如说这样:

    <div id=" nokia ">

      <o-template></o-template>

    </div>

    <div id=" nokia2 ">

      <o-template></o-template>

    </div>

     

    Vue.component( 'o-complate' ,{

      template:' <div>c总,翻个香蕉船啊</div> '

    } )

    vm1=new Vue({

      el:' nokia '

    })

    vm2=new Vue({

      el:' nokia2 '

    })

    //那么将会输出两条一样的  " c总,翻个香蕉船啊 "

    现在我们来讲一讲局部组件:

    var huawei ={

      template: ' <div>c总正在翻水水</div> '

    }

    vm = new Vue({

      el:' oppo ',

      components:{

        ' o-complate ':huawei

    }

    })

    //可以看到这个地方,我们把o-complate放在了vm对象里面,那么o-complate只能在vm作用域内,也就是id为oppo的结构内;

    //同时需要注意的是: 这个地方huawei其实就是一个参数对象。

    这里需要插播一个小细节:

    dom在组件中放的位置其实是有规定的;就像ul和li之间不能加其他标签一样,如果在组件中这样写:

    <table>

      <xiaomi></xiaomi>

    </table>

    //这样是会报错的;

    不过vue也提供了一种方法:

    <table>

      <tr is=' xiaomi '></tr>

    </table>

    //is属性可以保留html原有标签和原本的属性。

    现在来看一下,我们早有接触的data属性:

    Vue.component(' meizu ',{

      template: ' <div> abc </div> '

      data:{

        message:' hello world '

    }

    })

    //这种写法,显然是错误的~~~

    那么正确的应该怎样呢?  如下:

    Vue.component( ' meizu ',{

      template:' <div>abc</div> '

      data:function(){

        return {message:' hello '}

    }

    } )

    //这里需要注意的是组件中的data必须要用回调函数

    var data = { counter: 0 }

    Vue.component('simple-counter', {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    data: function () {
    return data
    }
    })
    new Vue({
    el: '#example-2'
    })
    <div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    </div>

    //注意:这个地方 3个button的点击事件是共享的,但是在某些时候,我们需要3个按钮独立,所以我们可以这样写:

    data:function(){

      return:{

        counter:0

    }

    }

    组件里的el属性也要用闭包+return的写法。它定义组件的有效作用域。

    Vue.component('simple-counter', {
    el:function(){
    return '#example'
    },
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    data: function () {
    return data
    }
    })

    OKOK~~~   JINTIANJIUDAOZHELILE~~~    goodnight~~~~~~~~

  • 相关阅读:
    webpack 打包优化
    webpack 打包
    webpack 删除未使用函数
    Remote Address
    https://my.vmware.com/cn/group/vmware/evalcenter?p=vsphere-eval-7#tab_download
    python 代码检测
    windows 同时安装python2和python3并配置虚拟环境
    electron-log 修改日志保存路径
    png转ico源码
    Electron 开发点滴记录
  • 原文地址:https://www.cnblogs.com/fangmc/p/6597621.html
Copyright © 2020-2023  润新知