- 注意: 撰寫本文目的主要是為了給自己做一個備忘錄翔烁，如果你學過vue并且希望從本文中找到一些忘記的知識點诫隅，那么你可以閱讀本文章管闷。由于文章內(nèi)講解并不是很多拯刁，因此此文章并不適合小白入門使用。
8.生命周期
- 每個Vue實例創(chuàng)建時纵揍，都會經(jīng)歷一系列的初始化過程顿乒，同時也會調(diào)用相應的生命周期鉤子，我們可以利用這些鉤子泽谨，在合適的時機執(zhí)行我們的業(yè)務邏輯璧榄。
- 常用的鉤子:
create: 實例創(chuàng)建完成后調(diào)用特漩，此階段完成了數(shù)據(jù)的觀測等，但尚未掛載骨杂，$el還不可用涂身，需要初始化處理一些數(shù)據(jù)時會比較有用。
mounted: el掛載到實例上后調(diào)用搓蚪，一般我們的第一個業(yè)務邏輯會在這里開始访得。
beforeDestory: 實例銷毀之前。主要解綁一些使用addEventListener監(jiān)聽的事件
示例代碼:
<div id="test">
<button @click="killVM">killvm</button> <!--click的名稱不能含有destory陕凹？-->
<p v-show="isShow">王順順</p>
</div>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
isShow: true
},
mounted() { //初始化之后立即調(diào)用(1次)
this.intervalId = setInterval(() => { //如果用function的話,this就是指window
this.isShow = !this.isShow
console.log("---------");
}, 1000)
},
beforeDestroy() { //死亡時前調(diào)用一次
//清除定時器
clearInterval(this.intervalId)
},
methods: {
killVM() {
this.$destroy() //但是停止之后會有內(nèi)存泄漏，定時器仍然在執(zhí)行鳄炉，需要清除定時器
}
}
})
</script>
9.過濾器
- 過濾器主要用于數(shù)據(jù)的格式化杜耙，例如格式化日期。
前端頁面展示:
日期格式化
前端代碼:
<div id="test">
<h2>顯示格式化的日期時間</h2>
<p>{{date}}</p>
<p>完整版:{{date | dateString}}</p>
<p>日期:{{date | dateString('YYYY-MM-DD')}}</p>
<p>時間:{{date | dateString('HH:mm:ss')}}</p>
<!--此語句會將date的值傳輸給dateString過濾器處理-->
</div>
js代碼:
<script>
//自定義過濾器
Vue.filter('dateString', function (value, format) {
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
// Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
// return moment(value).format(format)
// })
new Vue({
el: '#test',
data: {
date: new Date()
}
})
</script>
10.指令
10.1.基礎(chǔ)使用
<!--css樣式-->
<style>
[v-cloak] {
display: none;
/*配合實現(xiàn) v-cloak*/
}
</style>
<!--前端頁面代碼-->
<div id="example">
<p ref="content">xztywss.top</p>
<button @click="hint">提示</button>
<!-- <p>{{msg}}</p> -->
<p v-cloak>{{msg}}</p> //v-cloak 防止閃現(xiàn) 需要配合css實現(xiàn)
</div>
<!--js代碼-->
<script>
new Vue({
el: '#example',
data: {
msg: "wss"
},
methods: {
hint() {
alert(this.$refs.content.textContent) //textContent = innerhtml
}
}
})
</script>
10.2.注冊指令
- 沒有太多需要解釋的拂盯，這里僅僅給出一段示例代碼佑女，想了解更多請百度搜索吧！
示例代碼:
<body>
<!-- 1) 注冊全局指令
Vue.directive('my-directive',function(el,binding){
el.innerHTML=binding.value.toupperCase()
})
2) 注冊局部指令
directives:{
'my-directive':{
bind(el,binding){
el.innerHTML=binding.value.toupperCase()
}
}
}
3) 使用指令 v-my-directive='xxx' -->
<div id="test1">
<p v-upper-text="msg1"></p>
<p v-lower-text="msg1"></p>
</div>
<div id="test2">
<p v-upper-text="msg2"></p>
<p v-lower-text="msg2"></p>
</div>
<script>
//定義全局指令
//el 指令屬性所在的標簽對象
//binding 包含指令相關(guān)信息數(shù)據(jù)的對象
Vue.directive('upper-text', function (el, binding) {
console.log(el, binding)
el.textContent = binding.value.toUpperCase()
})
new Vue({
el: '#test1',
data: {
msg1: 'NBA I Love This Game'
},
//局部指令
directives: {
// 'lower-text': function (el, binding) {
// el.textContent = binding.value.toLowerCase()
// }
'lower-text'(el, binding) {
el.textContent = binding.value.toLowerCase()
}
}
})
new Vue({
el: '#test2',
data: {
msg2: 'Just Do It谈竿！'
}
})
</script>
</body>
11.插件
- 合理地使用插件能使我們做項目的過程中達到事半功倍的效果团驱，此處給出一個簡單示例
簡單實例:
<body>
<div id="test">
<p v-my-directive="msg"></p>
</div>
<script type="text/javascript">
//聲明使用插件
Vue.use(MyPlugin) //內(nèi)部會執(zhí)行MyPlugin.install(Vue)
Vue.myGlobalMethod()
const vm = new Vue({
el: '#test',
data: {
msg: 'I Love You!'
}
})
vm.$myMethod();
</script>
</body>
文集推薦:
Java基礎(chǔ)方法集1
Python基礎(chǔ)知識完整版
Spring Boot學習筆記
Linux指令進階
Java高并發(fā)編程
SpringMVC基礎(chǔ)知識進階
Mysql基礎(chǔ)知識完整版
健康管理系統(tǒng)學習花絮(學習記錄)
Node.js基礎(chǔ)知識(隨手筆記)
MongoDB基礎(chǔ)知識
Dubbo學習筆記
Vue學習筆記(隨手筆記)
聲明：發(fā)表此文是出于傳遞更多信息之目的朽们。若有來源標注錯誤或侵犯了您的合法權(quán)益朦蕴，請作者持權(quán)屬證明與本我們(QQ:981086665腹躁；郵箱:981086665@qq.com)聯(lián)系聯(lián)系抑月，我們將及時更正蚊锹、刪除挖帘，謝謝亥宿。
