Vue:绑定样式,前端开发教程入门

15 阅读4分钟
框架相关

原生JS虽能实现绝大部分功能,但要么就是过于繁琐,要么就是存在缺陷,故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架,两者工作原理上存在共通点,也存在一些不同点,对于校招来说,不需要两个框架都学得特别熟,一般面试官会针对你简历中写的框架进行提问。

在框架方面,生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的,在学习的过程可以结合框架的官方文档

Vue框架

知识要点: 1. vue-cli工程 2. vue核心知识点 3. vue-router 4. vuex 5. http请求 6. UI样式 7. 常用功能 8. MVVM设计模式

React框架

知识要点: 1. 基本知识 2. React 组件 3. React Redux 4. React 路由

开源分享:docs.qq.com/doc/DSmRnRG…

new Vue({

    el:'#root',

    data:{

        name:'Hello World',

        mood:"happy"

    },

    methods: {

        changeMood(){

            const arr = ['happy', 'bad', 'norlly'];

            //三种样式随机一种

            const index = Math.floor(Math.random()*3);

            this.mood = arr[index]

        }

    },

    

})



> 这种写法适用于类名不确定,需要动态指定



* * *



[]( )2、数组写法

-------------------------------------------------------------------------



> 所谓数组写法,也就是将class样式名写在一个数组里面



{{name}}

new Vue({

    el:'#root',

    data:{

        name:'Hello World',

        mood:"happy",

        arr:['happy', 'bad', 'norlly']

    },

    methods: {

        changeMood(){

            const arr = ['happy', 'bad', 'norlly'];

            //三种样式随机一种

            const index = Math.floor(Math.random()*3);

            this.mood = arr[index]

        }

    },

})




> 这种写法适用于绑定的样式不确定,名字也不确定的情况


> 


> 这样就可以利用数组的性质,对数组里面的数据进行增加或者删除



* * *



[]( )3、对象写法

-------------------------------------------------------------------------




> 对象写法就是将class绑定的是一个对象


> 


> 对象里面的是一对对的键值对


> 


> 键为样式名,值为波尔类型


> 


> 当布尔类型为true,这个样式添加到div中,反之不添加



{{name}}
new Vue({

    el:'#root',

    data:{

        name:'Hello World',

        mood:"happy",

        arr:['happy', 'bad', 'norlly'],

        classObj:{

            happy:false,

            bad:false,

            norlly:true

        }

    },

    methods: {

        changeMood(){

            const arr = ['happy', 'bad', 'norlly'];

            //三种样式随机一种

            const index = Math.floor(Math.random()*3);

            this.mood = arr[index]

        }

    },

    

})



> 这种写法适用于绑定样式个数缺点、名字也确定,但是需要动态决定用不用的情况



* * *



[]( )二、绑定style样式

==============================================================================



> 使用Vue绑定style样式,需要将属性改为驼峰命名

> 

> 也就是说,比如font-size改为驼峰命名则是fontSize



* * *



[]( )1、对象写法

-------------------------------------------------------------------------



> 将需要添加的style属性添加到一个对象中



{{name}}
new Vue({

    el:'#root',

    data:{

        name:'Hello World',

        styleObj:{

            fontSize: '40px'

        }

    }   

})



* * *



[]( )2、数组写法

-------------------------------------------------------------------------



> 将需要添加的style属性以对象的形式添加到一个数组中



    <div class="base"  :style="styleArr">{{name}}</div>

跳槽是每个人的职业生涯中都要经历的过程,不论你是搜索到的这篇文章还是无意中浏览到的这篇文章,希望你没有白白浪费停留在这里的时间,能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试,你永远不知道市面上的行情如何。这次找工作下来,我自身感觉市场并没有那么可怕,也拿到了几个大厂的offer。在此进行一个总结,给自己,也希望能帮助到需要的同学。

面试准备

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试准备根据每个人掌握的知识不同,准备的时间也不一样。现在对于前端岗位,以前也许不是很重视算法这块,但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长,是一个长期的过程。需要在掌握了大部分前端基础知识的情况下,再有针对性的去复习算法。面试的时候算法能做出来肯定加分,但做不出来也不会一票否决,面试官也会给你提供一些思路。