监听器（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，middleleft只能用在鼠标左键的事件上
如果left用在鼠标右键的事件上会不执行
所以right只能用在右键的事件上
例子：
@contextmenu.left
点击左键会不执行
因为contentmenu是鼠标右键的事件
例子2
@click.right也不会执行
因为click是鼠标左键的事件
例子3:鼠标修饰符只能一个使用，不能一起使用，会不执行
不能.left.right这种写法
mousedown这类事件不用区分left和right，都能使用contextmenu指的是右键菜单
总结：
表单输入绑定，双向绑定（v-modle）
双向绑定修饰符
.lazyinput上的v-modle后面用.lazy会把oninput事件降级成on change事件
.numberinput的v-modle后用.number，输入框里输入非数字的字符串，现实的时候会被自动过滤掉
可连用
可以.number.lazy连用
.trim删除前后空格
class与style绑定，对象语法
这种写法比｛｛变量｝｝要方便一些，否则还得在data中给变量再设一个值
class叠加的顺序，先写的在前面（写在前面的排在前面）
后写的aaa所以在网页中aaa也排在后面
对象写法里是个json格式，可以写多个class
class的个数不限
正常的json格式key是要加双引号“”的
如果要写的规范一点可以加上
要书写规范的话，上图中的mmm和k也要和setRed一样加上“”active的值为字符串，默认为trueactive的值设为0，会默认为falseactive的值设为空字符串“”，会默认为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中的内容输出一遍文章来源：https://www.toymoban.com/news/detail-606723.html
总结：
文章来源地址https://www.toymoban.com/news/detail-606723.html
到了这里，关于vue3基础（五）watch(浅监听及深度监听)，鼠标及键盘修饰符，v-model，对象写法，class使用数组，字符串模版,自定义组件标签上添加事件无效,使用data时用别名替代，solt输出内容的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
