JS，Vue2，事件处理，计算属性，监视属性，class与s

　　VUE事件处理
　　用von指令或者监听DOM事件，并在触发时运行一些JavaScript代码；
　　参考：JS，Vue2，介绍，与Vue3区别，MVVM设计模式，模板语法，数据绑定
　　Vue中的事件修饰符：
　　1、prevent：阻止默认事件（常用）；
　　2、stop：阻止事件冒泡（常用）；
　　3、once：事件只触发一次（常用）；
　　4、capture：使用事件的捕获模式；
　　5、self：只有event。target是当前操作的元素时才触发事件；
　　6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
　　Vue中常用的按键别名：
　　回车enter、删除delete（捕获删除和退格键）、退出esc、空格space、换行tab（特殊，必须配合keydown去使用）、上up、下down、左left、右right等。
　　代码案例！DOCTYPEhtmlhtmlheadmetacharsetUTF8titleVUE2事件处理title！style。demo1｛height：50px；backgroundcolor：skyblue；｝。box1｛padding：5px；backgroundcolor：skyblue；｝。box2｛padding：5px；backgroundcolor：orange；｝。list｛width：200px；height：200px；backgroundcolor：peru；overflow：auto；｝li｛height：100px；｝styleheadbodyh2｛｛name｝｝h2buttonvon：clickshowInfo1提示信息1buttonbuttonclickshowInfo2提示信息2buttonbuttonclickshowInfo3（event，666）提示信息3（传参）buttonhr！Vue中的事件修饰符：1、prevent：阻止默认事件（常用）；2、stop：阻止事件冒泡（常用）；3、once：事件只触发一次（常用）；4、capture：使用事件的捕获模式；5、self：只有event。target是当前操作的元素时才触发事件；6、passive：事件的默认行为立即执行，无需等待事件回调执行完毕；！阻止默认事件（常用）提示信息br！阻止事件冒泡（常用）buttonclick。stopshowInfo1提示信息button！修饰符可以连续写！提示信息br！事件只触发一次（常用）buttonclick。onceshowInfo1提示信息buttonbr！使用事件的捕获模式p1p2br！只有event。target是当前操作的元素时才触发事件；buttonclickshowInfo1提示信息buttonbr！onwheel事件在鼠标滚轮在元素上下滚动时触发；！事件的默认行为立即执行，无需等待事件回调执行完毕；ulwheel。passiveshowDemoclasslistli111111112lili222222222lili333333333lili444444444liul！键盘事件！1、Vue中常用的按键别名：回车enter删除delete（捕获删除和退格键）退出esc空格space换行tab（特殊，必须配合keydown去使用）上up下down左left右right2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebabcase（短横线命名）3、系统修饰键（用法特殊）：ctrl、alt、shift、meta（1）、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。（2）、配合keydown使用：正常触发事件。4、也可以使用keyCode去指定具体的按键（不推荐）5、Vue。config。keyCodes。自定义键名键码，可以去定制按键别名inputtypetextplaceholder按下回车提示输入keydown。entershowInfo1bodyhtmlVUE计算属性
　　模板内的表达式是非常便利的，用于简单的运算。当其过长或逻辑过于复杂时，会难以维护，因此，当遇到复杂的逻辑时应该使用计算属性，用computed计算属性。
　　代码案例！DOCTYPEhtmlhtmlheadmetacharsetUTF8titleVUE2计算属性title！headbodyh1｛｛name｝｝h1hrulli通过methods来完成liulinputtypetextvmodelfirstNameinputtypetextvmodellastName全名：｛｛fullName（）｝｝hrolli通过改变firstName2和lastName2来改变fullName2lili通过改变fullName2来调整firstName2和lastName2liol
　　inputtypetextvmodelfirstName2inputtypetextvmodellastName2全名：inputtypetextvmodelfullName2
　　hrulli通过改变firstName3和lastName3来改变fullName3liul
　　inputtypetextvmodelfirstName3inputtypetextvmodellastName3全名：inputtypetextvmodelfullName3
　　bodyhtmlVUE监视属性
　　通过watch来响应数据的变化。
　　代码案例！DOCTYPEhtmlhtmlheadmetacharsetUTF8titleVUE2监视属性title！headbodyh3状态变化1：h3buttonclickchangeStatus1状态button｛｛computedStatus1｝｝hrh3状态变化2：h3buttonclickchangeStatus2状态button｛｛statusName2｝｝hrh3状态变化3：h3buttonclickchangeStatus3状态button｛｛statusName3｝｝hrh3状态变化4：h3buttonclickchangeStatus4状态button｛｛statusName4｝｝hrh3深度监视，a的值是：｛｛numbers。a｝｝h3buttonclicknumbers。aa1buttonhrh3深度监视，b的值是：｛｛numbers。b｝｝h3buttonclicknumbers。bb1buttonbodyhtmlVUE绑定样式
　　class样式，写法：classxxx，其中xxx可以是字符串、对象、数组。
　　1、字符串写法适用于：类名不确定，要动态获取。
　　2、对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
　　3、数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
　　style样式，写法：：style｛fontSize：xxx｝，其中xxx是动态值；：style〔a，b〕其中a、b是样式对象。
　　代码案例！DOCTYPEhtmlhtmlheadmetacharsetUTF8titleVue2class与style绑定（绑定样式）title！style。basic｛width：400px；height：100px；border：1pxsolidblack；｝。happy｛border：4pxsolidred；；backgroundcolor：rgba（255，255，0，0。644）；background：lineargradient（30deg，yellow，pink，orange，yellow）；｝。sad｛border：4pxdashedrgb（2，197，2）；backgroundcolor：gray；｝。normal｛backgroundcolor：rgb（31，173，230）；｝。xfd1｛backgroundcolor：yellowgreen；｝。xfd2｛fontsize：30px；textshadow：2px2px10pxred；｝。xfd3｛borderradius：20px；｝styleheadbody！绑定class样式字符串写法，适用于：样式的类名不确定，需要动态指定｛｛name｝｝
　　hr！绑定class样式数组写法，适用于：要绑定的样式个数不确定、名字也不确定｛｛name｝｝
　　hr！绑定class样式对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用｛｛name｝｝
　　hr！绑定style样式对象写法｛｛name｝｝
　　hr！绑定style样式数组写法｛｛name｝｝bodyhtml