vue基础入门

vue.js --MVVM框架

什么是MVVM？

MVVM可以拆分成：View（页面DOM 视图层） --- ViewModel（监控者 视图模型层） --- Model（数据层）三部分 

左侧的View相当于DOM内容，即所看到的页面视图,主要的作用是给用户展示各种信息，右侧的Model相当于数据对象，而中间的监控者就负责监控两侧的数据，并相对应地通知另一侧进行修改。

视图模型层是view和model沟通的桥梁

一方面它实现了Data Binding,也就是数据绑定，将Model的改变实时的反应到View中；

另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件（点击、滚动、touch等）时，可以监听到，并在需要的情况下改变对应的data。

这就是MVVM框架，属于MVVM的JS框架除了Vue.js，还有React.js，Angular.js。 

Vue.js的优点

1.Vue.js更轻量更快

2.更容易上手，易学

3.vue有很多特点和web开发中常见的高级功能

  解耦视图和数据、可复用的组件、前端路由技术、 状态管理、虚拟DOM

Vue核心

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法是手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图，这就是MVVM思想的实现。

视图组件化：把整一个网页的拆分成一个个区块，每个区块可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

Vue－－双向绑定

Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定，也就是说，不但数据变化了可以驱动视图，用户在页面上做了一些操作，也很方便地实现更新model层的数据。 

例子：监听用户在页面输入框输入的内容，然后将其实时更新在页面上。（使用v-model指令）

<div id="app">
     <input v-model="text">
     <p>数字:{{ text }}</p>
 </div>
 <script>
     let vm = new Vue({
         el:"#app",
         data:{
             text:"",
         }
     });
 </script> 

 上述例子中，不需要写代码去监听input控件的内容变化，用户输入的内容，会实时地更新vm实例中的data属性text的值，一旦text更新了，视图也会跟着更新了。

创建并使用一个vue实例仅需4步走：

new Vue() ---- 设置数据data ---- 挂载元素 ---- 成功渲染

第1步：创建语法

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

<script>
      let vm = new Vue({});
</script>

通过关键语句 new Vue( )就可以创建一个Vue实例：vm了。这里给Vue( )传了一个参数选项，是一个空对象。

第2步  设置数据

利用第1步的对象参数，来创建这个Vue实例vm的，比如，设置vm里面的数据。 

let vm = new Vue({
   //实例vm的数据
   data:{
          name: "李四",
          age :  18
     }
});

此时，参数对象不再是一个空对象，它包含一个属性：data，而data的值也是一个对象，这个对象就是我们给实例vm设置的数据了。

第3步  挂载元素

创建了一个实例vm，设置了vm的数据后，接下来就要通过“挂载元素”把数据展示在视图上。

视图view部分：

<div id="app"></div>

视图（html部分）上有一个id为”app”的div元素。

let vm = new Vue({
    //挂载元素
  el:'#app',
    //实例vm的数据
  data:{
        name: "李四",
        age :  18
    }
});

参数中不但有属性“data”，还多了个属性：“el”，el参数提供一个在页面上已经存在的DOM元素，作为实例vm的挂载目标。表示实例vm和id为“app”的DOM节点就关联起来了。

第4步  渲染

实例vm创建好了，数据data有了，DOM节点也关联起来了，最后一步，就是把vm的数据绑定到指定的视图上了，也就是数据渲染。

<div id="app">
  我是{{ name }}，
  今年{{ age }}岁
</div>

只需要用一个双大括号：{{  }} 即可，{{name }}  和 {{ age }} 就是我们给实例vm设置的数据name和age，我们用{{  }}可以直接读取到它们的值。