vue基础知识回顾

创建vue对象：

<div id="app">
        <ul>
            <li>{{message}}</li>
        </ul>
</div>


 <script src="../vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                message:'你好呀',
             15             }
        })
  </script>

 

1.创建vue 对象的时候，传入了一些options:()

　　-- {}中包含了el属性：该属性决定了这个vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素是上

　　-- {}中包含了data属性：该属性通常会储存一些数据：

　　　　- 这些数据可以是我们直接定义出来的，比如上面这样。

　　　　- 也能是来自网络，从服务器加载的

2.浏览器执行代码流程：

　　-- 执行1-5行代码显示出对应的html

　　-- 执行第10行代码创建vue实例，并且对原HTML进行解析和修改

3.并且 目前我们的代码是可以做到响应式的

1.Vue中的MVVM:

MVVM:是(Model View ViewModel)的缩写：

什么是MVVM?:

　　--- 可参考维基百科的官方解释；https://zh.wikipedia.org/wiki/MVVM

　　--- ViewModel就相当于一个桥梁连接了View(对应DOM)和Mode(对应Planin JavaScript对象)之间的通信

　　　　-model对应的就是自己定义的一些数据或者是从网络上请求来的数据

　　　　-ViewMode就相当于我们创建的Vue实例

他们是怎么实现通信的：

　　当View想访问Mode的时候他就会通过ViewMode；而这时ViewMode会将Mode的数据绑定(Data Bindings)到View上面;

　　这时你只需要在DOM中写ViewMode的固定语法就行　ViewMode会自行将Mode中的数据进行解析出来更新到界面上面

　　ViewMode中还有一些指令会对DOM做一些监听；当用户在DOM上做一些操作时；ViewMode就会将监听来的数据放给Mode

来看看他们分层：

1.View层：

　　-- 视图层

　　-- 在我们前端开发中，通常就是DOM层。

　　-- 主要的作用就是给用户展示各种信息。

2.Model层

　　-- 数据层

　　-- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。

3.ViewMode层

　　-- 视图模型层

　　-- 视图模型层是View和Mode沟通的桥梁。

　　--一方面他实现了Data Binding,也就是数据绑定，将Mode的改变实时的反映到View中

　　-- 另一方面他实现了DOM Listener,也就是DOM监听，当DOM发生一些事件(点击，滚动，touch等)时，可以监听到，

　　　并在需要的情况下改变改变对应的DOM