初学Vue.js--创建Vue实例

昨天刚开始学习Vue.js(读音 /vjuː/, 类似于 view)想记录一下,Vue.js是一种渐进式前端框架，所谓渐进式就是你可以一步一步、有阶段性的来使用Vue.js不必一开始就使用所有的东西

(一)引用Vue.js

引用Vue.js是通过<script>标签引用的并且有两个版本，一个是开发版本一个是生产版本，区别就在于代码的压缩与否，开发环境版本包括完整的警告信息与调试模式，而生产环境版本就相当于对这些功能进行了阉割，但同时失去一些东西往往也带来一些东西，比如说速度，压缩后的vue.js速度要比压缩前的快。因为刚开始接触vue.js。所以我使用的是开发版本，当出现错误时会提醒哪里出错了，有助于更正。引用时有两种方式

(1)直接引用，此时每当运行HTML文件时电脑都是需要连接互联网的，引用方式如下：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

(2)在官网https://cn.vuejs.org/v2/guide/installation.html 下载Vue.js通过相对路径来引用，这时只需要下载时电脑需要上网，而在使用的使用就不需要电脑联网了。

<!-- 此时路径为vue.js的相对路径 -->

<script src="xx/vue.js"></script> 

(二)创建Vue.js实例

当引用vue.js后就可以创建vue实例了，创建实例的方法很简单，使用框架内嵌的构造方法Vue就可以创建一个Vue实例，并启动Vue应用，创建过程如下：

var myVue=new Vue({

             //选项

            })

变量 myVue就代表这个Vue实例，事实上，几乎所有代码都是一个对象，写入Vue实例的选项内的；

（1）选项的格式是一个一个的类似于key：value的格式，选项中的el是必不可少的，是element（节点）的前两个字母，用于指定一个页面中已经存在的DOM元素来挂载Vue实例，他可以是HTMLelement，也可以是是CSS选择器，比如：

 var myVue=new Vue({

              el:document.getElementById('myvue')  //或者是‘#myvue’

              })