Vue环境搭建

Vue环境搭建教程

Vue 的环境搭建，这里我们主要讲解两种方式：使用本地 Vue 源码和使用 Vue CDN 的方式。

使用本地Vue源码

Vue 源码下载方式参考 Vue下载安装。我们将 Vue 源码保存为本地的 vue-2.6.10.min.js 文件，保存在 lib 目录下。

使用记事本，创建一个名为 hello haicoder.html 的文件，在 script 标签的 src 属性中输入我们保存的 vue.js 的路径，具体代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>vue helloworld</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{{ msg }}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'Hello Haicoder From Vue'
		}
	})
</script>
</html>

使用浏览器，打开该文件，显示效果如下图所示：

01 vue.js.png

使用Vue CDN

使用记事本，创建一个名为 hello haicoderCDN.html 的文件，在 script 标签的 src 属性中输入 vue.js 的 CDN 的路径，具体代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>vue helloworld</title>
	<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{{ msg }}</p>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
		el :'#app',
		data:{
			msg:'Hello Haicoder From VueCDN'
		}
	})
</script>
</html>

使用浏览器，打开该文件，显示效果如下图所示：

02 vueCDN.png

Vue代码分析

实例化Vue对象

每个 Vue 应用都需要通过实例化 Vue 来实现。实例化 Vue 的语法格式如下：

var vm = new Vue({
  // 选项
})

Vue绑定DOM元素

在 Vue 构造器中有一个 el 参数，它是 DOM 元素中的 id。在上面实例中 Vue 绑定的 id 为 app，对应 div 元素中的 id 属性。

<div id="app"></div>

此时，该 div 中的所有元素都可以使用 vue 来进行操作了。

获取VUE属性值

在被绑定的 div 中，使用 {{}} 可以获取任意的 vue 中 data 属性中的值。上面案例，我们在 vue 的 data 属性中，设置了 msg 值，然后在 div 中使用 {{msg}} 语法获取了该值。

所以，最终网页显示的效果展示了 vue 的 data 属性中的 msg 值。同时，当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。