2020/07/01 Vue - 一直在更新

首先，我们先了解一个.vue页面的组成

<template>
	   模板部分：这个页面的html部分
</template>
<script>
	   js部分: 引入，以及数据处理部分
</script>
<style>
	   css部分：样式
</style>

重点了解<scirpt></scirpt>里面的相关内容
分为
外部文件的引入：

import { dataSource } from '../assets/js/dataSource' 
import { AComponent } from '../components/AComponents' 
import { Button, Swipe, SwipeItem } from 'vant'

主体部分：

export default {
	属性||方法:{
		xxx:function(){}
	} || [] || "" || `` || Component || else ,
	...
}

主体部分有以下属性：

el //id,绑定实例
name //组件的名字
data//放置数据
components //绑定其他组件
template //设置模板
props //往模板template传值
methods// 业务逻辑，js方法
computed//计算属性，依赖数据改变时才执行
watch //监听数据变化，返回新值和旧值
extends//添加扩展，对象形式
mixins//添加扩展，可多个对象，数组形式
render //创建Virtual Dom

//属性的大致用法
export default {
	name:'xxx',     
	data:{
		dataSour:dataSource,
		url:'https://www.baidu.com',
		num:1,
		clother:"aaa"
	},	
	components:{
		ACom:AComponent
	},
	template:`<p>props传的值为{{a}}</p>`
	props:['a'],
	methods:{
		functionA:function(){
			console.log(this is the funciton A);
		}
		functionB:function(a,$event){
			console.log($event);
		}	
	},
	computed:{
		newdataSour:function(){
			return this.dataSour
		}
	},
	extends:{
		updated:function(){
            console.log('updated'+this.num);
        }
	},
	mixins:[addConsole,addConsoleTwo],
	watch:{
		tem:function(newVal, oldVal) {
			if(newVal == 26){
				this.clother = "aaa";
			}else if(newVal ==26 && newVal >=10 ){
				this.clother = "bbb";
			}else{
				this.clother = "ccc";
			} 
		}
	}	
}

</script>

有以下生命周期方法

初始化显示
*beforeCreate()
*created()
*beforeMount()
*mounted()
更新状态:this.xxx=value
*beforeUpdate()
*updated()
销毁 vue 实例:vm.$destory()
*beforeDestory()
*destoryed()

//方法的大致用法
export default {
	name:'xxx',     
	data:{
		dataSour:dataSource,
		url:'https://www.baidu.com',
		num:1,
		clother:"aaa"
	},	
	beforeCreate:function(){
   		 console.log('1-beforeCreate 初始化之后');
	},
	created:function(){
	    console.log('2-created 创建完成');
	},
	beforeMount:function(){
	    console.log('3-beforeMount 挂载之前');
	},
	mounted:function(){
	    console.log('4-mounted 挂载后');
	},
	beforeUpdate:function(){
	    console.log('5-beforeUpdate 数据更新前');
	},
	updated:function(){
	    console.log('6-updated 被更新后');
	},
	activated:function(){
	    console.log('7-activated');
	},
	deactivated:function(){
	    console.log('8-deactivated');
	},
	beforeDestroy:function(){
	    console.log('9-beforeDestroy 销毁之前');
	},
	destroyed:function(){
	    console.log('10-destroyed 销毁之后')
	}
}

待续