第一个Vue程序开发
这是一个vue入门小案例
一、认识Vue
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
一个Vue程序分为 视图层和 脚本层，视图用于静态页面的展示，对于内容的展示不在像之前使用Html+css那样需要把数据写死了，用到vue可以通过数据绑定对我们需要的元素进行赋值。
在写Vue应用之前我们需要将 Vue.js应用包引入到我们的页面里。 Vue.js可以通过官网下载
引入的代码，单独放到一个脚本里：
<script src="./vue/vue.js"></script>
二、Vue的两个部分
- vue的视图层
- vue的脚本
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>快速入门</title> </head> <body> <!--视图 --> <div id="div"> </div> </body> <script src="./vue/vue.js"></script> <script> //脚本 </script> </html>
接下来我们在视图层写上我们的 绑定数据，绑定数据的格式就是：
{{变量名}}
绑定成功之后，我们需要把它放到一个 div块里。将div块的id选择器进行命名，因为一会儿我们将通过脚本所以id选择器实现数据的绑定。
脚本层的实现：
<script> //脚本 new Vue({ //01、创建Vue的核心对象 el:"#选择器名称", //02、通过选择器索引到指定div块里面 data:{ 变量名："Hello Vue"//03、赋值我们的数据指定变量 } }); </script>
三、整个代码及其运行结果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>快速入门</title> </head> <body> <!--视图 --> <div id="div"> {{msg}} </div> </body> <script src="./vue/vue.js"></script> <script> //脚本 new Vue({//核心对象new el:"#div",//这里是获取对象，获取div里的对象之后赋值给el data:{ msg:"Hello Vue" } }); </script> </html>
