第一课 Vue环境准备
Vue环境准备
VueJS是原华人谷歌工程师尤雨溪所编写的一款MVC前端JS框架，和Angular类似，轻量适合开发小型项目。
1） Vue官网地址
https://cn.vuejs.org/
2）项目文件Vue.JS
在进行项目讲解之前需要在网页中引入VueJS的主文件，地址如下：
<script src="https://unpkg.com/vue"></script>
3）版本选择
Vue2.0较1.0作了较多的改变，很多语法都不太一样了，目前版本是2.x版本（日期：2017/09/07）。
4）调用Vue
静态页面中Vue引入类似于JQuery，将Vue放置进网页即可，自己写的Vue代码要放在引用的JS框架文件之后。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
</body>
</html>
<script>
// 自己的Vue代码块
</script>
5）浏览器支持
目前几乎所有新的框架都对旧版本（IE9之前）的浏览器不再支持，选择本框架前请谨慎。
初始化Vue项目环境
1）示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script>
// 自己的Vue代码块
new Vue({
el: '#app'
})
</script>
2）确定主环境
在编写Vue的时候，需要确定一个主环境，自己的代码都写在主环境下
以上通过构造函数的形式创建了一个Vue的作用域环境，并绑定了一个父节点ID为’#app’的DOM元素节点。
el属性其实就是类似以下示例的实现：
el: '#app' == document.querySelect('#app');
初始化主环境的多种实现方式
1）el绑定主环境
new Vue({
el: '#app'
})
2)$mount手动挂载
new Vue({
}).$mount('#app');
3)实例$mount挂载
let app = new Vue({
});
app.$mount('#app');
创建第一个Vue应用
<div id="app">{{test}}</div>
<script>
new Vue({
el: '#app',
data: {
test: 'Hello World !'
}
})
</script>