本文介绍如何安装Vue.js并编写第一个程序，通过示例展示页面显示动态变化的过程，对比angular，强调Vue的双向绑定特性，简化DOM操作。
1.安装开发包
https://cn.vuejs.org/v2/guide/installation.html
点击开发版本进行安装
2.引入文件并编写helloworld进行第一个vue程序编写
源码如下,实现效果为页面显示Hello World111233! ，2秒后变为 ggg bone
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id = "app">{{message}}</div>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World111!'
}// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var app = new Vue({
el: '#app',
data: {
message: 'Hello World111233!'
}
});
setTimeout(function(){
app.$data.message = 'ggg bone'
},2000);
</script>
</body>
</html>
3.总结
由于之前有angular的学习与使用经验，很容易知道 vue也是采用的双向绑定，让我们专心与数据的处理而省去了对dom对象的相关操作
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
