Vue入門（一）
阿新 • • 發佈：2021-01-12
文章目錄
VUE初體驗
v-cloak
- 防止頁面載入時出現閃爍問題
[v-cloak] { display: none;}
<div v-cloak>
{{ message }}
</div>
v-text
- v-text指令用於將資料填充到標籤中，作用於插值表示式類似，但是沒有閃動問題
- 如果資料中有HTML標籤會將html標籤一併輸出
- 注意：此處為單向繫結，資料物件上的值改變，插值會發生變化；但是當插值發生變化並不會影響資料物件的值
<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>
v-html
- 用法和v-text 相似 但是他可以將HTML片段填充到標籤中
- 可能有安全問題, 一般只在可信任內容上使用
v-html，永不用在使用者提交的內容上 - 它與v-text區別在於v-text輸出的是純文字，瀏覽器不會對其再進行html解析，但v-html會將其當html標籤解析後輸出。
<div v-html="html"></div>
v-pre
- 顯示原始資訊跳過編譯過程
- 跳過這個元素和它的子元素的編譯過程。
- 一些靜態的內容不需要編譯加這個指令可以加快渲染
<span v-pre>{{ this will not be compiled }}</span>
v-once
- 只渲染元素和元件一次。隨後的重新渲染，元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。
- v-once的應用場景：如果顯示的資訊後續不需要再修改，你們可以使用v-once，這樣可以提高效能。
雙向資料繫結 v-model
-
MVVM設計思想
-
當資料發生變化的時候，檢視也就發生變化
-
當檢視發生變化的時候，資料也會跟著同步變化
-
v-model是一個指令，限制在
<input>、<select>、<textarea>、components中使用
<div id="app">
<div>{{msg}}</div>
<div>
當輸入框中內容改變的時候， 頁面上的msg 會自動更新
<input type="text" v-model='msg'>
</div>
</div>
v-on
- 用來繫結事件的
- 形式如：v-on:click 縮寫為 @click;
<input type='button' v-on:click='num++'/>
- 簡寫形式
<input type='button' @click='num++'/>
- 事件函式呼叫方式
- 直接繫結函式名稱
<button v-on:click='say'>Hello</button>
- 呼叫函式
<button v-on:click='say()'>Say hi</button>
- 事件函式引數傳遞
- 普通引數和事件物件
<button v-on:click='say("hi",$event)'>Say hi</button>
- 如果事件直接繫結函式名稱，那麼預設會傳遞事件物件作為事件函式的第一個引數
- 如果事件繫結函式呼叫，那麼事件物件必須作為最後一個引數顯示傳遞，
並且事件物件的名稱必須是$event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div>
<button v-on:click='handle1'>點選1</button>
<button v-on:click='handle2(123, 456, $event)'>點選2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
</body>
</html>
事件修飾符
.stop阻止冒泡
<a v-on:click.stop="handle">跳轉</a>
.prevent阻止預設行為
<a v-on:click.prevent="handle">跳轉</a>
按鍵修飾符
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
- .enter 回車鍵
<input v-on:keyup.enter='submit'>
- .delete 刪除鍵
<input v-on:keyup.delete='handle'>
鍵修飾符，鍵程式碼
<input @keyup.13="onEnter">
自定義按鍵修飾符
- 獲取鍵程式碼
handle: function(event){
console.log(event.keyCode)
}
全域性 config.keyCodes 物件
Vue.config.keyCodes.f1 = 112
v-bind
屬性繫結
- v-bind 指令被用來響應地更新 HTML 屬性
- v-bind:href 可以縮寫為 :href
<img v-bind:src="imageSrc">
樣式繫結
class樣式處理
1.物件語法
<div v-bind:class="{ active: isActive }"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="{active: isActive,error: isError}">
測試樣式
</div>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isActive: true,
isError: true
},
methods: {
handle: function(){
// 控制isActive的值在true和false之間進行切換
this.isActive = !this.isActive;
this.isError = !this.isError;
}
}
});
</script>
</body>
</html>
2.陣列語法
<div v-bind:class="[activeClass, errorClass]"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class='[activeClass, errorClass]'>測試樣式</div>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
},
methods: {
handle: function(){
this.activeClass = '';
this.errorClass = '';
}
}
});
</script>
</body>
</html>
3.結合用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.active {
border: 1px solid red;
width: 100px;
height: 100px;
}
.error {
background-color: orange;
}
.test {
color: blue;
}
.base {
font-size: 28px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>測試樣式</div>
<div v-bind:class='arrClasses'></div>
<div v-bind:class='objClasses'></div>
<div class="base" v-bind:class='objClasses'></div>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
樣式繫結相關語法細節：
1、物件繫結和陣列繫結可以結合使用
2、class繫結的值可以簡化操作
3、預設的class如何處理？預設的class會保留
*/
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error',
isTest: true,
arrClasses: ['active','error'],
objClasses: {
active: true,
error: true
}
},
methods: {
handle: function(){
// this.isTest = false;
this.objClasses.error = false;
}
}
});
</script>
</body>
</html>
style樣式處理
1.物件語法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
2.陣列語法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
<div v-bind:style='objStyles'></div>
<div v-bind:style='[objStyles, overrideStyles]'></div>
<button v-on:click='handle'>切換</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
borderStyle: '1px solid blue',
widthStyle: '100px',
heightStyle: '200px',
objStyles: {
border: '1px solid green',
width: '200px',
height: '100px'
},
overrideStyles: {
border: '5px solid orange',
backgroundColor: 'blue'
}
},
methods: {
handle: function(){
this.heightStyle = '100px';
this.objStyles.width = '100px';
}
}
});
</script>
</body>
</html>
分支迴圈結構
v-if v-else-if v-else v-show
- v-show的原理：控制元素樣式是否顯示 display:none
- v-if控制元素是否渲染到頁面
- v-show控制元素是否顯示（已經渲染到了頁面）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<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 v-on:click='handle'>點選</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// v-show的原理：控制元素樣式是否顯示 display:none
var vm = new Vue({
el: '#app',
data: {
score: 10,
flag: false
},
methods: {
handle: function(){
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
v-for
- v-for遍歷陣列
<li v-for='item in list'>{{item}}</li>
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li> - key的作用：幫助Vue區分不同的元素，從而提高效能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div>水果列表</div>
<ul>
<li v-for='item in fruits'>{{item}}</li>
<li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
<li :key='item.id' v-for='(item, index) in myFruits'>
<span>{{item.ename}}</span>
<span>-----</span>
<span>{{item.cname}}</span>
</li>
</ul>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
/*
迴圈結構-遍歷陣列
*/
var vm = new Vue({
el: '#app',
data: {
fruits: ['apple', 'orange', 'banana'],
myFruits: [{
id: 1,
ename: 'apple',
cname: '蘋果'
},{
id: 2,
ename: 'orange',
cname: '橘子'
},{
id: 3,
ename: 'banana',
cname: '香蕉'
}]
}
});
</script>
</body>
</html>
- v-for遍歷物件
<div v-for='(value, key, index) in object'></div> - v-if和v-for結合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
// 使用原生js遍歷物件
var obj = {
uname: 'lisi',
age: 12,
gender: 'male'
}
for(var key in obj) {
console.log(key, obj[key])
}
var vm = new Vue({
el: '#app',
data: {
obj: {
uname: 'zhangsan',
age: 13,
gender: 'female'
}
}
});
</script>
</body>
</html>
綜合案例
<!DOCTYPE html>
<html lang="en">
<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
}
.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-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index)
in list'>{{item.title}}</li>
</ul>
<div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
<img :src="item.path">
</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
currentIndex: 0, // 選項卡當前的索引
list: [{
id: 1,
title: 'apple',
path: 'img/apple.png'
},{
id: 2,
title: 'orange',
path: 'img/orange.png'
},{
id: 3,
title: 'lemon',
path: 'img/lemon.png'
}]
},
methods: {
change: function(index){
this.currentIndex = index;
}
}
});
</script>
</body>
</html>