生活随笔
收集整理的這篇文章主要介紹了
Vue起步
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
漸進式框架
創建Vue的實例對象，并傳入配置對象
< div id=“root”>是一個容器，容器中寫的不是原始html代碼，而是Vue的模板代碼
{{XXX}},xxx會自動讀取data中的xxx屬性
語法格式
data 用于定義屬性，實例中有三個屬性分別為：site、url、alexa。
methods 用于定義的函數，可以通過
return 來返回函數值。
{{ }} 用于輸出對象屬性和函數返回值。
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8" /><title
>初始Vue
</title
><script src
="js/vue.js" type
="text/javascript" charset
="utf-8"></script
></head
><body
><div id
="vue_det"><h1
>site
:{{site
}}</h1
><h1
>url
:{{url
}}</h1
><h1
>site
:{{details()}}</h1
></div
><script type
="text/javascript">var vm
= new Vue({el
:'#vue_det',data
:{site
:'zibo',url
:'wwww',alexa
:'11111'},methods
:{details
:function(){return this.site
+"-學習夢想"}}})</script
></body
>
</html
>
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8" /><title
>初始Vue
</title
><script src
="js/vue.js" type
="text/javascript" charset
="utf-8"></script
></head
><body
><div id
="vue_det"><h1
>site
:{{site
}}</h1
><h1
>url
:{{url
}}</h1
><h1
>Alexa
:{{alexa
}}</h1
></div
><script type
="text/javascript">var data
= {site
: '菜鳥',url
: 'www',alexa
: '255000'}var vm
= new Vue({el
: '#vue_det',data
: data
})document
.write(vm
.site
== data
.site
)document
.write('<br />')vm
.site
= "whh"document
.write(data
.site
+ '<br />')data
.alexa
= 1234document
.write(vm
.alexa
)document
.write(vm
.$data
=== data
)document
.write("<br />")document
.write(vm
.$el
=== document
.getElementById('vue_det'))</script
></body
>
</html
>
總結
以上是生活随笔為你收集整理的Vue起步的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
