vue.js一个简单例子的基础说明系列-[第1个例子]

2018-05-07 686 阅读1分钟

我最近学习了js,取得进步,现在学习vue.

新手学习,请不要用mpn,太复杂了. 请直接下载应用vue.js文件就上手学习吧.

参照菜鸟教程网站的vue.js教程http://www.runoob.com/vue2/vue-start.html.

从基础开始理解和上手,请看我写的中文注释,帮助理解

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue一个简单例子的基础说明</title>
	</head>

	<body>
		<div id="vue_det">
			<!--  {{ }} 用于输出对象属性和函数返回值。  -->
			<h3>site : {{site}}</h3>
			<h3>url : {{url}}</h3>
			<h3>alexa : {{alexa}}</h3>
			<h3>{{details()}}</h3>
		</div>
		
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#vue_det',//el 参数，它是 DOM 元素中的 id,这意味着我们在该div里面作业,外面不受影响,不会影响外面
				data: {//data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
					site: "菜鸟教程",//这是一个属性site,其值是字符串"菜鸟教程"
					url: "www.runoob.com",//同上
					alexa: "10000"//这是一个属性alexa,其值是字符串"10000"
				},
				methods: {//methods 用于定义的函数，可以通过 return 来返回函数值。
					details: function() {
						return this.site + " - 学的不仅是技术，更是梦想！";
					}
				}
			})
		</script>
	</body>

</html>