VUE基本結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {{ msg }} <div id="app"> {{ msg }} </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 說明當前文件的哪一個節點的內部使用vue的語法 - element data: { // 當前實例的初始化的數據 msg: 'hello world' } }) </script> </html>
模板語法文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {{ msg }} <div id="app"> {{ msg }} - {{ count }} - {{ obj.num }} --- {{ arr[1] }} </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 說明當前文件的哪一個節點的內部使用vue的語法 - element data: { // 當前實例的初始化的數據 msg: 'hello world', count: 1000, obj: { num: 30 }, arr: ['a', 'b', 'c'] } }) </script> </html>
模板語法純html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{ msg }} <div v-html="msg"></div> <div v-text="msg"></div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 說明當前文件的哪一個節點的內部使用vue的語法 - element data: { // 當前實例的初始化的數據 msg: '<h1>hello world</h1>' } }) </script> </html>
{{}} --- 原樣輸出變量的值
v-html -- 解析輸出變量的值 ---- 指令
v-text -- 原樣輸出變量的值 ---- 等同於 {{ }} ---- 指令
**防止XSS,CSRF**
> XSS 跨站的腳本攻擊 --- 輸入框 提交的是一段 javascript 代碼
---- 過濾關鍵詞/轉義關鍵詞 --- <script> --- <script>
> CSRF 跨站請求偽造 --- 用戶訪問可靠的網站A，登陸之后登陸信息存入了cookie，但是在沒有退出的情況下，請求了不可靠的網站B，B就像用戶發起一個請求，用戶響應請求時，就把自己的登陸信息泄露給了B
表達式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{ sex === 1 ? '男' : '女' }} - {{ lesson === 1 ? '一階段' : lesson === 2 ? '二階段' : '三階段'}} - {{ msg.split('').reverse().join('') }} --- {{ sex | sexFilter }} </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello world', sex: 1, lesson: 1 }, filters: { // 體驗過濾器，使用用 | 分割 -- 變量 | 過濾器名稱 sexFilter (val) { if (val === 1) { return '男' } else { return '女' } } } }) </script> </html>
贊成使用三元（目）運算符，不贊成寫其余的業務邏輯
指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> {{ msg }} <div v-if="flag"> 如果為真我就顯示 </div> <div v-else> 如果為假我就顯示 </div> <div v-show="flag"> 真真真 </div> <div v-show="!flag"> 假假假 </div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello world', flag: true } }) </script> </html>
> v-html
> v-text
> v-model 一般和表單元素一起使用，表示的就是表單元素的值
> v-if 條件判斷的指令 v-if v-else-if v-else
> v-show 顯示的依據 ---- css display:none/block
> v-for 循環遍歷數據
> v-bind 綁定屬性
> v-on 綁定事件
> v-once 只綁定一次
> v-slot
> v-pre
> v-cloak
**v-show 與 v-if 的區別**
綁定屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .activea { color: #f66 } .activeb { color: bisque } </style> </head> <body> <div id="app"> <div mymsg="msg">沒有使用綁定屬性</div> <div v-bind:mymsg="msg">使用綁定屬性</div> <div :mymsg="msg">綁定屬性的縮寫形式</div> <div :class="activeVal">aaaaaaaaaa</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello world', activeVal: 'activeb' } }) </script> </html>
# 3、class與style綁定 --- 如果后端傳遞的數據有單獨的樣式需要設計，則可用
```
{
title: '華為筆記本',
className: 'active'
}
<div :class="item.className"></div>
{
title: '華為筆記本',
active: true
}
<div :class="{active: item.active}"></div>
```
## 3.1 class綁定 --- 07class綁定.html
> 對象寫法
```
// css
.active { color: #f66 }
// html
<div id="app">
<div class="active">HTML + css設置字體顏色</div>
<input type="checkbox" v-model="flag"> 選中為真，不選中為假
<div :class="{ active: flag }">根據選中的樣式來設定顏色</div>
</div>
// js
new Vue({
el: '#app',
data: {
flag: false
}
})
```
> 數組寫法
```
// css
.bgactive { background-color: #00f }
.fontactive { color: #fff }
// html
<div :class="[bg, font]">數組顯示樣式</div>
// js
new Vue({
el: '#app',
data: {
flag: false,
bg: 'bgactive', // ++++++++++++++++++
font: 'fontactive' // ++++++++++++++++++
}
})
```
CLASS綁定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .active { color: #f66 } .bgactive { background-color: #00f } .fontactive { color: #fff } </style> </head> <body> <div id="app"> <div class="active">HTML + css設置字體顏色</div> <input type="checkbox" v-model="flag"> 選中為真，不選中為假 <div :class="{ active: flag }">根據選中的樣式來設定顏色</div> <div :class="[bg, font]">數組顯示樣式</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { flag: false, bg: 'bgactive', font: 'fontactive' } }) </script> </html>
條件判斷
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <input type="radio" v-model="sex" value="1">男 <input type="radio" v-model="sex" value="0">女 <div v-if="sex == 1">男</div> <div v-else>女</div> <select v-model="lesson"> <option value="1">一階段</option> <option value="2">二階段</option> <option value="3">三階段</option> </select> {{ lesson }} <div v-if = "lesson == 1">一階段</div> <div v-else-if = "lesson == 2">二階段</div> <div v-else>三階段</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data: { sex: 1, lesson: 3 } }) </script> </html>
v-if 可以和 key屬性同時使用，可以避免 代碼的重用
v-show css 顯示和隱藏的轉換
循環渲染
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- 不加key，末位添加 之前的會復用，如果首位刪除，全部都修改了 --> <!-- <ul> <li v-for="item of list">{{ item }}</li> </ul> --> <!-- 如果添加key值，不管添加還是刪除，都會復用 --> <!-- <ul> <li v-for="(item, index) of list" :key="index">{{ item }}</li> </ul> --> <ul> <li v-for="item of list1" :key="item.id">{{ item.title }}</li> </ul> </div> </body> <script src="vue.js"></script> <script> var app = new Vue({ el: '#app', data: { list: ['a', 'b', 'c', 'd'], list1: [ { id: 'a', title: 'aa' }, { id: 'b', title: 'bb' }, { id: 'c', title: 'cc' } ] } }) </script> </html>
**列表渲染要加 key 屬性，如果不知道拿什么作為key值，可以使用索引值,最好是使用唯一的值作為key值**
> v-for = "item of list"
> v-for = "(item, index) of list"
事件處理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <mark>原生js onclick 必須得寫函數的(),vue中可以不寫</mark> <button onclick="jsBtnClick()">js原生按鈕綁定點擊事件</button> <button v-on:click="vueBtnClick()">vue按鈕綁定點擊事件</button> <mark>原生js需要事件對象必須傳遞事件對象,vue中不需要傳遞事件對象</mark> <button onclick="jsBtnClickEvent(event)">原生js事件對象</button> <button v-on:click="vueBtnClickEvent">vue按鈕綁定點擊事件</button> <mark>如果vue中需要傳遞參數和事件對象時，必須傳入事件對象 $event</mark> <button v-on:click="vueClickParams($event, 1)">vue+事件對象+參數</button> <button @click="count += 1">{{ count }}</button> </div> </body> <script src="vue.js"></script> <script> function jsBtnClick () { console.log('js原生事件') } function jsBtnClickEvent (event) { console.log(event) } new Vue({ el: '#app', data: { count: 0 }, methods: { // vue中自定義事件的聚集地 vueBtnClick () { console.log('vue點擊事件') }, vueBtnClickEvent (event) { console.log('vue', event) }, vueClickParams (event, id) { console.log(id, event) } } }) </script> </html>
v-on:click @click
v-on:change @change
v-on:click="fn()"
v-on:click="fn($event)"
v-on:click="fn('params')
v-on:click="fn(msg)" msg為變量
修飾符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 200px;height: 200px; background-color: #f66 } </style> </head> <body> <div id="app"> <input type="text" onkeyup="getData(event)" id="val"> <!-- <input type="text" @keyup="getDataVue" v-model='vl'> --> <h1>.enter 按鍵修飾符</h1> <input type="text" @keyup.enter="getDataVue" v-model='vl'> <h1> .stop .prevent 事件修飾符</h1> <div class="box" onclick="clickjsbox()"> <button onclick="clickjs(event)">js按鈕</button> </div> <div class="box" @click="clickvuebox()"> <button @click.stop.prevent="clickvue">vue按鈕</button> </div> </div> </body> <script src="vue.js"></script> <script> // 當按下 enter 鍵時。輸出輸入框中的值 ---- js function getData (event) { if (event.keyCode === 13) { console.log(document.getElementById('val').value) } } function clickjsbox () { console.log('box') } function clickjs (event) { event.stopPropagation() console.log('js') } new Vue({ el: '#app', data: { vl: '' }, methods: { // getDataVue (event) { // if (event.keyCode === 13) { // console.log(this.vl) // } // } getDataVue () { console.log(this.vl) }, clickvuebox () { console.log('box') }, clickvue() { console.log('vue') } } }) </script> </html>
事件修飾符號：
阻止冒泡 v-on:click.stop="fn()"
阻止默認事件 v-on:click.prevent="fn"
阻止冒泡阻止默認事件 v-on:click.stop.prevent="fn"
.capture 添加事件監聽器時使用事件捕獲模式 即元素自身觸發的事件先在此處理，然后才交由內部元素進行處理
.self 只當在 event.target 是當前元素自身時觸發處理函數 即事件不是從內部元素觸發的
.once 點擊事件將只會觸發一次
.passive 不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告
按鍵修飾符：
以前如果有一個表單輸入框，當你輸入之后敲回車想要打印值
<input onchange="fn(event)" id="name" />
if (event.keyCode === 13) {name.value}
vue
<input @change.enter="fn()" id="name" />
.tab
.delete
.esc
.space
.up
.down
.left
.right
系統修飾符
.ctrl
.alt
.shift
.meta