- Demo1——vue對象、v-cloak、v-text、v-html、v-bind、v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
[v-cloak] {
display: none !important;/*加!important是爲了避免被其他高優先級屬性覆蓋*/
}
</style>
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<!-- 使用v-vloak命令解決刷新時暴露vue代碼的問題，需要額外定義css樣式但可以結合標籤內容 -->
<p v-cloak>{{ msg }}</p>
<!-- 使用v-text命令解決刷新時暴露vue代碼的問題，不需要額外定義css樣式但會覆蓋標籤內容 -->
<p v-text="msg"></p>
<p>{{ msg2 }}</p>
<p v-html="msg2"></p>
<!-- v-bind命令用於綁定自定義屬性，且可以寫合法的js表達式 -->
<input v-bind:placeholder="mytitle + '？'" type="text">
<!-- v-bind:可簡寫爲: -->
<input :placeholder="mytitle + '？'" type="text">
<!-- v-on命令用於綁定自定義事件，且可以寫合法的js表達式 -->
<button v-on:click="show"></button>
<!-- v-on:可簡寫爲@ -->
<button @click="show"></button>
<button @click="msg='歡迎學習微優異'"></button>
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
msg: '歡迎學習Vue',
msg2: '<p>奧利給</p>',
mytitle: '你瞅啥'
},
methods:{
show() {
alert('瞅你咋地');
}
}
})
</script>
</body>
</html>
- Demo2：實現滾動字幕——定時器、this、箭頭函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<button @click="start">開始</button>
<button @click="pause">暫停</button>
<p>{{ msg }}</p>
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
msg: '我們遇到什麼困難，也不要怕!',
intervalId: null
},
methods:{
start() {
if (this.intervalId != null) return
this.intervalId = setInterval( () => {
var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start
}, 100)
},
pause() {
clearInterval(this.intervalId)
this.intervalId = null
}
}
})
</script>
</body>
</html>
- Demo3：事件修飾符——stop、self、capture、prevent、once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<style>
.lz{background-color: #f00;width: 300px;height: 180px;}
.lyl{background-color: #0f0;height: 100px;}
.twlz{background-color: #ff0;height: 50px;}
</style>
</head>
<body>
<div id="app">
<!-- .stop表示阻止所有事件的冒泡 -->
<div class="lz" @click="dxstop">大雄
<div class="lyl" @click="jxstop">靜香
<div class="twlz" @click.stop="phstop">胖虎</div>
</div>
</div>
<br>
<!-- .self表示阻止自身事件的冒泡 -->
<div class="lz" @click="dxself">大雄
<div class="lyl" @click.self="jxself">靜香
<div class="twlz" @click="phself">胖虎</div>
</div>
</div>
<br>
<!-- .capture表示由外向內捕獲事件 -->
<div class="lz" @click.capture="lzcapture">旅長
<div class="lyl" @click="lylcapture">李雲龍</div>
</div>
<!-- .prevent表示阻止默認事件 -->
<a href="www.jnpgc.com" @click.prevent="prevent">江南皮革廠官網</a>
<!-- .once表示只觸發一次事件 -->
<p @click.once="once">自宮指南</p>
<!-- .once和.prevent連用（不分順序先後）表示只阻止一次默認事件 -->
<a href="http://www.baidu.com" @click.once.prevent="onceprevent">葵花寶典</a>
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
},
methods:{
prevent() { console.log('本廠已倒閉，產品全白送') },
once() { console.log('自宮成功，不可再宮') },
onceprevent() { console.log('自宮成功，不可再宮，趁熱打鐵，練就神功') },
lzcapture() { console.log('李雲龍！') },
lylcapture() { console.log('喲，旅長') },
phstop() { console.log('我倒看看是誰不給我胖虎面子') },
jxstop() { console.log('...') },
dxstop() { console.log('...') },
phself() { console.log('我倒看看是誰不給我胖虎面子') },
jxself() { console.log('...') },
dxself() { console.log('我大雄不出手，你胖虎要上天不成') }
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<!-- v-bind只能實現數據從m到v的單向綁定，無法實現雙向綁定 -->
<input placeholder="" :value="msg" type="text" style="width: 100%;">
<!-- v-model可以實現表單元素和Model中數據的雙向綁定 -->
<!-- v-model只能運用在表單元素中 -->
<input placeholder="" v-model="msg" type="text" style="width: 100%;">
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
msg: "boy♂next♂door"
},
methods:{
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<button @click="calc">=</button>
<input type="text" v-model="result">
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
n1: 0,
opt: '+',
n2: 0,
result: 0
},
methods:{
calc() {
switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break
}
}
}
})
</script>
</body>
</html>
- Demo6：綁定樣式——css類樣式、style行內樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<style>
.red{color: red;}
.thin{font-weight: 200;}
.italic{font-style: italic;}
.active{letter-spacing: 0.5em;}
</style>
</head>
<body>
<div id="app">
<h1 :class="['red', 'thin']">使用v-bind綁定class屬性，給class傳遞一個數組</h1>
<h1 :class="['italic', 'thin', flag?'active':'']">在數組中使用三元表達式</h1>
<h1 :class="['italic', 'thin', {'active': flag}]">在數組中使用對象來代替三元表達式，提高代碼的可讀性</h1>
<h1 :class="classObj">給class屬性傳遞一個對象</h1>
<h1 :style="{ color: 'green', 'font-weight': 2000 }">直接在style屬性中書寫樣式</h1>
<h1 :style="styleObj1">給style屬性傳遞一個對象</h1>
<h1 :style="[styleObj1, styleObj2]">給style屬性傳遞一個數組</h1>
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: false, italic: true, active: false },
styleObj1: { color: 'blue', 'font-weight': 2000 },
styleObj2: { 'font-style': 'italic' }
},
methods: {
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<span v-for="item in list1">{{ item }} </span>
<p v-for="(item, i) in list1">索引值爲{{ i }}的元素值爲{{ item }}</p>
<p v-for="user in list2">{{ user.id }}，字{{ user.name }}</p>
<p v-for="(user, i) in list2">{{ i+1 }}號選手{{ user.id }}，字{{ user.name }}</p>
<p v-for="(val, key, i) in daren">{{ i }} {{ key }}： {{ val }}</p>
<p v-for="count in 10">第{{ count }}次循環（從1開始迭代）</p>
<div>
<label>ID：
<input type="text" v-model="id">
</label>
<label>Name：
<input type="text" v-model="name">
</label>
<button @click="add">添加</button>
</div>
<!-- 當使用v-for出現問題時，必須爲迭代的元素指定唯一的key屬性，key只能是數字或字符串 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">
{{ item.name }}
</p>
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{ id: 1, name: '劉能' },
{ id: 2, name: '趙四' },
{ id: 3, name: '廣坤' },
{ id: 4, name: '玉田' }
],
list1: [1, 2, 3, 4, 5, 6],
list2: [
{ id: '趙雲', name: '子龍' },
{ id: '關羽', name: '雲長' },
{ id: '周瑜', name: '公瑾' }
],
daren: {
id: "同鳳格鸞臺平章事",
level: "當朝宰輔",
name: "內史狄仁傑"
}
},
methods: {
add() {
this.list.unshift({id: this.id, name: this.name})
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<button @click="toggle">toggle</button>
<h3 v-if="flag">v-if每次都重新刪除或創建元素，有較高的切換性能消耗，如果元素涉及到頻繁的切換，最好不要使用v-if，用v-show</h3>
<h3 v-show="flag">v-show每次不會重新進行DOM的刪除創建操作，只是改變了元素的display屬性，有較高的初始渲染消耗，如果元素可能永遠也不會顯示出來被用戶看到，最好不要使用v-show，用v-if</h3>
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
})
</script>
</body>
</html>
