1、vue的MVVM
- View层：视图层
通常就是dom层
主要的作用是给用户展示各种信息
- Model层：数据层
数据可能是我们固定的死数据，更多的是来自我们的服务器
- ViewModel层：视图模型层
视图模型层是View和Model沟通的桥梁
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些（点击、滚动等）事件的时候，可以监听到，并在需要的时候改变Data
2、vue的选项
（1）el
类型：String或HTMLElement
作用：决定Vue实例管理哪一个DOM
DOM：
<div id="app">
获取元素：
el:"#app",
el:document.querySelector("#app"),
（2）data
类型：Object或函数（组件当中必须是函数）
作用：Vue实例对象的数据对象
data:{ counter:0 },
（3）methods
作用：定义属于vue的一些方法，可以在其他地方调用，也可以在指令中调用
methods:{ add:function () { console.log("加");//this代表当前对象 this.counter++ }, sub:function () { console.log("减"); this.counter-- } }
方法叫method，函数叫function，在类里面的叫方法，这里也叫方法
3、vue的生命周期
生命周期里有很多回调函数，可以根据需要使用回调函数
4、代码规范
缩进：两个空格
设置CSS：
设置html：
5、模板
（1）书写模板代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} </div> <script src="../js/vue.js"></script> <script> const app=new Vue({ el:'#app', data:{ message:'hello' } }) </script> </body> </html>
将需要的模板代码设置进去：
测试：
