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>

学习 心得

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