昨天刚开始学习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’
              })