2020.10.15叶梦宇

vue 02day

框架和库的区别

框架:是一套完整的解决方案:对目标的侵入性较大 项目如果需要更换框架,则需要重新架构整个项目。

库(插件):提供某一小功能,,对项目的侵入 性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求

node(后端)中的mvc域前端中mvvm之间的区别

后端的mvc
在这里插入图片描述
前端的mvvm的由来
在这里插入图片描述

vue的 内联样式

使用class样式

<div id="app">
            <!-- 第一种使用方式,直接传递一个数组,注意:这里的class需要使用v-bind做数据绑定-->
            <h2 :class="['color','fontsize']">{{message}}</h2>
            <h2 :class="['color','fontsize',{'active':flag}]">{{message}}</h2>
            <!-- 如果flag为true就显示 -->
            
            <!-- 在为class使用v-bind 绑定对象的时候 ,队形的属性是类名,对象的属性可带引号也可以不带,属性的值是一个标识符-->
            <h2 :class="{color:true,fontsize:true,active:false}">{{message}}</h2>
            <!-- 简写一下 -->
            <h2 :class="classobj">{{message}}</h2>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var app = new Vue({
                    el: '#app',
                    data: {
                     message:"不可改变的1234",
                     flag:true,
                     classobj:{color:true,fontsize:true,active:false}
                    },
                });
        </script>

使用style

<div id="app">
            <!-- 对象就是无序建值对的集合,如果有-必须加上引号-->
            <h1 :style="{color:'red','font-weight':200}">{{message}}</h1>
            
            <h1 :style="styleobj">{{message}}</h1>
            <h1 :style="[styleobj,styleobj1]">{{message}}</h1>
        </div>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            var app = new Vue({
                    el: '#app',
                    data: {
                     message:"不可改变的1234",
                     styleobj:{color:'red','font-weight':200},
                     styleobj1:{'fontsize':'italic'}
                    },
                });
        </script>

学习 心得

下周可能就要面试了,有一点紧张,重点还是自己的基础要牢固,冲冲冲

标签

评论