Vue
可以獨立完成前后端分離式web項目的JavaScript框架
三大主流框架之一： Angular React Vue
先進的前端設計模式：MVVM
可以完全脫離服務器端，以前端代碼復用的方式渲染整個頁面：組件化開發
特點：
單頁面web應用
數據驅動
數據的雙向綁定
虛擬DOM
| 1 vue初識 |
變量的定義與值的的輸出
vue變量：被稱為插值表達式 {{ vue變量 }}
<div id='app'> <h1> {{ h1_msg }} </h1> <h2> {{ h2_msg }} </h2> </div>
//js <script> new Vue({ el:'#app', //被稱為掛載點 data:{ //為掛載點的頁面結構提供數據 h1_msg:'h1的內容', h2_msg:'h2的內容'， } })
可以識別html標簽
vue的使用：
-
- 在html中書寫掛載點的頁面結構，用id表示 （id具有唯一標識性）
- 在自定義的script標簽內用new關鍵字實例化Vue對象，傳入一個大字典
- 在字典中通過 el掛載點 與掛載點頁面結構綁定，data為 掛載點里面的變量 傳輸數據
| 2 vue實例之事件 |
用 v-on 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法:
v-on:事件名='變量名' 實例化Vue里面 methods關鍵字 為掛載點提供事件的 里面寫你的 變量名：function
<!--html--> <div id="app"> <h1 v-on:click="clickAction">h1的內容是{{ msg }}</h1> </div>
//js <script> new Vue({ el:'#app', data:{ msg:'vue渲染的內容' }, methods:{ //為掛載點提供事件的 clickAction:function () { alert(123) } } }) </script>
| 3 vue操作樣式 |
v-bind 特性被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這里，該指令的意思是：“將這個元素節點的 style特性和 Vue 實例的 v_style 屬性保持一致”。
<!--html--> <div id="app"> <p v-on:click="btnClick" v-bind:style="v_style">點擊p文字顏色變為綠色</p> <div v-on:click="btnClick" v-bind:style="v_style"> click me give your some color ! </div> </div>
//js <script> new Vue({ el:'#app', data:{ v_style:{ color:'block' } }, methods:{ btnClick:function () { this.v_style.color = 'green' //只要是在id為app div標簽里面的都可以用this 都是Vue實例化的對象 } } }) </script>
小結：
vue通過 v- 指令來控制標簽的屬性
vue通過 變量 數據驅動頁面（頁面內容）
| 4 文本指令 |
v-on:mouseover 鼠標懸停
v-once 只能操作一次 當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上的其它數據綁定
v-text: 給標簽加內容
v-html: 輸出真正的 HTML，你需要使用 v-html指令：
<!--html--> <div id="app"> <p>{{ msg1 }}</p> <!--<p v-text="msg2"></p>--> <p v-html="msg2"></p> <p v-html="msg3"></p> <p v-once="msg4" v-on:mouseover="action">{{ msg4 }}</p> </div>
//js <script> new Vue({ el:'#app', data:{ msg1:'msg1', msg2:'<b>**msg2**</b>', msg3:'msg3', msg4:'hover me!' }, methods:{ action:function () { // 如果想操作第一層級的（el data methods） data的話 需要用this.$data this.msg3 = '<i>new msg3</i>' //this.$data.msg3 } } }) </script>
| 5 事件指令 |
v-on:'事件名' 可以簡寫為 @事件名='函數名' v-on == > @
v-bind:herf 可以簡寫為 :herf v-bind ==> :
click 鼠標點擊 鼠標事件的對象：直接寫函數名，默認將鼠標事件對象傳入 $event就代表鼠標事件對象
事件的傳參 函數可以寫多個值 傳值可以不用按照函數的位置形參（必須被傳值）
<!--html--> <div id="app"> <p v-on:click="action1">{{ msgs[0] }}</p> <p @click="action2">{{ msgs[1] }}</p> <!--事件的傳參--> <ul> <li @click="liAction(100)">列表項1</li> <li @click="liAction(200)">列表項2</li> <li @click="liAction(300)">列表項3</li> </ul> <!--鼠標事件的對象：直接寫函數名，默認將鼠標事件對象傳入--> <div @click="func1">func1</div> <!--鼠標事件的對象：一旦添加（）,就必須手動傳參， $event就代表鼠標事件對象--> <div @click="func2($event,'abc')">func2</div> </div>
//js <script> new Vue({ el:'#app', data:{ msgs:['111','222'] }, methods:{ action1:function () { alert(this.msgs[0]) }, action2:function () { alert(this.msgs[1]) }, liAction:function (mun,msg) { console.log(mun,msg) }, func1:function (ev) { console.log(ev) }, func2:function (ev,msg) { console.log(ev); console.log(msg) } } }) </script>
函數（兩個位置參數） 事件傳參傳一個值 事件liAction
函數傳入傳入$event 鼠標事件對象 abc 事件func2
鼠標事件 直接寫行數名func1
| 6 屬性指令 |
用vue綁定屬性，將屬性內容交給vue處理
class 屬性可以設置單個屬性 多個類名：[c1,c2] 如果想固定寫死一個數據，不再是變量 ：class=" 'br' " 多類名：class="[c1,'br']"
style 屬性 ：style='s1' 一個變量：該變量的值是一個大字典{} {}字典內部完成一個個屬性的設置
一個{}字典 字典內一個個屬性有一個個變量單獨控制 ：style="{fonSize:fs,color:c}"
<style> .rDiv { width: 100px; height: 100px; background-color: red; } .gDiv { width: 200px; height: 50px; background-color: green; } .br { border-radius: 50%; } </style> <div id="app"> <!--屬性指令：用vue綁定屬性，將屬性內容交給vue處理--> <p class="" style="" v-bind:owen="oo" :jason="jj"></p> <!--class屬性--> <p :class="c1" @click="action1"></p> <!--多類名--> <p :class="[c1, c2]"></p> <!--'br'固定寫死的數據，不再是變量--> <p :class="[c1, 'br']"></p> <!--style屬性--> <!--一個變量：該變量值為{} {}字典內部完成一個個屬性的設置--> <p class="gDiv" :style="s1">12345</p> <!--一個{}字典： 字典內一個個屬性有一個變量單獨控制--> <p class="gDiv" :style="{ fontSize:fs,color:c }">6789</p> </div>
<script>
new Vue({
el:'#app',
data:{
oo:'Owen',
jj:'Jason',
c1:'rDiv',
c2:'br',
s1:{
fontSize:'30px',
color:'yellow',
},
fs:'20px',
c:'orange'
},
methods:{
action1:function () {
if (this.c1=='rDiv'){
this.c1='gDiv'
}else{
this.c1='rDiv'
}
}
}
})
</script>
| 7 表單指令 |
表單指令：v-model='變量' 在兩個輸入框屬性中都定義同一個話 兩個輸入框內容會同步
單選框 v-model 綁定的變量是單選框中某一個input的value
多選框 v-model綁定的變量是一個列表 ，列表存放0到任意一個多選框的value
<div id="app"> <!--表單指令： v-model='變量'--> <form action=""> <p> <input type="text" v-model="val" name="user"> </p> <p> <input type="text" v-model="val"> </p> <!--單選框 v-model 綁定的變量是單選框中某一個input的value--> <p> 男：<input type="radio" v-model="r_val" value="male" name="sex"> 女：<input type="radio" v-model="r_val" value="female" name="sex"> </p> <!--多選框 v-model綁定的變量是一個列表，列表存放0到任意一個復選框的value--> <p> 足球：<input type="checkbox" v-model='c_val' name="h" value="s"> 籃球：<input type="checkbox" v-model="c_val" name="h" value="b"> 雙色球：<input type="checkbox" v-model="c_val" name="h" value="d"> </p> <button type="submit" >提交</button> </form> </div>
// js <script> new Vue({ el:'#app', data:{ val:'', r_val:'male', //默認值 默認選中男 c_val:[], } }) </script>
| 8 條件指令 |
v-show 根據條件展示元素的指令 v-show指令：閃爍一下是因為 v-show='s1'
但是s1條件為假 然后是以 display：none渲染
如果s1條件為真 就會真正的顯示在那
不同的是帶有v-show 的元素始終會被渲染並保留在DOM中。 v-show 只是加單切換元素的css屬性 display
v-if 指令用於條件性渲染一塊內容。這塊內容只會在指令的表達式返回truthy值的時候被渲染
<!--html--> <h1 v-if="awesome">Vue is awesome!</h1>
因為v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個<template> 元素當做不可見的包裹元素，並在上面使用 v-if 最終的渲染的結果將不包含<template>元素
<!--html--> <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
v-else-if 必須有條件 才也有條件v-if分支綁定
v-else 會默認與v-if等有條件的分支的綁定
<ul> <!--v-else會默認與v-if等有條件的分支綁定--> <!--v-else-if必須有條件才和有條件v-if分支綁定--> <li v-if="tag == 1">111</li> <li v-else-if="tag == 2">222</li> <li v-else>333</li> </ul> <ul> <li @click="action('a')">a</li> <li @click="action('b')">b</li> <li @click="action('c')">c</li> </ul> <ul> <li v-show="flag == 'a' ">aaa</li> <li v-show="flag == 'b' ">bbb</li> <li v-show="flag == 'c' ">ccc</li> </ul> </div>
<script> new Vue({ el: '#app', data: { num: 10, r1: false, r2: false, tag:2, flag:'' }, methods:{ action:function (args) { this.flag = args } } }) </script>
v-for 循環指令 可以遍歷數組 可以遍歷字典 索引可以做簡單的運算 不建議計算復雜的
<ul> <li v-for="num in nums">{{ num }}</li> <!--只遍歷值--> </ul> <ul> <li v-for="(num,index) in nums">{{ num }} {{ index }}</li> <hr> <li v-for="(num,index) in nums">{{ num }} {{ index +1 }}</li> <!--可以做簡單的運算 不建議計算復雜的--> </ul> <ul> <li v-for="(v,k,i) in people">{{ v }} {{ k }} {{ i }}</li> </ul>
<script>
new Vue({
el:'#app',
data:{
nums:[3,1,2,4,5,],
people:{
'name':'owen',
'age':19,
'gender':'male'
}
}
})
</script>
用key管理可復用性
Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換：
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address"> </template>
那么在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因為兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。
這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的 key 屬性即可：
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template>
注意，<label> 元素仍然會被高效地復用，因為它們沒有添加 key 屬性。