【Vue全解1】构造选择options之data

【Vue全解】构造选项之options数据/data

目录

• 系列文章
• 构造Vue实例
• options的数据/data
• data
• methods
• props
• computed
• watch
• propsData

---

一、系列文章

【Vue 全解 0】Vue 实例
【Vue 全解 1】构造选项 options 之 data
【Vue 全解 2】Vue 模板语法摘要
【Vue 全解 3】Vue 的 data 代理和数据响应式
【Vue 全解 4】options 之生命周期钩子（created、mounted、updated、destroyed）
【Vue 全解 5】options 之 DOM（el、template、render）
【Vue 全解 6】options 之资源（directive、filter、components）和修饰符
【Vue 全解 7】options 之组合（mixin、extends、provide/inject）
【Vue 全解 8】Vue 表单输入绑定 v-model

二、构造Vue实例

• 代码示例

import vue from 'vue';	//假设导入了Vue完整版包

const vm=new Vue(options);	//创建一个vm为Vue的实例

• 常见的写法

new Vue({
	data(){	//data有两种写法:对象 | 函数
		return {
			n:100
		}
	},
	template:`
		<div class="red">
			<span>显示的是n的值：</span>
			{{n}}
		</div>
	`,
	.
	.(省略的其他函数)
	.
}).$mount("#app");

---

三、options的数据/data

取值有：红色表示易懂好理解，黄色属性表示稍微难一点，蓝色表示不常用。

• data
• props
• methods
• computed
• watch
• propsData

1. 数据/data

data 为内部数据，有两种类型：对象或函数（优先使用函数）

限制：组件的定义只接受函数

• 使用data实现定义初始化的数据

new Vue({

	data:{
		n:100
	},
	/* 或者 */
	data(){
		return {
			n:100
		}
	},
})

---

2. 数据/props

props为外部数据，也叫做属性,用来主组件和副组件之间的传值。既然是主副组件之间，肯定需要使用compoents组件来演示了。

类型：Array<string> | object

• 利用props实现主副组件之间的传值和调用函数
• props的组件

/* 假设该组件代码的文件名为：Demo-props.vue 。使用的Vue为完整版Vue*/
<template>
	<div class='blue'>
		这是Demo-props
		<br>
		<div><span>{{msg1}}</span></div>
    	<div><span>{{msg2}}</span></div>
		<button @click='fn'>call main's fn<button/>
	</div>
</template>

<script>
	export default {
		props:['msg1','msg2','fn'],
	}
</script>

<style scoped>
	.blue {
		color:blue;
	}
</style>

• 主函数

import props from './components/Demo-props';	//导入组件

new Vue({
	components:{props},	//ES6新语法，直接使用props名称的组件
	data(){
		return {
			n:0
		}
	},
	/* props 传值
		1. 前面不加 ":",表示msg只是一段字符串。
		2. 前面加 ":",表示msg的内容是一段JS代码。
	*/
	template:`
		<div class='red'>
			{{n}}

			<h2>这是props组件</h2>
			<props msg2="你好 props":msg1='n' :fn='add'/>	

		</div>
	`,
	methods:{
		add(){
			this.n++;
		}
	}
}).$mount('#app')	//挂载到页面上id为app的div盒子上。

---

3. 数据/methods

事件处理函数或者普通函数全部都放在methods里面

类型：Function | [key:string]

• 利用methods实现简单的函数功能

new Vue({
	data(){
		return {
			n:0
		}
	},
	template:`
		<div class="red">
			{{n}}
			<button @click='add'>点击+1</button>
		</div>
	`,
	methods:{
		add(){
			this.n+=1;
		}
	},
})

---

4. 数据/computed

computed 计算属性, 不需要加括号，它会根据依赖是否变化缓存。

类型：[key:string]:Function | Function | {get:Function,set:Function}

• 使用computed实现显示数据

new Vue({
	data:{
		uesr1:{
			email: 'bigHansomeBoy111@me.com',
			nickname:'code111',
			phone:'18888888888',	//手机号最好用字符串存！
		},
		uesr2:{
			email: 'bigHansomeBoy222@me.com',
			nickname:'code222',
			phone:'18888888888',
		}
	},
	computed:{
		/* 当user的属性变化后，就会重新渲染更新界面 */
		displayName1(){
			const user=this.user1;
			return user.nickname||user.email||user.phone;
		},
		/* getter/setter */
		displayName2(){
			get (){
				const user=this.user2;
				return user.nickname||user.email||user.phone;
			}
			set (name){
				this.user2.nickname=name;
			}
		}
	}
	template:`
		<div class="show">
			{{displayName1}}
			<div>
				{{displayName2}}
			</div>
			<button @click='setName'>set</button>
		</div>
	`,
	methods:{
		setName(){
			this.displayName2='刘德华';
		}
	}
}).$mount('#app')

---

5. 数据/watch

监听data,一旦data变化，就执行的函数。注意默认第一次的值(就是给变量属性赋初始值时，从无到有)不监听，改变了才会重新渲染。

类型：{ [key: string]: string | Function | Object | Array }

相关API：options.watch | this.$watch | deep,immediate

更多watch语法

• 利用watch监听实现撤销功能或模拟computed(不建议)

new Vue({
	data:{
		n:0,
		history:[{from:0,to:0}],
		inUndoMode:false,	//一个判断是否在撤销模式的标志
		user:{
			email: 'bigHansomeBoy111@me.com',
			nickname:'code111',
			phone:'18888888888',
		},
		displayName:'ss',
	},
	created(){
		/* 用法与options的watch一样，这是在里面使用的$watch */
		this.$watch('n',function() {
			console.log('user变了');
		},{deep:true})
	},
	watch:{
		n(newValue,oldValue){
			if(!this.inUndoMode){
				this.history.push({from:oldValue, to:newValue})
			}
		},
		'user.email': {
			handler() {
				console.log('email变了');
				const { user: { email, nickname, phone } } = this;
				this.displayName = email || nickname || phone;
			},
			immediate:true,		//第一次给变量或者属性赋值的过程也要监听，即变量或者属性从无到有的过程。
		},
		user:{
			handler(){
				console.log('user变了');
			},
			deep:true,	//只要user对象里面的属性变量变化，就认为user也进行了变化。默认为false
		}
	},
	template:`
	<div>
		{{n}}
		<hr/>
		<button @click='add1'>+1</button>
		<button @click='add2'>+2</button>
		<button @click='minus1'>-1</button>
		<button @click='minus2'>-2</button>
		<hr/>
		<button @click='Undo'>撤销</button>
		{{history}}
		<hr/>
		<div>下面是immediate的演示</div>
	</div>
	`,
	methods:{
		add1(){
			this.n+=1;
		},
		add2(){
			this.n+=2;
		},
		minus1(){
			this.n-=1;
		},
		minus2(){
			this.n-=2;
		},
		Undo(){
			const last=this.history.pop();
			const old=last.from;
			this.Undo=true;
			this.n=old;	//注意watch是异步的
			/* 这是Vue自己封装的异步函数，与watch的异步是同级别的，所以这个函数是在watch后再执行。 */
			this.$nextTick(()=>{
				this.inUndoMode=false;
			},0)
		}
	}
})

6. 数据/propsData

创建实例时传递props,主要用于方便测试

let Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

let vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})