前言
上次解决了直接引入报错的问题,今天开始学习。
引入vue文件
<script src="../js/vue.min.js"></script>
<script src="script.js"></script>
(这里的script.js是我自己的文件)
数据绑定
html页面:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue起步</title>
<script src="../js/vue.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="app">
<p>site:{{site}}</p>
<p>name:{{name}}</p>
<p>all:{{getall()}}</p>
</div>
</body>
</html>
详解:
{{}}用于输出对象属性和函数返回值
script文件:script.js
window.onload = function(){
var datalist = {
site:"www.coolxu.com",
name:"hello welcome to study vue"
};
new Vue({
el:"#app",
data:datalist,
methods:{
getall:function(){
return this.site+","+this.name
}
}
});
};
详解:
el:用于界定数据放在哪里,这里我们将数据放进id名为app的div中
methods:用于定义的函数,可以通过return来返函数值
data:用于定义属性
运行结果: