15. [基础]模板样式绑定2-进阶

这篇文章继续学习Vue的模板样式绑定。上篇文章你已经对Vue中的样式绑定有一个基本了解。我们预习一下,上节我们学了三种绑定样式的方法:

  • 通过普通字符串进行绑定;
  • 通过对象的方式进行绑定;
  • 通过数组的方式进行绑定。

这篇文章主要学习一下Vue中子组件样式的绑定和行内样式如何编写。

子组件的样式绑定

先来看一下子组件如何绑定样式。新建一个文件Demo15.html,然后把Demo14.html的内容拷贝到Demo15.html中。复制好后,编写一个子组件SonCom,组件中就是展示一个简单的内容。

代码如下:

app.component('sonCom',{
    template:`
        <div>SonCom</div>
    `
})

有了子组件后,就可以在父组件的模板中进行使用了,使用就是直接写一个类似html的标签进去就可以。

template:`
    <h2 :class="classArray">mybj123.com</h2>
    <sonCom />
`

如何区分父子组件

vue.createApp()方法中用对象形式{ }配置的一般叫做父组件,而下面使用的其他组件,叫做子组件。你也可以这样理解,主动调用的是父组件,被调用的是子组件

最简单的为子组件添加样式的方法,就是自己给子组件加上class

app.component('sonCom',{
    template:`
        <div class="green">SonCom</div>
    `
})

这时候子组件的字体颜色就变成了绿色。你还可以把class写在调用子组件的地方(也就是写在父组件里),例如下面的代码:

template:`
    <h2 :class="classArray">mybj123.com</h2>
    <sonCom class='green' />
`

先去掉子组件里的class,在调用地方增加class样式。这时候效果也是一样的。

子组件使用样式的小坑

这时候我们修改一下子组件,再写一个<div>进去,里边写上码云笔记的字样。这时候再来看结果。

app.component('sonCom',{
    template:`
        <div>SonCom</div>
        <div>码云笔记</div>
    `
})

你会发现两个<div>的样式都不起作用了。那我们如何让它变成绿色那,其实只有再两个并列的<div>外层,加上一个包括性的标签就可以了。也就是说让子组件的最外层只有一个根元素。

app.component('sonCom',{
    template:`
        <div>
            <div>SonCom</div>
            <div>码云笔记</div>
        </div>
    `
})

这样就又变成了绿色字体。还有一种用到动态绑定的方法,直接绑定属性中的class。

app.component('sonCom',{
    template:`
        <div :class="$attrs.class">SonCom</div>
        <div>码云笔记</div> 
    `
})

行内样式的编写

什么是行内样式?就是自己在模板的DOM元素上写CSS样式,比如下面的这样。

<h2 style="color:orange;">mybj123.com</h2>

除了这种写法以外,Vue中也为我们扩展了一些内容,让行内样式的写法更直观和另类。你可以直接在data中编写样式,比如在Data中这样写。

data(){
    return{
        styleString:'color:orange;'
    }
},

然后用绑定行内样式的形式,在模板中进行绑定。

template:`
    <h2 :style="styleString">mybj123.com</h2>
`

你也可以用对象的形式在data中编写CSS样式。比如写成下面的代码,然后再进行绑定。

data(){
    return{
       //.....
        styleString:'color:orange;',
        styleObject:{
            color:'red',
            background:'yellow'
        }
    }
},

在写行内样式的使用,个人觉的对象的写法更加直观和简洁,所以建议小伙伴可以采用这种对象的形式来进行编写。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 15. [基础]模板样式绑定2-进阶

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们