vue是一个前端框架,类似的技术还有angular js以及react。本专辑将介绍vue的基本用法,我们先看vue的一个demo。
1、环境约束
- 记事本
2、打开nodepad,将以下内容拷贝进入,保存为index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>Vue 测试实例 - </title>
<!--这里访问的是网络vue库,请读者确保本机能上外网-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<!--这是视图view,约束要显示内容的位置-->
<div id="vue">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
// 这里体现了数据和视图的绑定
el: '#vue',
// 这里是数据
data: {
site: "江苏万和",
url: "http://www.wanho.net/",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 让更多人找到好工作!";
}
}
})
</script>
</body>
</html>
3、使用浏览器打开该index.html,便能看到以下内容:
打印内容
这就是一个简单基于VUE的双向绑定的例子。