Vue的生命周期
图示
主要钩子函数
-
beforeCreate
-
created
-
beforeMount
-
mounted
-
beforeUpdate
-
updated
-
beforeDestroy
-
destroyed
钩子函数代码示例
执行顺序及什么时候执行，可直接复制使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue生命周期示例</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '学习前端的菜鸟'
},
beforeCreate: function() {
console.group('------beforeCreate创建前状态------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created创建完毕状态------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount挂载前状态------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted 挂载结束状态------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>
1. 打开浏览器控制台，我们可以看到
beforeCreate：$el和data均未初始化
created： 完成了data的初始化，$el没有
beforeMount： 完成了对$el和data的初始化
mounted： 完成了对$el和data的挂载
2. 在浏览器控制台输入
vm.message = '我要更新组件'
我们能看到data里面的值被修改后，会触发update
3. 在浏览器控制台输入
vm.$destroy()
执行完destroy，后续的操作就不再受Vue控制了
总结
beforeCreate： loading
created： request
beforeDestory： delete？
destoryed： clear data
实现双向绑定
<body>
<input type="text" id="mvvm">
<p id="show-mvvm"></p>
<script type="text/javascript">
var mvvm = document.getElementById('mvvm')
var showMvvm = document.getElementById('show-mvvm')
var obj = {}
mvvm.addEventListener('keyup', function(e) {
obj.val = e.target.value
})
Object.defineProperty(obj, 'val', {
get: function() {
return obj
},
set: function(newVal) {
mvvm.value = newVal
showMvvm.innerHTML = newVal
}
})
</script>
</body>
使用vue-i18n实现国际化
1. 安装：
npm install vue-i18n
2. 在“vue-i18n.js”引入并配置国际化：
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const messages = {
zh: {
home: '主页'
},
en: {
home: 'Home Page'
}
}
let lang = 'zh'
export default new VueI18n({
locale: lang,
messages
})
3. 在“main.js”将i18n挂载到vue的根实例上：
import i18n from './plugins/vue-i18n'
new Vue({
i18n,
render: h=>h(app)
}).mount('#app')
4. 在模板中使用
<template>
<p>{{ $t('home') }}</p>
</template>
5. 切换语言
this.$i18n.locale = 'en'
Vue读取Markdown文件
1. 安装依赖
npm i html-loader markdown-loader --save-dev
2. 在vue.config.js配置
module.exports = {
chainWebpack: config => {
config.module
.rule('md')
.test(/\.md$/)
.use('html-loader')
.loader('html-loader')
.end()
.use('markdown-loader')
.loader('markdown-loader')
.end()
}
}
3. 使用
<template>
<div class="markdown">
<div v-html="markdown"></div> </div>
</template>
<script>
import markdown from "../../assets/markdown.md";
export default {
data() {
return {
markdown }
}
}
</script>
<style lang="less" scoped>
// 这里可以约束解析出来后的 markdown 标签样式，如设置 h3{...}
</style>
Vue 开发插件
Vue.js 的插件有一个公开方法 install，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。
Dialog.vue
<template>
<div class="help-dialog">
<v-dialog v-model="dialog" width="500">
<v-card>
<v-card-title class="headline lighten-2" primary-title>{{ title }}</v-card-title>
<v-card-text>{{ content }}</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat color="primary">{{ activatorTxt }}</v-btn>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
name: 'HelpDialog',
data () {
return {
dialog: false,
title: 'Tips',
content: 'Here is the content.',
activatorTxt: 'confirm'
}
}
}
</script>
index.js
import HelpDialogComponent from './HelpDialog'
const HelpDialog = {
install(Vue) {
const HelpDialogConstructor = Vue.extend(HelpDialogComponent)
const instance = new HelpDialogConstructor()
instance.$mount(document.createElement('div'))
document.body.append(instance.$el)
Vue.prototype.$helpDialog = function(params = {
title: 'Tips',
content: 'Here is the content.'
}) {
instance.dialog = true
instance.title = params.title
instance.content = params.content
instance.activatorTxt = '确认'
}
}
}
export default HelpDialog
main.js
import Vue from 'vue'
import HelpDialog from '@/components/index'Vue.use(HelpDialog)
usage
Vue.prototype.$helpDialog({
title: 'Tips',
content: 'Here is the content.'
})
