Vue生命周期示例详解
作者：浅白
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了Vue生命周期的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
首先看看Vue文档里关于实例生命周期的解释图
那么下面我们来进行测试一下
§ion id="app-8"&
&/section&
var myVue=new Vue({
el:"#app-8",
data:"aaaaa",
info:"nono"
beforeCreate:function(){
console.log("创建前========")
console.log(this.data)
console.log(this.$el)
created:function(){
console.log("已创建========")
console.log(this.$el)
beforeMount:function(){
console.log("mount之前========")
console.log(this.$el)
mounted:function(){
console.log("mounted========")
console.log(this.$el)
beforeUpdate:function(){
console.log("更新前========");
updated:function(){
console.log("更新完成========");
beforeDestroy:function(){
console.log("销毁前========")
console.log(this.$el)
destroyed:function(){
console.log("已销毁========")
console.log(this.$el)
代码如上，浏览器开始加载文件
由上图可知：
1、beforeCreate 此时$el、data 的值都为undefined
2、创建之后，此时可以拿到data的值，但是$el依旧为undefined
3、mount之前，$el的值为“虚拟”的元素节点
4、mount之后，mounted之前，“虚拟”的dom节点被真实的dom节点替换，并将其插入到dom树中，于是在触发mounted时，可以获取到$el为真实的dom元素()
myVue.$el===document.getElementById("app-8") // true
接着，在console中修改data，更新视图
触发beforeUpdata 和updated
接着，执行myVue.$destroy()
总结一下，对官方文档的那张图简化一下，就得到了这张图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具当前位置： >
vuejs2.0与1.x版本中怎样使用js实时访问input的值的变化
来源：CNBLOGS & 发布时间：
& 作者：网友 &
浏览次数：
摘要: vuejs 2.0中js实时监听input 在2.0的版本中，vuejs把v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调...
在2.0的版本中，vuejs把v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。这意味着 v-el:my-element 将写成这样： ref="myElement"， v-ref:my-component 变成了这样： ref="myComponent"。绑定在一般元素上时，ref 指DOM元素，绑定在组件上时，ref 为一组件实例。
因为 v-ref 不再是一个指令了而是一个特殊的属性，它也可以被动态定义了。这样在和v-for 结合的时候是很有用的：
&p v-for="item in items" v-bind:ref="'item' + item.id"&&/p&
以前 v-el/v-ref 和 v-for 一起使用将产生一个DOM数组或者组件数组，因为没法给每个元素一个特定名字。现在你还仍然可以这样做，给每个元素一个同样的ref：
&p v-for="item in items" ref="items"&&/p&
和 1.x 中不同， $refs 不是响应的，因为它们在渲染过程中注册/更新。只有监听变化并重复渲染才能使它们响应。另一方面，设计$refs主要是提供给 js 程序访问的，并不建议在模板中过度依赖使用它。因为这意味着在实例之外去访问实例状态，违背了 Vue 数据驱动的思想。
下面给一个vuejs2.0版本的例子：
&div id="example"&
&input type="text" v-model="items.type1" ref="type1"/&
&input type="text" v-model="items.type2" ref="type2"/&
&div class="show"&输入框一的内容：{{items.type1}}&/div&
&div class="show"&输入框二的内容：{{items.type2}}&/div&
var example1 = new Vue({
el: '#example',
type1:'第一个输入框',
type2:'第二个输入框'
ready:function(){
handler:function(val,oldval){
console.log(this.$refs.type1.value);
console.log(this.$refs.type2.value);
结果如图所示：
当在输入框输入文字的时候，js可以实时监听其指定输入框文本的值。
那么在vuejs 1.x的版本中是如何在js中监听某个指定的input的value变化的呢？通过如下方式：
&input type="text" v-model="items.type1" v-el:texttype1/&
然后在vuejs中的watch中监听：
handler:function(val,oldval){
console.log(this.$els.texttype1.value);
整体代码：
&div id="example"&
&input type="text" v-model="items.type1" v-el:texttype1/&
&input type="text" v-model="items.type2" v-el:texttype2/&
&div class="show"&输入框一的内容：{{items.type1}}&/div&
&div class="show"&输入框二的内容：{{items.type2}}&/div&
var example1 = new Vue({
el: '#example',
type1:'第一个输入框',
type2:'第二个输入框'
ready:function(){
handler:function(val,oldval){
console.log(this.$els.texttype1.value);
实现的效果如图所示：
当在输入框中输入文字时，js中实时监听其变化的值。
上一篇：没有了
我来说两句
友情链接：这个vue组件的数据该放在哪里？
这个vue组件的数据该放在哪里？
我把这个vue组件（/sagalbot/vue-select/tree/master/src）的Select.vue和advanced.js拿出来放到一个文件中，想不用打包运行一下，advanced.js：/sagalbot/vue-select/tree/master/src/countries
Select.vue：/sagalbot/vue-select/tree/master/src/components
不知道advanced.js的内容应该放到那里才能运行，请大神帮看看：
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&
&meta http-equiv="x-ua-compatible" content="ie=edge"&
&link href="///bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"&
&link href="///tether/1.3.2/css/tether.min.css" rel="stylesheet"&
&link href="///font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type='text/css'&
.v-select.dropdown {
.v-select .open-indicator {
display: inline-
pointer-events:
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
.v-select .open-indicator:before {
border-color: rgba(60, 60, 60, .5);
border-style:
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-
height: 10
vertical-align:
transform: rotate(133deg);
transition: all 150ms cubic-bezier(1.000, -0.115, 0.975, 0.855);
transition-timing-function: cubic-bezier(1.000, -0.115, 0.975, 0.855);
.v-select.open .open-indicator {
.v-select.open .open-indicator:before {
transform: rotate(315deg);
.v-select .dropdown-toggle {
padding: 0;
background:
border: 1px solid rgba(60, 60, 60, .26);
border-radius: 4
white-space:
.v-select.searchable .dropdown-toggle {
.v-select.open .dropdown-toggle {
border-bottom:
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.v-select & .dropdown-menu {
margin: 0;
width: 100%;
overflow-y:
border-top:
border-top-left-radius: 0;
border-top-right-radius: 0;
.v-select .selected-tag {
color: #333;
background-color: #f0f0f0;
border: 1px solid #
border-radius: 4
height: 26
margin: 4px 1px 0px 3
padding: 0 0.25
line-height: 1.7
.v-select .selected-tag .close {
margin-right: 0;
font-size: 20
.v-select input[type=search],
.v-select input[type=search]:focus {
display: inline-
margin: 0;
padding: 0 .5
max-width: 100%;
background:
box-shadow:
.v-select input[type=search]:disabled {
.v-select li a {
.v-select .active a {
background: rgba(50, 50, 50, .1);
color: #333;
.v-select .highlight a,
.v-select li:hover & a {
background: #f0f0f0;
color: #333;
&div class="container"&
&div id="app"&
&p&...&/p&
&p&...&/p&
&p&...&/p&
&p&...&/p&
&selector&&/selector&
&template id="selector-template"&
&div class="dropdown v-select" :class="dropdownClasses"&
&div v-el:toggle @mousedown.prevent="toggleDropdown" class="dropdown-toggle clearfix" type="button"&
&span class="form-control" v-if="!searchable && isValueEmpty"&
{{ placeholder }}
&span class="selected-tag" v-for="option in valueAsArray"&
{{ getOptionLabel(option) }}
&button v-if="multiple" @click="select(option)" type="button" class="close"&
&span aria-hidden="true"&&&/span&
v-el:search
v-show="searchable"
v-model="search"
@keyup.delete="maybeDeleteValue"
@keyup.esc="onEscape"
@keyup.up.prevent="typeAheadUp"
@keyup.down.prevent="typeAheadDown"
@keyup.enter.prevent="typeAheadSelect"
@blur="open = false"
@focus="open = true"
type="search"
class="form-control"
:placeholder="searchPlaceholder"
:style="{ width: isValueEmpty ? '100%' : 'auto' }"
&i v-el:open-indicator role="presentation" class="open-indicator"&&/i&
&ul v-show="open" v-el:dropdown-menu :transition="transition" :style="{ 'max-height': maxHeight }"
class="dropdown-menu animated"&
&li v-for="option in filteredOptions"
:class="{ active: isOptionSelected(option), highlight: $index === typeAheadPointer }"
@mouseover="typeAheadPointer = $index"&
&a @mousedown.prevent="select(option)"&
{{ getOptionLabel(option) }}
&li transition="fade" v-if="!filteredOptions.length" class="divider"&&/li&
&li transition="fade" v-if="!filteredOptions.length" class="text-center"&Sorry, no matching options.
&/template&
&script src="///jquery/2.2.3/jquery.min.js"&&/script&
&script src="///tether/1.3.2/js/tether.min.js"&&/script&
&script src="///bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"&&/script&
&script src="///vue/1.0.24/vue.min.js"&&/script&
ponent('selector', {
template: '#selector-template',
default: null
options: {
type: Array,
default() {
maxHeight: {
type: String,
default: '400px'
searchable: {
type: Boolean,
default: true
multiple: {
type: Boolean,
default: false
placeholder: {
type: String,
default: ''
transition: {
type: String,
default: 'expand'
clearSearchOnSelect: {
type: Boolean,
default: true
type: String,
default: 'label'
onChange: Function
search: '',
open: false,
typeAheadPointer: -1
value(val, old) {
this.onChange && val !== old ? this.onChange(val) : null
options() {
this.$set('value', this.multiple ? [] : null)
multiple(val) {
this.$set('value', val ? [] : null)
filteredOptions() {
this.typeAheadPointer = 0;
methods: {
select(option) {
if (!this.isOptionSelected(option)) {
if (this.multiple) {
if (!this.value) {
this.$set('value', [option])
this.value.push(option)
this.value = option
if (this.multiple) {
this.value.$remove(option)
this.onAfterSelect(option)
onAfterSelect(option) {
if (!this.multiple) {
this.open = !this.
this.$els.search.blur()
if (this.clearSearchOnSelect) {
this.search = ''
// if( this.onChange ) {
this.onChange(this.$get('value'))
toggleDropdown(e) {
if (e.target === this.$els.openIndicator || e.target === this.$els.search || e.target === this.$els.toggle || e.target === this.$el) {
if (this.open) {
this.$els.search.blur(); // dropdown will close on blur
this.open =
this.$els.search.focus()
isOptionSelected(option) {
if (this.multiple && this.value) {
return this.value.indexOf(option) !== -1
return this.value ===
getOptionValue(option) {
if (typeof option === 'object' && option.value) {
return option.
getOptionLabel(option) {
if (typeof option === 'object') {
if (this.label && option[this.label]) {
return option[this.label];
} else if (option.label) {
return option.label
typeAheadUp() {
if (this.typeAheadPointer & 0) this.typeAheadPointer--
typeAheadDown() {
if (this.typeAheadPointer & this.filteredOptions.length - 1) this.typeAheadPointer++
typeAheadSelect() {
if (this.filteredOptions[this.typeAheadPointer]) {
this.select(this.filteredOptions[this.typeAheadPointer]);
if (this.clearSearchOnSelect) {
this.search = "";
onEscape() {
if (!this.search.length) {
this.$els.search.blur()
this.$set('search', '')
maybeDeleteValue() {
if (!this.$els.search.value.length && this.value) {
return this.multiple ? this.value.pop() : this.$set('value', null)
computed: {
dropdownClasses() {
open: this.open,
searchable: this.searchable
searchPlaceholder() {
if (this.isValueEmpty && this.placeholder) {
return this.
filteredOptions() {
return this.$options.filters.filterBy(this.options, this.search)
isValueEmpty() {
if (this.value) {
if (typeof this.value === 'object') {
return !Object.keys(this.value).length
return !this.value.length
valueAsArray() {
if (this.multiple) {
return this.value
} else if (this.value) {
return [this.value]
//下面是advanced.js里面的内容，不知道放到什么地方，请大神帮忙看看。
module.exports = [
{value: "AF", label: "Afghanistan"},
{value: "AX", label: "?land Islands"},
{value: "AL", label: "Albania"},
{value: "DZ", label: "Algeria"},
{value: "AS", label: "American Samoa"},
{value: "AD", label: "Andorra"},
{value: "AO", label: "Angola"},
{value: "AI", label: "Anguilla"},
{value: "AQ", label: "Antarctica"},
{value: "AG", label: "Antigua and Barbuda"},
{value: "AR", label: "Argentina"},
{value: "AM", label: "Armenia"},
{value: "AW", label: "Aruba"},
{value: "AU", label: "Australia"},
{value: "AT", label: "Austria"},
{value: "AZ", label: "Azerbaijan"},
{value: "BS", label: "Bahamas"},
{value: "BH", label: "Bahrain"},
{value: "BD", label: "Bangladesh"},
{value: "BB", label: "Barbados"},
{value: "BY", label: "Belarus"},
{value: "BE", label: "Belgium"},
{value: "BZ", label: "Belize"},
{value: "BJ", label: "Benin"},
{value: "BM", label: "Bermuda"},
{value: "BT", label: "Bhutan"},
{value: "BO", label: "Bolivia"},
{value: "BA", label: "Bosnia and Herzegovina"},
{value: "BW", label: "Botswana"},
{value: "BV", label: "Bouvet Island"},
{value: "BR", label: "Brazil"},
{value: "IO", label: "British Indian Ocean Territory"},
{value: "BN", label: "Brunei Darussalam"},
{value: "BG", label: "Bulgaria"},
{value: "BF", label: "Burkina Faso"},
{value: "BI", label: "Burundi"},
{value: "KH", label: "Cambodia"},
{value: "CM", label: "Cameroon"},
{value: "CA", label: "Canada"},
{value: "CV", label: "Cape Verde"},
{value: "KY", label: "Cayman Islands"},
{value: "CF", label: "Central African Republic"},
{value: "TD", label: "Chad"},
{value: "CL", label: "Chile"},
{value: "CN", label: "China"},
{value: "CX", label: "Christmas Island"},
{value: "CC", label: "Cocos (Keeling) Islands"},
{value: "CO", label: "Colombia"},
{value: "KM", label: "Comoros"},
{value: "CG", label: "Congo"},
{value: "CD", label: "Congo, The Democratic Republic of The"},
{value: "CK", label: "Cook Islands"},
{value: "CR", label: "Costa Rica"},
{value: "CI", label: "Cote D'ivoire"},
{value: "HR", label: "Croatia"},
{value: "CU", label: "Cuba"},
{value: "CY", label: "Cyprus"},
{value: "CZ", label: "Czech Republic"},
{value: "DK", label: "Denmark"},
{value: "DJ", label: "Djibouti"},
{value: "DM", label: "Dominica"},
{value: "DO", label: "Dominican Republic"},
{value: "EC", label: "Ecuador"},
{value: "EG", label: "Egypt"},
{value: "SV", label: "El Salvador"},
{value: "GQ", label: "Equatorial Guinea"},
{value: "ER", label: "Eritrea"},
{value: "EE", label: "Estonia"},
{value: "ET", label: "Ethiopia"},
{value: "FK", label: "Falkland Islands (Malvinas)"},
{value: "FO", label: "Faroe Islands"},
{value: "FJ", label: "Fiji"},
{value: "FI", label: "Finland"},
{value: "FR", label: "France"},
{value: "GF", label: "French Guiana"},
{value: "PF", label: "French Polynesia"},
{value: "TF", label: "French Southern Territories"},
{value: "GA", label: "Gabon"},
{value: "GM", label: "Gambia"},
{value: "GE", label: "Georgia"},
{value: "DE", label: "Germany"},
{value: "GH", label: "Ghana"},
{value: "GI", label: "Gibraltar"},
{value: "GR", label: "Greece"},
{value: "GL", label: "Greenland"},
{value: "GD", label: "Grenada"},
{value: "GP", label: "Guadeloupe"},
{value: "GU", label: "Guam"},
{value: "GT", label: "Guatemala"},
{value: "GG", label: "Guernsey"},
{value: "GN", label: "Guinea"},
{value: "GW", label: "Guinea-bissau"},
{value: "GY", label: "Guyana"},
{value: "HT", label: "Haiti"},
{value: "HM", label: "Heard Island and Mcdonald Islands"},
{value: "VA", label: "Holy See (Vatican City State)"},
{value: "HN", label: "Honduras"},
{value: "HK", label: "Hong Kong"},
{value: "HU", label: "Hungary"},
{value: "IS", label: "Iceland"},
{value: "IN", label: "India"},
{value: "ID", label: "Indonesia"},
{value: "IR", label: "Iran, Islamic Republic of"},
{value: "IQ", label: "Iraq"},
{value: "IE", label: "Ireland"},
{value: "IM", label: "Isle of Man"},
{value: "IL", label: "Israel"},
{value: "IT", label: "Italy"},
{value: "JM", label: "Jamaica"},
{value: "JP", label: "Japan"},
{value: "JE", label: "Jersey"},
{value: "JO", label: "Jordan"},
{value: "KZ", label: "Kazakhstan"},
{value: "KE", label: "Kenya"},
{value: "KI", label: "Kiribati"},
{value: "KP", label: "Korea, Democratic People's Republic of"},
{value: "KR", label: "Korea, Republic of"},
{value: "KW", label: "Kuwait"},
{value: "KG", label: "Kyrgyzstan"},
{value: "LA", label: "Lao People's Democratic Republic"},
{value: "LV", label: "Latvia"},
{value: "LB", label: "Lebanon"},
{value: "LS", label: "Lesotho"},
{value: "LR", label: "Liberia"},
{value: "LY", label: "Libyan Arab Jamahiriya"},
{value: "LI", label: "Liechtenstein"},
{value: "LT", label: "Lithuania"},
{value: "LU", label: "Luxembourg"},
{value: "MO", label: "Macao"},
{value: "MK", label: "Macedonia, The Former Yugoslav Republic of"},
{value: "MG", label: "Madagascar"},
{value: "MW", label: "Malawi"},
{value: "MY", label: "Malaysia"},
{value: "MV", label: "Maldives"},
{value: "ML", label: "Mali"},
{value: "MT", label: "Malta"},
{value: "MH", label: "Marshall Islands"},
{value: "MQ", label: "Martinique"},
{value: "MR", label: "Mauritania"},
{value: "MU", label: "Mauritius"},
{value: "YT", label: "Mayotte"},
{value: "MX", label: "Mexico"},
{value: "FM", label: "Micronesia, Federated States of"},
{value: "MD", label: "Moldova, Republic of"},
{value: "MC", label: "Monaco"},
{value: "MN", label: "Mongolia"},
{value: "ME", label: "Montenegro"},
{value: "MS", label: "Montserrat"},
{value: "MA", label: "Morocco"},
{value: "MZ", label: "Mozambique"},
{value: "MM", label: "Myanmar"},
{value: "NA", label: "Namibia"},
{value: "NR", label: "Nauru"},
{value: "NP", label: "Nepal"},
{value: "NL", label: "Netherlands"},
{value: "AN", label: "Netherlands Antilles"},
{value: "NC", label: "New Caledonia"},
{value: "NZ", label: "New Zealand"},
{value: "NI", label: "Nicaragua"},
{value: "NE", label: "Niger"},
{value: "NG", label: "Nigeria"},
{value: "NU", label: "Niue"},
{value: "NF", label: "Norfolk Island"},
{value: "MP", label: "Northern Mariana Islands"},
{value: "NO", label: "Norway"},
{value: "OM", label: "Oman"},
{value: "PK", label: "Pakistan"},
{value: "PW", label: "Palau"},
{value: "PS", label: "Palestinian Territory, Occupied"},
{value: "PA", label: "Panama"},
{value: "PG", label: "Papua New Guinea"},
{value: "PY", label: "Paraguay"},
{value: "PE", label: "Peru"},
{value: "PH", label: "Philippines"},
{value: "PN", label: "Pitcairn"},
{value: "PL", label: "Poland"},
{value: "PT", label: "Portugal"},
{value: "PR", label: "Puerto Rico"},
{value: "QA", label: "Qatar"},
{value: "RE", label: "Reunion"},
{value: "RO", label: "Romania"},
{value: "RU", label: "Russian Federation"},
{value: "RW", label: "Rwanda"},
{value: "SH", label: "Saint Helena"},
{value: "KN", label: "Saint Kitts and Nevis"},
{value: "LC", label: "Saint Lucia"},
{value: "PM", label: "Saint Pierre and Miquelon"},
{value: "VC", label: "Saint Vincent and The Grenadines"},
{value: "WS", label: "Samoa"},
{value: "SM", label: "San Marino"},
{value: "ST", label: "Sao Tome and Principe"},
{value: "SA", label: "Saudi Arabia"},
{value: "SN", label: "Senegal"},
{value: "RS", label: "Serbia"},
{value: "SC", label: "Seychelles"},
{value: "SL", label: "Sierra Leone"},
{value: "SG", label: "Singapore"},
{value: "SK", label: "Slovakia"},
{value: "SI", label: "Slovenia"},
{value: "SB", label: "Solomon Islands"},
{value: "SO", label: "Somalia"},
{value: "ZA", label: "South Africa"},
{value: "GS", label: "South Georgia and The South Sandwich Islands"},
{value: "ES", label: "Spain"},
{value: "LK", label: "Sri Lanka"},
{value: "SD", label: "Sudan"},
{value: "SR", label: "Suriname"},
{value: "SJ", label: "Svalbard and Jan Mayen"},
{value: "SZ", label: "Swaziland"},
{value: "SE", label: "Sweden"},
{value: "CH", label: "Switzerland"},
{value: "SY", label: "Syrian Arab Republic"},
{value: "TW", label: "Taiwan, Province of China"},
{value: "TJ", label: "Tajikistan"},
{value: "TZ", label: "Tanzania, United Republic of"},
{value: "TH", label: "Thailand"},
{value: "TL", label: "Timor-leste"},
{value: "TG", label: "Togo"},
{value: "TK", label: "Tokelau"},
{value: "TO", label: "Tonga"},
{value: "TT", label: "Trinidad and Tobago"},
{value: "TN", label: "Tunisia"},
{value: "TR", label: "Turkey"},
{value: "TM", label: "Turkmenistan"},
{value: "TC", label: "Turks and Caicos Islands"},
{value: "TV", label: "Tuvalu"},
{value: "UG", label: "Uganda"},
{value: "UA", label: "Ukraine"},
{value: "AE", label: "United Arab Emirates"},
{value: "GB", label: "United Kingdom"},
{value: "US", label: "United States"},
{value: "UM", label: "United States Minor Outlying Islands"},
{value: "UY", label: "Uruguay"},
{value: "UZ", label: "Uzbekistan"},
{value: "VU", label: "Vanuatu"},
{value: "VE", label: "Venezuela"},
{value: "VN", label: "Viet Nam"},
{value: "VG", label: "Virgin Islands, British"},
{value: "VI", label: "Virgin Islands, U.S."},
{value: "WF", label: "Wallis and Futuna"},
{value: "EH", label: "Western Sahara"},
{value: "YE", label: "Yemen"},
{value: "ZM", label: "Zambia"},
{value: "ZW", label: "Zimbabwe"}
var Selector = ponent('selector', {
el:"#app",
components: {
selector: Selector
// 把组件挂到 Vue 实例上
options: [
// 组件数据绑定的是 props 里的 options，需要从父组件 data 中传递过去
{value: "AF", label: "Afghanistan"},
{value: "AX", label: "?land Islands"}
Copyright & 2016 phpStudy
