vue：初识（MVVM、vue的选项、生命周期、代码规范、定义模板）

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>

将需要的模板代码设置进去：

测试：