vue基础入门
vue.js –MVVM框架
什么是MVVM？
MVVM可以拆分成：View（页面DOM） — ViewModel（监控者） — Model（视图层）三部分
左侧的View相当于DOM内容，即所看到的页面视图，右侧的Model相当于数据对象，而中间的监控者就负责监控两侧的数据，并相对应地通知另一侧进行修改。
这就是MVVM框架，属于MVVM的JS框架除了Vue.js，还有React.js，Angular.js。
Vue.js的优点
1.Vue.js更轻量更快
2.更容易上手，易学
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，我们用{{ }}可以直接读取到它们的值。