Vue2

Vue2文档：https://v2.cn.vuejs.org/

MVVM架构模型

• M：模型（Model），对应data中的数据
• V：视图（View）：模版
• VM：视图模型（View Model），Vue实例对象

Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示

v-bind:：单向数据绑定

v-model:：双向数据绑定

v-on:：绑定事件，可以简写为@，@click="demo"和@click="demo($event)"效果一致，但是后者可以写成@click="demo($event,...)"以传递参数

v-if=""：控制元素在页面是否显示，template只能和v-if使用，不展示的DOM元素被直接移除掉，元素可能无法被获取到，有更高的切换消耗

v-show=""：控制元素在页面是否显示，不展示的DOM元素未被移除，只是样式被隐藏，有更高的初始渲染消耗，适用于切换频率高的场景

v-for="形参 in 对象"：使用形参标识遍历对象，类似于C++for(auto x:arr)，最好配合:key=""使用

数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

Object.defineProperty(a, ‘b’, {
	value: ???
	enumerable: true, // 控制属性是否可以被枚举，默认是false
	writable: true, // 控制属性是否可以被修改，默认是false
	configurable: true // 控制属性是否可以被删除，默认是false
	// 当有人读取a的b属性时，get函数会被调用，并且返回值就是b的值
	get() {
		return ???
	},
	// 当有人修改a的b属性时，set函数会被调用
	set(value) {
	
	}
})

事件修饰符

• prevent阻止默认事件
• stop阻止事件冒泡
• once事件只触发一次
• capture使用事件的捕获模式
• self只有event.target是当前操作元素才触发事件
• passive事件的默认行为立即执行，无需等待事件回调执行完成

键盘事件

keyup、keydown，可以通过keyCode来访问按键名

计算属性

computed:{
                fullName:{
                    get() {
                        return ？？？
                    }
                    set(value) {
                    
                    }
                },
                info(){ // 如果只有get
                    return this.isHot?"炎热":"凉爽"
                }
            }

监视属性

watch:{
	variable:{
			immediate:true, // 初始化时让handler调用一下
			deep:true, // 是否深度监视（比如对象嵌套）
			handler() { // 可以传入(newValue, oldValue)两个参数
			
			}
	}
	// 如果不用配置属性，那可以简写为
	variable1() { // 当然这里也可以放newValue, oldValue
	
	}
}

绑定class样式

class="" // 适用于写死的class
:class = "arr" // 可以放表达式，数组，也可以可以是对象，实现动态绑定
...
arr = ['1', '2', '3']

绑定style样式

:style="{fontSize: fsize+'px';}" // font-size -> fontSize
...
fsize: 40

列表过滤

this.列表.filter((形参)=>{ // 不更改原数组
	return bool表达式;
})
// 所以需要用一个新数组接一下
this.新列表 = this.列表.filter((形参)=>{ // 不更改原数组
	return bool表达式;
})

列表排序