-
下载
到官网Vue.js安装,选择开发版本(包含完整的警告和调试模式)。
官网下载安装HBuilderX(写vue方便的IDE)。
-
创建简单项目
新建
新建一个项目,把vue.js文件复制到项目下,创建一个.html文件。
导入
用<script>导入
码代码
写的第一个简单vue界面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}{{b}}
</div>
<script type="text/javascript">
var data = {a : "Hello ~ ", b : "斟茶冰冰yozi"};
var vm = new Vue({
el : "#app",
data : data
});
// data.a = "goodbye ~ ";
// vm.$data.b = "yozi";
</script>
</body>
</html>
id为app的,data为数据源,把对象加入到Vue的实例中,el: id而data: 数据源。
data.a 可以实现改变a的值,vm.$data.b 也是改变对象的值。
实现效果对比
data.a = "goodbye ~ "; 改变a的数据:
vm.$data.b = "yozi"; 改变b的数据: