Vue基础和语法

1. Vue的基本认识和基本使用

1. 引入vue.js
2. 创建Vue对象
3. 双向数据绑定: v-model

• el: 指定根element(选择器)
• data: 初始化数据(页面可以访问)

5. 显示数据: {{xxx}}
6. 理解vue的mvvm实现

MVVM:

• model: 模型, 数据对象(data)
• view: 视图, 模板页面
• viewModel: 视图模型(Vue的实例)

2. 模板语法：强制数据绑定 绑定事件监听

• 指令一：强制数据绑定

<img v-bind:src="imgUrl" />
<img :src="imgUrl" />

• 指令二：绑定事件监听

<button v-on:click="test">test1</button>
<button @click="test">test2</button>
<button @click="test2(msg)">test3</button>

Javascript中methods部分代码：

methods: {
	test(){
		alert('hehe!')
	},
	test2(content) {
		alert(content)
	}
}

3. 计算属性和监视属性

1. 计算属性
   在computed属性对象中定义计算属性的方法
   在页面中使用{{方法名}}来显示计算的结果
2. 监视属性
   通过vm对象的$watch()或watch配置来监视指定的属性
   当属性变化时，回调函数自动调用，在函数内部进行计算
3. 计算属性高级
   通过getter/setter实现对属性数据的显示和监视
   计算属性存在缓存，多次读取只执行一次getter计算

• getter: 属性的get方法
• setter: 属性的set方法

回调函数：

计算并返回当前属性的值，当属性值发生改变时回调，更新相关的属性数据
什么是回调函数：

1. 你定义的
2. 你没有调用
3. 但最终它执行了

1. 什么时候调用：当需要读取当前的属性值时回调
2. 用来做什么：计算并返回当前属性的值

4. class绑定和style绑定

1. 理解
   在应用界面中, 某个(些)元素的样式是变化的，class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定

:class='xxx'

其中：

• xxx可以是字符串
• xxx可以是对象
• xxx可以是数组

3. style绑定

:style='xxx' xxx是对象
:style="{ color: activeColor, fontSize: fontSize + 'px' }"

其中activeColor/fontSize是data属性

5. 条件渲染

1. 条件渲染指令
   v-if & v-else 通过标签移除隐藏
   v-show 通过样式隐藏 display属性
2. 比较v-if与v-show
   如果需要频繁切换v-show较好

6. 列表渲染

1. 列表显示
   数组: v-for / index
   对象: v-for / key
2. 列表的更新显示
   html部分：

<div id="demo">
	<h2>测试: v-for 遍历数组</h2>
	<ul>
		<li v-for="(p, index) in people" :key="index">
			{{index}}---{{p.name}}---{{p.age}}
			---<button @click="deleteP(index)">删除</button>
			---<button @click="updateP(index,{name:'Cat',age:20})">更新</button>
		</li>
	</ul>
	<h2>测试: v-for 遍历对象</h2>
	<ul>
		<li v-for="(value,key) in people[1]" :key="key">
			{{key}} : {{value}}
		</li>
	</ul>
</div>

method部分：

methods: {
	deleteP(index){
		// 删除people中指定index的p
		this.people.splice(index,1)
	},
					
	updateP(index,newP){
		//并没有改变people本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面
		// this.people[index] = newP
		this.people.splice(index,1,newP)
	}
					
}