一塊兒學vue——vue學習總路線html
上次解決了直接引入報錯的問題,今天開始學習。vue
<script src="../js/vue.min.js"></script>
<script src="script.js"></script>app
(這裏的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>this
詳解:spa
{{}}用於輸出對象屬性和函數返回值
script文件:script.js.net
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
}
}
});
};htm
詳解:對象
el:用於界定數據放在哪裏,這裏咱們將數據放進id名爲app的div中
methods:用於定義的函數,能夠經過return來返函數值
data:用於定義屬性
運行結果: