原创 使用雙向綁定v-model

前面已經瞭解瞭如何插入數據，監聽數據，那麼怎麼同時輸出數據並監聽事件呢？ 可以通過雙向綁定完成此功能。即v-model指令 v-model告訴Vue對這個input設置數據綁定，然後再雙引號間寫需要綁定的屬性。這樣的話，用戶再輸

2019-01-03 13:31:33

原创 vue監聽事件 v-on

代碼：問題：如何將button和counter關聯起來，通過點擊button按鈕，遞增counter的數值。 可以通過 v-on 指令來完成此關聯。 v-bind是在模板中綁定一些東西，從而將數據傳入模板中。v-on的功能則是相反的，這裏

2018-12-30 13:28:13

原创 訪問vue實例中的數據

在sayHello函數中下訪問data中title的數據，上面這樣寫 是訪問不了的。而需要通過this訪問。即：通常情況下，我們不能夠用this來調用title屬性，因爲this並不是指代data對象，但是vue爲我們做了一些背後的工作，

2018-12-30 13:28:13

原创 理解和使用指令

指令：基本上就是你放在代碼中的一些指示。 v-bind:指示vue，將一些東西和我的數據綁定，數據當然也包含所有函數，它們都存儲於下面的vue實例中。我們用的雙大括號（來調用函數），在大括號不適用時，就需要使用指令。 v-bind需要一些參

2018-12-30 13:28:13

原创 如何輸出基本的HTML，v-html指令

vue默認會轉義html代碼，即變量中存儲的html代碼，默認vue不會將其渲染成html元素，而是輸出爲純文本。看代碼：我們想要在1處輸出“新浪”的鏈接，點擊“新浪”就能夠跳轉到新浪網站，但是實際輸出的結果是:輸出的是html代碼，而不是

2018-12-30 13:28:13

原创 用v-once禁止二次渲染

先看代碼：按照我們對對代碼的理解，代碼是從上往下一行一行執行的。1處，程序從vue中獲取title數據，輸出"你好"，然後執行2，在2這裏，去調用sayHello()函數，調用methods方法中的sayHello()函數。修改title數

2018-12-30 13:28:13

原创 Vue模板語法和實例

1.如何輸出Vue實例內data對象內存儲的簡單屬性，注意Vue實例中存儲在data屬性中的數據。在html中都可以直接訪問，而不需要this.屬性名或data.屬性名。即<p>{{title}}</p>。函數也可以類似訪問，例如在vue中

2018-12-30 13:28:13 1

原创 理解VueJs模板

1.通過創建這個新的Vue實例，注意，雖然沒有把它存入一個變量內，但Vue實例還是被創建了。2.通過創建這個Vue實例，我們就建立了這一聯繫。Vue基於上面的HTML代碼，創建了一個模板，要特別注意理解的是，Vue在運行時，並不直接使用我們

2018-12-30 13:28:13

原创 實現第一個vue應用

1.vue的使用有多種方式： 直接下載使用，（vue官網是vuejs.org）。 2.直接從cnd獲取，引入到我們的服務器中使用。在項目組複製https://cdn.jsdelivr.net/npm/[email protected]/dist

2018-12-29 13:31:07

原创 vue第一個應用 vue方法

html: JavaScript： 實現結果：在input中輸入數據，實時更改title中的內容。 v-on：vue識別的命令。input：html的響應事件，用戶在input中輸入數據時觸發changeTitle函數。 vue綁定chan

2018-12-29 13:31:07