一、框架和库

​ 框架 vue 拥有完整的解决方案 我们写好人家调用我
​ 库 jQuery underscore zepto animate.css 我们调用它

二、渐进式（渐进增强）

​ vue全家桶 vuejs + vue-router + vuex + axios
​ 通过组合 完成一个完整的框架

三、MVC（backbone）单向

model 数据
view 视图
controller 控制器

四、MVVM（angular，vue）双向

model 数据
view 视图
viewModel 视图模型

五、安装vue

  1. cdn的方式 https://cdn.jsdelivr.net/npm/vue/dist/vue.js
  2. npm安装
    1.node package manager：npm init
    初始化会产生一个package.json的文件，这个文件用来描述项目的依赖，不能有大写、特殊字符、中文，而且不要和安装的包的名字相同
    2.npm install vue

六、初识vue

            <div id="app">
                <!--  小胡子语法 表达式 可以放赋值、取值、三元  -->
                {{msg}}
            </div>
            <script>
                let vm=new Vue({
                            el:'#app',//告诉vue能管理哪个部分,querySelector
                            data:{//data中的数据会被vm所代理
                            msg:'hello'//可以通过vm.msg取到对应的内容
                        }
                    });
            </script>

let vm = new Vue({
        el: '#app',
        data: {
            a:[1,2,3,4,5]
        }
    });//去改变数组中的某一项是监控不道到的，也不能使用改变数组长度的方法
    //错误：vm.a[0]=100;vm.arr.length-=2;
    //使用变异方法：pop push shift unshift sort reverse splice

//vue会循环data中的数据（数据劫持），依次的增加getter和setter
    let vm = new Vue({
        el: '#app',//告诉vue能管理哪个部分,querySelector
        data: {//data中的数据会被vm所代理
            p:{}
        }
    });
    //使用变量时，先要初始化，否则新加的属性不会导致页面刷新
     //vm.$set(vm.p,'school',1);//此方法可以给对象添加响应式的变化
    //替换原对象
    vm.p={school:'x',age:8,address:'xxx'};