vue.js
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>一个简单的Vue示例</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="vue_det">
<p>site: {{site}}</p>
<p>url: {{url}}</p>
<p>{{details()}}</p>
</div>
<script>var vm = new Vue({
el: "#vue_det",
data: {
site: "百度",
url: "ww.baidu.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + "-学的不仅是技术，更是梦想";
}
}
})</script>
</body>
</html>
可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：
<div id = "vue_det"></div>
这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
接下来我们看看如何定义数据对象。
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
