监听器（watch）

监听中的 方法名 与 需要监听的 变量名一致
如果没有（例如aa），不会报错，但监听不到

所以上图会输出1，而不会输出2

newValue改变后的值，oldValue改变前的值

watch可以监听computed计算属性中的方法，变量等等

点击go按钮，调用change方法修改kk的值，computed中有kk，所以kk改变，computed执行(computed看的是方法里的变量)，返回kk的值，watch（看的是方法名，watch的方法名要与监听的变量名一致）监听到computed中leo执行，输出leo

监听拓展

普通监听（浅监听），只能监听的到整个数组被替换（重新赋值，原来的销毁，变成新的）。监听不到 数组内部发生改变（push，pop等）
可以监听：

不能监听：

解决方案：
深度监听，被监听的方法中添加handler

不只要加handler还需要加deep：true

immediate （中文立即的意思）立即执行
加上immediate：true，会初始化时就会自动执行一次

总结：

事件处理

$event的写法是固定的，指的是当前的事件，上图中指的是MouseEvent

获取这个事件对象 可以做很多事，比如拖拽等等

&event是作为参数传入的固定写法，想在第几个传入，第几个就写$event

总结：

事件 修饰符

阻止事件默认行为（.prevent）：

@mousedown.prevent
后面不要加“事件名”，就是不要加=‘abc’,直接写@mousedown.prevent就行
加了事件 阻止不了那个事件
例如：

点击字符串，一样会执行abc事件中的alert（1），弹出1

事件冒泡

这么写会冒泡，点blue会从blue的弹窗一直弹到leo的
点sky会从sky弹到leo

.cupture谁先捕获到先执行哪个

所以点击blue，会先弹出leo，然后sky，最后是blue，冒泡效果还是会有，只不过执行顺序会相反

.passive不能和.prevent一起使用，会报错

@scroll后使用.passive会在移动端的效率会更高（以前或者比较差的手机或者浏览器），会过滤掉一些移动端没有用的多余的行为

@scoll.passive是vue对滚动的优化方案，设置为true时，表示 listener 永远不会调用 preventDefault()

如果事件冒泡，加上.once 还是会冒泡，只不过只会执行一次，再次点击无效

阻止事件冒泡（.self）：

或者.stop

总结：

按键别名

.tab .enter等

键盘事件（必须是键盘事件） 之后直接用

总结：

系统修饰键

ctrl，alt，shift，meta

meta在windows上是系统键，在苹果电脑上是commond键

如果使用.crtl，按键中包含ctrl也能执行，比如同时按shift和ctrl

那怎么只按crtl 才执行，按多个不执行：
.exact

上图的写法就是，只按ctrl键执行abc方法

先按住ctrl在按住shift也不执行

但这种写法只针对系统修饰键，比如按esc和ctrl一样会执行

鼠标事件修饰符

left，right，middle
left只能用在鼠标左键的事件上
如果left用在鼠标右键的事件上会不执行
所以right只能用在右键的事件上

例子：
@contextmenu.left
点击左键会不执行
因为contentmenu是鼠标右键的事件

例子2
@click.right也不会执行
因为click是鼠标左键的事件

例子3:
鼠标修饰符只能一个使用，不能一起使用，会不执行
不能.left.right这种写法

mousedown这类事件不用区分left和right，都能使用
contextmenu指的是右键菜单

总结：

表单输入绑定，双向绑定（v-modle）

双向绑定修饰符

.lazy
input上的v-modle后面用.lazy会把oninput事件降级成on change事件

.number
input的v-modle后用.number，输入框里输入非数字的字符串，现实的时候会被自动过滤掉

可连用
可以.number.lazy连用

.trim删除前后空格

class与style绑定，对象语法

这种写法比｛｛变量｝｝要方便一些，否则还得在data中给变量再设一个值

class叠加的顺序，先写的在前面（写在前面的排在前面）
后写的aaa所以在网页中aaa也排在后面

对象写法里是个json格式，可以写多个class
class的个数不限

正常的json格式key是要加双引号“”的
如果要写的规范一点可以加上

要书写规范的话，上图中的mmm和k也要和setRed一样加上“”
active的值为字符串，默认为true
active的值设为0，会默认为false
active的值设为空字符串“”，会默认为false

：class和：style

：class=‘变量名’
：style=‘变量名’

：style=‘对象’，也一样会转换成style的字符串格式执行

class与style绑定—数组语法

上方写法就是两个（多个）class的数组写法

数组中放入三元运算符：

class 数组里嵌套数组


结果：（class会把数组自动扁平化）

字符串模版

换行\n

字符串模版中插入变量或者json对象中的某个属性：
使用$｛｝

a和b如果都是数字 所以用运算符拼接会自动计算

组件基础

从上图可以看出 调用的三个组件都是单独的（每个count显示的都不一样，每个调用的组件里都有一个data，data里都有一个count）

配合计算属性一起使用

leo-aaa在执行的时候，会自动转化为<div>等html代码，所以直接在leo-aaa标签上添加点击事件等事件是无效的

props

msg in data，意思是在使用data的时候把data的名字改为msg，所以循环的时候msg.id其实是data中data数组中每个对象的id

在组件leo-aaa中接收，写为.component（“leo-aaa”，{props:

然后props接收

最后.mount挂载在#leo上

总结：

slot等同于：

上下两张图中的代码其实是一样的,上图的slot标签等于会再加载一遍html里leo-aaa里的代码，而下图里则是直接写进组件里了

注意：
每写一个slot标签都会把组件leo-aaa中的内容输出一遍

总结：