vue
一严蓖、認識Vue
定義：一個構建數(shù)據驅動的 web 界面的漸進式框架
優(yōu)點：
1车遂、可以完全通過客戶端瀏覽器渲染頁面京办，服務器端只提供數(shù)據
2、方便構建單頁面應用程序（SPA）
二而昨、引入Vue
<div id="app">
<p title="p"></p>
<p v-bind:title='title'></p>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: 'vue-p'
}
})
</script>
三救氯、Vue實例
- 實例：el
<div id='app'>
</div>
<script>
new Vue({
el: '#app'
})
</script>
- 數(shù)據：data
<div id='app'>
<p v-text='msg1'></p>
<p>{{ msg2 }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg1: '段落1',
msg2: '段落2'
}
})
</script>
- 方法：methods
<div id='app'>
<p v-on:click='func'>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '段落'
},
methods: {
func: function() {
alert(this.msg)
}
}
})
</script>
- 計算屬性：computed
<div id='app'>
<div>
姓：<input type='text' v-model='first_name'>
</div>
<div>
名：<input type='text' v-model='last_name'>
</div>
<div>
全名：<input type='text' v-model='full_name'>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
first_name: '',
last_name: ''
},
computed: {
full_name: function() {
return this.first_name + this.last_name
}
}
})
</script>
- 監(jiān)聽器：watch
<div id='app'>
<div>
姓名：<input type='text' v-model='full_name'>
</div>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: ''
},
watch: {
full_name: function() {
this.first_name = this.full_name.split(' ')[0];
this.last_name = this.full_name.split(' ')[1];
}
}
})
</script>
- 分隔符：delimiters
<div id='app'>
${ msg }
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>
- 實例對象使用成員屬性與方法
<script>
var app = new Vue({
el: '#app',
data: {
msg: 'message'
}
})
console.log(app)
console.log(app.$el)
console.log(app.$data.msg)
console.log(app.msg)
</script>
四、實例生命周期鉤子
- 定義
每個 Vue 實例在被創(chuàng)建時都要經過一系列的初始化過程——例如配紫，需要設置數(shù)據監(jiān)聽、編譯模板午阵、將實例掛載到 DOM 并在數(shù)據變化時更新 DOM 等躺孝。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會底桂。
- 鉤子方法
beforeCreate：在實例初始化之后植袍，數(shù)據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
created：在實例創(chuàng)建完成后被立即調用籽懦。在這一步于个，實例已完成以下的配置：數(shù)據觀測 (data observer)，屬性和方法的運算暮顺，watch/event 事件回調厅篓。然而，掛載階段還沒開始捶码，$el 屬性目前不可見羽氮。
beforeMount：在掛載開始之前被調用：相關的 render 函數(shù)首次被調用。
mounted：el被新創(chuàng)建的vm.$el替換惫恼，并掛載到實例上去之后調用該鉤子档押。
beforeUpdate：數(shù)據更新時調用，發(fā)生在虛擬 DOM 打補丁之前祈纯。
updated：數(shù)據更新時調用令宿，發(fā)生在虛擬 DOM 打補丁之前。
activated：keep-alive 組件激活時調用腕窥。
deactivated：keep-alive 組件停用時調用粒没。
beforeDestroy：實例銷毀之前調用。在這一步簇爆，實例仍然完全可用革娄。
destroyed：Vue實例銷毀后調用。調用后冕碟，Vue實例指示的所有東西都會解綁定拦惋，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀安寺。
errorCaptured：2.5.0+ 新增厕妖，當捕獲一個來自子孫組件的錯誤時被調用。此鉤子會收到三個參數(shù)：錯誤對象挑庶、發(fā)生錯誤的組件實例以及一個包含錯誤來源信息的字符串言秸。此鉤子可以返回 false 以阻止該錯誤繼續(xù)向上傳播软能。
- 重點鉤子
created：實例完全創(chuàng)建完畢(屬性與方法都準備就緒)【倩可以進行數(shù)據操作(請求后臺數(shù)據查排，重新渲染最新數(shù)據)
mounted：虛擬DOM構建完畢，并完成實例的el掛載抄沮“虾耍可以重新操作頁面DOM
五、視圖常規(guī)操作
- v-text：文本變量
<p v-text='msg'></p>
<p>{{ msg }}</p>
- v-once：一次性文本賦值
<p v-once>{{ msg }}</p>
- v-html：html文本變量
<p v-html='msg'></p>
<script>
new Vue({
el: '#app',
data: {
msg: '<b>文本</b>'
}
})
</script>
- v-bind：屬性綁定
<div id="app">
<img v-bind:src='imgSrc' />
<!-- 簡寫 -->
<img :src='imgSrc' />
</div>
<script>
new Vue({
el: '#app',
data: {
imgSrc: 'https://www.baidu.com/favicon.ico'
}
})
</script>
- v-model：雙向數(shù)據綁定
<div id="app">
<input type="text" v-model='msg'>
<p>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
- v-cloak：避免頁面加載閃爍
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
</div>
- 視圖自身運算
<div id="app" v-cloak>
<p>{{ 1 + 1 }}</p>
<p>{{ [1, 2, 3].join('@') }}</p>
</div>
六叛买、條件渲染
- v-if：值true會被渲染砂代，值false不會被渲染
<div id="app">
<div v-if='isShow'>div div div</div>
<button @click='isShow = !isShow'>改變</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
- v-else：與v-if結合使用形成對立面
<div id="app">
<div v-if='isShow'>div div div</div>
<div v-else='isShow'>DIV DIV DIV</div>
<button @click='isShow = !isShow'>改變</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
- v-else-if：變量的多情況值判斷
<div id="app">
<div v-if='tag == 0'>if if if</div>
<div v-else-if='tag == 1'>else if else</div>
<div v-else='tag == 2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
- template：不被渲染的vue結構標簽
<template v-if="isShow">
<p>用template嵌套</p>
<p>可以為多行文本</p>
<p>同時顯隱</p>
<p>且template標簽不會被vue渲染到頁面</p>
</template>
- v-show：一定會被渲染到頁面，以display屬性控制顯隱
- key：為v-if方式的顯隱創(chuàng)建緩存率挣，提高效率
<div id="app">
<div v-if='tag == 0' key='0'>if if if</div>
<div v-else-if='tag == 1' key='1'>else if else</div>
<div v-else='tag == 2' key='2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
七刻伊、列表渲染
- v-for：循環(huán)渲染列表
<div id="app">
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
<button @click='click'>改變</button>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['張三', '李四', '王五']
}，
methods: {
click: function () {
this.items.splice(1, 1, '李大大');
this.items.pop();
this.items.push('趙六')
}
}
})
</script>
- 遍歷數(shù)組
// items: ['張三', '李四', '王五']
// 值
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
// 值, 索引
<ul>
<li v-for='(item, index) in items'>{{ index }} - {{ item }}</li>
</ul>
- 遍歷對象
// {'name': '張三', 'age': 18, 'sex': '男'}
// 值
<div v-for="value in object">
{{ value }}
</div>
// 值, 鍵
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
// 值, 鍵, 索引
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
- 復雜數(shù)據渲染
// items: [{'name': '張三'}, {'age': 18}, {'sex': '男'}]
<div>
<div>{{ items[0].name }}</div>
<div>{{ items[1].age }}</div>
<div>{{ items[2].sex }}</div>
</div>
