vue 學習 第1節

//使用this，可以直接擷取data中的值，但無法擷取到methods中的值。

var details = function () {

return this.site + " - 學的不僅是技術，更是夢想！";           

};

var methods = {

details: details           

var data = {

site: "菜鳥教程",
url: "www.runoob.com",
alexa: "10000"           

//vue 構造器

var vm = new Vue({

el: '#vue_det',
data: data,
methods: methods           

})

上面的寫法比較格式比較清晰，建議以這樣的格式編寫。

通過{{ }}的方法，與Vue中的對象進行雙向綁定，可以綁定data，也可以綁定methods，在methods中，還可以傳值。

<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details( 'arg1', 'arg2')}}</h1>           

可以使用$符号，擷取vm的屬性

vm.$data === data

vm.$el === document.getElementById('vue_det')