vue.js 模板语法（vue 一）

vue是一个类似于占位符的数据引擎，简单理解即为数据替换，先这里理解着

开发中js地址

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

入门例子

el为作用域，即有效范围
data 被替换的数据
methods 函数方式，在js中支持函数式编程，可以理解函数与变量为同一体

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js 起步</title>
</head>
<body>
	<h3>Vue.js 起步</h3>

	<div id="vue_app">
		<h4>url : {{url}}</h4>
		<h4>{{details()}}</h4>
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el : '#vue_app',
		data : {
			url : "www.google.com"
		},
		methods : {
			details : function() {
				return this.url + " - 函数返回参数";
			}
		}
	})
	// alert(vm.url);
	// alert(vm.details());
</script>
</html>

测试结果

vue.js 模板语法（vue 一）