Vue.js 基本功能了解

一、寫在前面

隔了這麼久才來出Vue的第二篇文章，真是墮落了，自己先懲罰下/(ㄒoㄒ)/~~

回過頭看自己第一篇相關文章《初試 Vue.js》（http://www.cnblogs.com/anniey/p/6307138.html），簡直慘不忍睹、不忍直視、辣眼睛，怎麼可以這麼啰嗦，廢話好多哦，沒臉看下去了~(o′?ェ?｀o)

都說入一門語言寫好hello wrold開始，我上篇文章就已經打好這個頭啦，不管是Vue1，還是2，現在咱們繼續╰(*°▽°*)╯

二、起步

1.簡單的方式

創建好一個html文件，通過script的方式引入，如下：

2.其他的方式

參考官網給出的選項：

https://cn.vuejs.org/guide/installation.html

Vue.js的核心是採用簡潔的模板語法來聲明式的將數據渲染進DOM！

例1：

1 　　

這已經生成了一個vue應用，現在數據和DOM已經綁定在一起，只要修改app.message，相應的也會更新DOM！

例2：

1

例子2涉及到了Vue的特殊屬性 v-bind 指令，也會在相應的DOM元素上渲染！

Vue不僅可以綁定DOM文本到數據，也可以綁定DOM結構到數據！

1.條件

我們可以使用其中的 v-if 指令達到條件設置，而在實際應用中控制切換一個元素的顯示也很簡單。

例3：

1

1

同樣的可以修改data屬性來達到響應。

2.循環

每個指令都有特殊的功能，v-for 指令可以綁定數組的數據來渲染一個列表!

例4：

1

1 var app_3_2=new Vue({
2 el:"#app_3_2",
3 data:{
4 todos:[
5 { text:"Learn JavaScript" },
6 { text:"Learn Vue" },
7 { text:"Learn Other " }
8 ]
9 }
10 })

打開控制台，輸入 app_3_2.todos.push({ text: "新項目" })，你會發現列表中添加了一個新項。

Vue 提供了一個 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。

例5：

1

1 var app5 = new Vue({
2 el: "#app5",
3 data: {
4 msg2: "# hello "
5 　　}
6 })

六、界面交互

為了讓用戶和你的應用進行互動，我們可以用 v-on指令綁定一個事件監聽器，通過它調用我們 Vue 實例中定義的方法!

例6：

1

1 var app6=new Vue({
2 el:"#app6",
3 data:{
4 message:"Hello Vue.js!"
5 },
6 methods:{
7 reverseMessage:function(e){
8 this.message=this.message.split("").reverse.join("");
9 }
10 }
11 })

注意：在methods方法中，只更新了狀態，沒有觸動到DOM!

一定要先註冊完組件，再來實例化！

一定要確保在初始化根實例之前註冊了組件！

否則未註冊就使用會報錯的！

組件比較強大，可以擴展，封裝可重用代碼，就是比較膩害(*@ο@*) 哇～一定要好好的熟悉熟悉它！

例7：

1

1 Vue.component("todo-item",{
2 props:["todo"],
3 template:"

"
4 });
5 var app_7=new Vue({
6 el:"#app_7",
7 data:{
8 itemsList:[
9 {text:"Vegetables"},
10 {text:"Cheese"},
11 {text:"Whatever else humans are supposed to eat"}
12 ]
13 }
14 })

組件是很重要的一部分，當你熟悉完以上的內容後要好好研究組件系統，其中涉及到許多內容需要更詳細的掌握。

在實際項目中使用時，多個頁面有相同的part，組件復用簡直厲害的不要不要~O(∩_∩)O~~

---------------------------------------------------------------

vue的基本功能介紹就到這裡了，謝謝思密達O(∩_∩)O~~

多多指教n(*≧▽≦*)n

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！