（六）第一个vue.js应用

步骤
(1)创建一个网页模板（承载整个应用）

(2)引入vue.js文件 （使用vue框架代码）

(3)在body中添加一个div（视图V层）

(4)在div后面增加script代码 （数据模型M层）

(5)完整代码

(6)运行效果

(7)VM层体现
数据模型层M与视图层V双向绑定，自动刷新。
在这里我修改了下message的值，然后左侧页面自动刷新修改。

第一个vue应用说明
从上可知：
1.每个 Vue 应用都需要通过实例化 Vue 来实现

2.对于页面中的内容，我们目前所知道的为el 与 data

其中el为element的缩写，表示绑定DOM元素节点，data表示vue实例提供出的数据，
这个实例就可以说是【模型数据层M】

3.然后vue实例中的数据，可以通过 {{}} 符号在网页标签中使用
即【视图V层】

4.然后在vue实例中的数据我们可以直接通过【实例名.字段名】访问

5.这个字段名是data里面的字段，不是data本身，如果要访问vue实例最外层的属性（如data，el）那么应该如下：【实例名.$字段名】，即前面加个$符号。
所以以_或者$开头的实例不会被vue实例代理，因为有可能会和vue内置属性字段冲突，如果要访问这些属性可以使用实例名.$data._prop,但仍然不能直接在实例模板代码中使用

6.由于VM层已经被vue框架写好，所以我们可以直接进行数据与视图的双向绑定
修改了模型数据内容后，视图自动发生改变

7.扩展
①　我们还可以扩展下，多给几个属性

②　在vue实例中el属性的值可以是一个选择器（如上面的#app）,也可以是一个dom节点
如：

③　如果在vue实例中el属性的值为class选择器等非唯一选择器，那么只有第一个class选择器对应的元素会生效。
没生效的会直接显示 {{ 数据字段名 }}

提示：
el的值最好的写法是id选择器。当然，如果没有id选择器，且已经获取到了标签的节点对象，那么我们直接使用节点对象即可。
④　对于vue实例中data属性的值，我们还可以引用vue实例外定义的变量

这里要注意了：
如果我们引用了外部的对象，那么我们由于对象是引用类型，所以在任意一处修改了他的值，那么所以使用此对象的地方都会修改

实际上，就算把外部对象赋值给data的一个字段也会如此（因为对象是引用类型）

8.总结
从上可知，其实一个vue应用和我们平常所写的应用基本上没什么区别，还是引入一个js文件到网页中，然后在网页里面使用此js文件而已。（像我们通过{{}}符号，在vue实例中写data等都是在js文件里面预定义好了的）
注意：
1.当实例编译完成后在通过vueApp.$data.extern等形式添加的字段无法进行双向绑定。
2.当我们使用var定义的vue实例对象会自动注入到window上，而使用let定义的vue实例对象无法注入到windows中去（其实不仅是vue实例，普通变量也是如此）