Vue.js系列（二）：Vue.js 起步！

前言

注意本次用cdn形式引入js学习，有node.js的玩家可以用node.js。CDN下载地址：https://vuejs.org/js/vue.min.js以及Node.js：Vue系列: windows下npm安装vue

今天博主将为大家分享Vue系列: Vue.js系列（二）：Vue.js 起步！不喜勿喷，如有异议欢迎讨论！

有一个强大的地基才能写出健壮的程序！请先阅读博主关于:Windows10用npm安装Vue！

Vue.js起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

语法格式如下：

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

或不多说上代码，来一个小测试：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例，起步！</title>
	<script src="js/Vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>个人名称 : {{site}}</h1>
		<h1>博客地址 : {{url}}</h1>
		<h1>{{details()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				site: "Sunny Chen--陈永佳",
				url: "https://blog.csdn.net/Mrs_chens",
				alexa: "10000"
			},
			methods: {
				details: function() {
					return  this.site + " - 跟我一起学Vue吧！";
				}
			}
		})
	</script>
</body>
</html>

效果如下：
可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

<div id = "vue_det"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性，实例中有三个属性分别为：个人名称、博客地址、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化–即为响应式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例，起步！</title>
		<script src="js/Vue.min.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<h1>个人名称 : {{site}}</h1>
			<h1>博客地址 : {{url}}</h1>
			<h1>Alexa : {{alexa}}</h1>
		</div>
		<script type="text/javascript">
			// 我们的数据对象
			var data = {
				site: "Sunny Chen--陈永佳",
				url: "https://blog.csdn.net/Mrs_chens",
				alexa: 10000
			}
			var vm = new Vue({
				el: '#vue_det',
				data: data
			})
			// 它们引用相同的对象！
			document.write(vm.site === data.site) // true
			document.write("<br>")
			// 设置属性也会影响到原始数据
			vm.site = "Runoob"
			document.write(data.site + "<br>") // Runoob

			// ……反之亦然
			data.alexa = 1234
			document.write(vm.alexa) // 1234
		</script>
	</body>
</html>

效果如下：
除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 测试实例，起步！</title>
		<script src="js/Vue.min.js"></script>
	</head>
	<body>
		<div id="vue_det">
			<h1>个人名称 : {{site}}</h1>
			<h1>博客地址 : {{url}}</h1>
			<h1>Alexa : {{alexa}}</h1>
		</div>
		<script type="text/javascript">
			// 我们的数据对象
			var data = {
				site: "Sunny Chen--陈永佳",
				url: "https://blog.csdn.net/Mrs_chens",
				alexa: 10000
			}
			var vm = new Vue({
				el: '#vue_det',
				data: data
			})
			document.write(vm.$data === data) // true
			document.write("<br>") 
			document.write(vm.$el === document.getElementById('vue_det')) // true
		</script>
	</body>
</html>

效果如下：