#### vue基礎 ##### 宣告式渲染 `Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統` `Example1` ```vue {{ 10+203 }}

{{ myname }}

{{ 10+20 }} ``` > 我們已經成功建立了第一個 Vue 應用！看起來這跟渲染一個字串模板非常類似，但是 Vue 在背後做了大量工作。現在資料和 DOM 已經被建立了關聯，所有東西都是**響應式的**。我們要怎麼確認呢？開啟你的瀏覽器的 JavaScript 控制檯 (就在這個頁面開啟)，並修改 `app.message` 的值，你將看到上例相應地更新。 > > 注意我們不再和 HTML 直接互動了。一個 Vue 應用會將其掛載到一個 DOM 元素上 (對於這個例子是 `#app`) 然後對其進行完全控制。那個 HTML 是我們的入口，但其餘都會發生在新建立的 Vue 例項內部。 `除了文字插值，我們還可以像這樣來繫結元素 attribute：` ```vue 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！ var app2 = new Vue({ el: '#app-2', data: { message: '頁面加載於 ' + new Date().toLocaleString() } }) ``` > 這裡我們遇到了一點新東西。你看到的 `v-bind` attribute 被稱為**指令**。指令帶有字首 `v-`，以表示它們是 Vue 提供的特殊 attribute。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這裡，該指令的意思是：“將這個元素節點的 `title` attribute 和 Vue 例項的 `message` property 保持一致”。 > > 如果你再次開啟瀏覽器的 JavaScript 控制檯，輸入 `app2.message = '新訊息'`，就會再一次看到這個綁定了 `title` attribute 的 HTML 已經進行了更新。  ##### 條件與迴圈 ```vue

現在你看到我了

var app3 = new Vue({ el: '#app-3', data: { seen: true } }) ``` > 繼續在控制檯輸入 `app3.seen = false`，你會發現之前顯示的訊息消失了。 > > 這個例子演示了我們不僅可以把資料繫結到 DOM 文字或 attribute，還可以繫結到 DOM **結構**。此外，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用[過渡效果](https://cn.vuejs.org/v2/guide/transitions.html)。 > > 還有其它很多指令，每個都有特殊的功能。例如，`v-for` 指令可以繫結陣列的資料來渲染一個專案列表： ```vue

1. {{ todo.text }}

```  ##### 處理使用者輸入 > 為了讓使用者和你的應用進行互動，我們可以用 `v-on` 指令新增一個事件監聽器，通過它呼叫在 Vue 例項中定義的方法： ```vue

{{ message}}

反轉訊息 ``` #### 模板語法 ##### vue插值(v-if和v-show) ```go /* 文字{{}} 純HTML v-html, 防止XSS,csrf ( (1)前端過濾 (2)後臺轉義(<> < >) (3)給cookie加上屬性http ) 指令 v-html v-show */ ``` `Example1` ```vue {{ 10+20 }} {{ 10>20? 'aaa':'bbb' }} {{ myname}} {{ myhtml }} ``` #### 條件渲染 ##### Vue-class繫結和Vue-style繫結 `Example1` ```vue click 我是動態繫結class-三目寫法 我是動態繫結class-物件寫法 我是動態繫結class-陣列寫法 我是動態繫結style-三目寫法 我是動態繫結style-物件寫法 我是動態繫結style-陣列寫法 ``` ##### 條件渲染 `Example1` ```vue click 動態建立和刪除-1 動態建立和刪除-2

• {{ data }}

購物車空空如也 111 2222 3333 ``` #### 列表渲染 > 我們可以用 `v-for` 指令基於一個數組來渲染一個列表。`v-for` 指令需要使用 `item in items` 形式的特殊語法，其中 `items` 是源資料陣列，而 `item` 則是被迭代的陣列元素的**別名**。 > > `v-for` 還支援一個可選的第二個引數，即當前項的索引。 > > 也可以用of代替in作為分隔符,因為她更接近javascript迭代器的語法 ```vue

• {{ data }}--{{ index }}

• {{ data }}--{{key}}

``` ##### 列表key值設定和列表陣列檢測 ```go /* 1. v-for(特殊v-for="n in 10") a.in b.of 2. key *跟蹤每個節點的身份,從而複用和重新排序現有元素 *理想的key值是每項都有且唯一的id,data.id 3. 陣列更新檢測 a. 使用以下方法運算元組,可以檢測變動 push() pop() shift() unshift() splice() sort() reverse() b. filter(),concat()和slice(),map(),新陣列替換舊陣列,並不會導致原陣列受到影響並更新 vm.datalist.concat(["666","777"]) c. 不能檢測以下變動的陣列 vm.items[indexOfitem] = newValue "解決" 1. Vue.set(example1.items,index()fltem,newValue) 2. splice vm.datalist.splice(0,1,"youmen") */ ``` ##### vue列表過濾應用 ```vue

• {{ data }}

``` #### 事件處理 ##### 事件處理器 `可以用 `v-on` 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼` ```vue click1 click2 click3 111 ``` ##### 事件修飾符 ```go /* 1. 監聽事件-直接出發程式碼 2. 方法事件處理器-寫函式名 handleClick 3. 內聯處理器方法-執行函式表示式 handleClick($event) $event 事件物件 */ ``` `Example1` `阻止冒泡,預設行為` ```vue click1 click2 click3 111

• 111
• 222
• 333

changepage ``` ##### 按鍵修飾符 ```vue ``` #### 表單控制元件繫結 ##### 基礎用法-文字 > 你可以用 `v-model` 指令在表單 ``、`` 及 `<select>` 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇，但 `v-model` 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。 > > `v-model` 會忽略所有表單元素的 `value`、`checked`、`selected` attribute 的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 `data` 選項中宣告初始值。 > > `v-model` 在內部為不同的輸入元素使用不同的 property 並丟擲不同的事件： ```go /* text 和 textarea 元素使用 value property 和 input 事件； checkbox 和 radio 使用 checked property 和 change 事件； select 欄位將 value 作為 prop 並將 change 作為事件。 */ ``` > 對於需要使用[輸入法](https://zh.wikipedia.org/wiki/輸入法) (如中文、日文、韓文等) 的語言，你會發現 `v-model` 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 `input` 事件。 `文字 Example1` ```vue <p>Message is: {{ message }}</p> ``` `多行文字` ```vue Multiline message is: <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"> ``` `在文字區域插值 (`{{text}}`) 並不會生效，應用 `v-model` 來代替。` ##### 基礎用法-複選框 `單個複選框，繫結到布林值：` ```html {{ checked }} ``` ##### 案例 ```vue {{mytext}} 記錄使用者名稱

你喜歡的運動? 游泳 滑冰 長跑

{{ checkgroup }}

你喜歡的開發語言? Python Go js

{{ picked }}