Vue
Vue14年發佈、16年2.0版本、
特點():易用、靈活、高效
是一套用於構建用戶界面的漸進式框架
vue使用基本步驟
<title>你好世界</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{1+2}}</div>
<div>{{msg+'-----'+1+2}}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
/*vue基本步驟
1、提供標籤用於填充數據
2、引入庫文件
3、使用vue語法做功能
4、把vue提供的庫文件填充到標籤中
*/
var vm= new Vue({
//el 元素掛載位置
//data數據模型(值是一個對象)
//{{}}叫插值表達式、填充數據、支持簡單計算
el:'#app',
data:{
msg:'hello Vue'
}
})
</script>
指令
本質就是自定義屬性- Vue中指令都是以
v-開頭
v-cloak
作用：防止頁面加載時出現閃爍問題
閃爍問題原因:vue語法編譯前、有短暫顯示原始插值表達式
原理：先隱藏替換好值後在顯示最終的值
<style type="text/css">
/*
1、通過屬性選擇器 選擇到 帶有屬性 v-cloak的標籤 讓他隱藏
*/
[v-cloak]{
/* 元素隱藏 */
display: none;
}
</style>
<body>
<div id="app">
<!-- 2、 讓帶有插值 語法的 添加 v-cloak 屬性
在 數據渲染完成之後，v-cloak 屬性會被自動去除，
v-cloak一旦移除也就是沒有這個屬性了 屬性選擇器就選擇不到該標籤
也就是對應的標籤會變爲可見
-->
<div v-cloak >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 裏面存儲的是數據
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
v-html、v-text、v-pre、v-once
v-text ---- 填充純文本、沒有閃動問題
v-html ---- 填充html片段、會解析標籤(存在安全問題、第三方數據不推薦同)
v-pre ---- 填充元素信息 不編譯
v-once ---- 只編譯一次
雙向數據綁定
雙向數據綁定
- 當數據發生變化的時候，視圖也就發生變化(數據改變頁面)
- 當視圖發生變化的時候，數據也會跟着同步變化(頁面影響數據)
v-model
v-model是一個指令，限制在 <input>、<select>、<textarea>、components中使用
v-model本質:
通過V-bind去綁定屬性值、
熱後通過input事件去處理值的變化
<div id='app'>
<div>{{msg}}</div>
<!-- v-model的本質：通過v-bind綁定屬性值、然後通知input事件去處理值的變化 -->
<input type="text" v-bind:value='msg' @input='handle'>
<input type="text" v-bind:value='msg' @input='msg=$event.target.value'>
<input type="text" v-model='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
/*v-model指令的本質*/
var vm = new Vue({
el: '#app',
data: {
msg: 'hello'
},
methods: {
handle: function (event) {
//輸入域中最新的數據覆蓋原來的數據
this.msg = event.target.value;
}
}
})
</script>
mvvm
m:模型:數據
v:視圖:元素
vm:視圖模型:控制邏輯
view 通過監聽器影響(Listeners) model
model 通過數據劫持(Object.definedProperty)改變 view
事件綁定v-on
- 用來綁定事件
- 形式如：v-on:click 縮寫爲 @click;
v-on事件函數中傳入參數
<!-- 1、如果事件直接綁定函數名稱，那麼默認會傳遞事件對象作爲事件函數的第一個參數 -->
例如: <button v-on:click='handle1'>點擊1</button>
(默認傳遞$event)
<!-- 2、函數調用的方式、**推薦使用**、 -->
<button v-on:click='handle2(123, 456, $event)'>點擊2</button>
(事件對象的名稱必須是$event、順序要與形參對應)
事件修飾符
Vue 不推薦我們操作DOM 、爲此Vue.js 爲 v-on 提供了事件修飾符
修飾符是由點開頭的指令後綴來表示的
<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯 即阻止冒泡也阻止默認事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
按鍵修飾符
Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符
<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -當點擊enter 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--當點擊enter或者space時 時調用 `vm.alertMe()` -->
<input type="text" v-on:keyup.enter.space="alertMe" >
常用的按鍵修飾符
.enter => enter鍵
.tab => tab鍵
.delete (捕獲“刪除”和“退格”按鍵) => 刪除鍵
.esc => 取消鍵
.space => 空格鍵
.up => 上
.down => 下
.left => 左
.right => 右
<script>
var vm = new Vue({
el:"#app",
methods: {
submit:function(){},
alertMe:function(){},
}
})
</script>
自定義按鍵修飾符別名
在Vue中可以通過config.keyCodes自定義按鍵修飾符別名
//創建自定義修飾符
Vue.config.keyCodes.hcj=13;
//使用自定義修飾符、監聽是否按下13對應的鍵
@keyup.hcj='handle($event)'
自定義按鍵修飾符名字是自己定義的、但是值必須是按鍵中對應的event.keyCode值
：v-bind（屬性綁定）
- v-bind 指令被用來響應地更新 HTML 屬性
- v-bind:href 可以縮寫爲 :href;
<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
v-bind:綁定對象
//:綁定對象方式
通過v-bind來綁定class屬性、值通過對象的方法控制類名是否顯示、
控制多個類名、添加多個鍵值對、用逗號隔開
//在頁面中的動態綁定對象
<div v-bind:class='obj'>測試樣式</div>
//在data中的給對象的屬性設置布爾值、用於控制顯示隱藏
obj:{ active: true, error:true,}
//在methods中控制isActive的值在true和false之間切換
this.obj.active= !this.obj.active
this.obj.error=!this.obj.error;
v-bind:綁定數組
<!-- 數組綁定樣式 -->
<div v-bind:class='[activeClass,errorClass]'>測試樣式</div>
與對象的區別
在方法中操作對應的值、移除數據中對應的值
數組值是實際類名、可以加多個屬性
//在數據中樣式綁定
data: {
activeClass:'active',
errorClass:'error'
},
//在方法中操作對應的值
methods:{
handle:function(){
this.activeClass='',
this.errorClass=''
}
}
推薦使用數據方式定義類、方便使用數組相關API
樣式綁定語法細節
1、對象綁定與數組綁定可以結合使用
<div v-bind:class='[activeClass,errorClass,{test:isTast}]'>測試樣式</div>
2、class的值可以簡化操作
//2.1數組簡化
<div v-bind:class='arrClasses'></div>
//data中
arrClasses: ['active', 'error'],
//2.2對象簡化
<div v-bind:class='objClasses'></div>
//data
objClasses: { active: true, error: true,}
3、基礎樣式不會被覆蓋
<div class="base" v-bind:class='objClasses'></div>
綁定對象和綁定數組 的區別
- 綁定對象的時候 對象的屬性 即要渲染的類名 對象的屬性值對應的是 data 中的數據
- 綁定數組的時候數組裏面存的是data 中的數據
綁定style
<div v-bind:style="styleObject">綁定樣式對象</div>'
<!-- CSS 屬性名可以用駝峯式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">內聯樣式</div>
<!--組語法可以將多個樣式對象應用到同一個元素、相同的樣式會被覆蓋 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>
<script>
new Vue({
el: '#app',
data: {
styleObject: {
color: 'green',
fontSize: '30px',
background:'red'
}，
activeColor: 'green',
fontSize: "30px"
},
styleObj1: {
color: 'red'
},
styleObj2: {
fontSize: '30px'
}
</script>
分支結構
v-if 使用場景
- 1- 多個元素 通過條件判斷展示或者隱藏某個元素。或者多個元素
- 2- 進行兩個視圖之間的切換
v-show:控制元素的樣式是否顯示：display:none
<div id="app">
<div v-if='score>=90'>優秀</div>
<div v-else-if='score<90&&score>=80'>良好</div>
<div v-else-if='score<80&&score>=60'>一般</div>
<div v-else>比較差的</div>
<div v-show='flag'>測試v-show</div>
<button @click='handle'>點擊</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
score:90,
flag:false
},
methods:{
handle:function(){
//取反
this.flag=!this.flag;
}
}
})
</script>
v-show 和 v-if的區別
- v-show本質就是標籤display設置爲none，控制隱藏
- v-show只編譯一次，後面其實就是控制css，而v-if不停的銷燬和創建，故v-show性能更好一點。
- v-if是動態的向DOM樹內添加或者刪除DOM元素
- v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷燬和重建內部的事件監聽和子組件
v-show :控制元素樣式(頻繁顯示隱藏時使用)
v-if :控制元素(渲染後變化比較少是用)
循環結構
遍歷數組
v-for：用於循環的數組裏面的值可以是對象，也可以是普通元素
<ul id="example-1">
<!-- 循環結構-遍歷數組
item 是我們自己定義的一個名字 代表數組裏面的每一項
items對應的是 data中的數組-->
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]，
}
})
</script>
- 不推薦同時使用 v-if 和 v-for
- 當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。
遍歷對象
<!-- 循環結構-遍歷對象
v 代表 對象的value
k 代表對象的 鍵
i 代表索引
--->
<div v-for='(v,k,i) in obj' v-if='v==13'>{{v + '---' + k + '---' + i}}</div>
<script>
new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]，
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
})
</script>
key 的作用
- 就是區別不同的元素、提高性能
- key來給每個節點做一個唯一標識
- key的作用主要是爲了高效的更新虛擬DOM
<ul>
<li v-for="item in items" :key="item.id">...</li>
</ul>
選項卡案例
1、在data中定義數據
2、在頁面中遍歷對應數據
3、 通過點擊事件接收當前遍歷項的索引號、
4、在data中創建一個變量用於接收準備接收index的值、
5、在事件中把index的值賦值給變量this.current=index
6、 在動態綁定的樣式中的判斷：如果接收的變量的值current===index的值就添加樣式
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.tab ul {
overflow: hidden;
padding: 0;
margin: 0;
}
.tab ul li {
box-sizing: border-box;
padding: 0;
float: left;
width: 100px;
height: 45px;
line-height: 45px;
list-style: none;
text-align: center;
border-top: 1px solid blue;
border-right: 1px solid blue;
cursor: pointer;
}
.tab ul li:first-child {
border-left: 1px solid blue;
}
.tab ul li.active {
background-color: orange;
}
.tab div {
width: 500px;
height: 300px;
display: none;
text-align: center;
font-size: 30px;
line-height: 300px;
border: 1px solid blue;
border-top: 0px;
}
.tab div.current {
display: block;
}
</style>
</head>
<body>
<div id="app">
<div class="tab">
<ul>
<!--遍歷水果相關的數據 -->
<li v-for='(item,index) in fruits' :class='allIndex===index?"active":""' @click='hendle(index)'>
{{item.name}}</li>
</ul>
<!-- 遍歷水果對應的圖片、、判斷 如果當前點擊的值的索引===接收的索引號的話就添加樣式 -->
<div v-for='(item,index) in fruits' :class='allIndex===index?"current":""' :key='index'>
<img :src='item.img'>
</div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
//定義一個變量、用於接收當前項的index值
allIndex: 0,
//定義水果相關的數據
fruits: [
{ name: 'apple', img: 'img/apple.png' },
{ name: 'orange', img: 'img/orange.png' },
{ name: 'lemon', img: 'img/lemon.png' }],
},
methods: {
hendle(index) {
//點擊後接收index的值
this.allIndex = index;
}
}
})
</script>