Vue面试（1）-- vue基本使用

console.log(‘watch name’, oldVal, val) // 值类型，可正常拿到 oldVal 和 val

},

info: {

handler(oldVal, val) {

console.log(‘watch info’, oldVal, val) // 引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val

},

deep: true // 深度监听

}

}

}

（在watch中监听值类型的name，和引用类型的info。对于info的浅监听：info可以修改，但是里面的子属性或者子子属性修改就无法监听。监听引用类型拿不到oldVal,因为对于引用类型的值的修改是指针操作，oldVal和val虽然是不同的变量，但是指向同样的地址，一旦修改之后无法拿到之前的值）



### ****3\. class和style****



****使用动态属性，使用驼峰写法****

使用 class

使用 class （数组）

使用 style

### **4\. 条件渲染**



  ****v-if v-else的用法，可以使用变量，也可以使用===表达式****



  ****v-if和v-show的区别？****



  ****v-if和v-show的使用场景？****

A

B

other

A

B

（渲染结果不同，对于v-if只会渲染一个dom元素；对于v-show，data是a就会显示a的dom元素，对于其他的选择会渲染display:none，只是不显示而已。）



（对于一次选择或者数据更新不频繁时，选择v-if;如果需要频繁切换，需要v-show，用display：none控制隐藏和显示效果比较好，否则用v-if会导致dom结点频繁的销毁加载）



### 5\. 列表渲染



  ****如何遍历对象？****



  ****Key的重要性（不能乱写）****



  ****v-for和v-if不能一起使用****

遍历数组

• {{index}} - {{item.id}} - {{item.title}}

  遍历对象

• {{index}} - {{key}} -  {{val.title}}

  
  
  
  （v-for比v-if运算级高一些，因此会先定义循环）
  
  
  
  ### **6\. 事件**
  
  
  
   ****Event参数和自定义参数的获取****
  
  
  
   ****事件修饰符，按键修饰符****
  
  
  
    ****事件被绑定到哪里****
  
  
  
  

  {{num}}

  <button @click=“increment1”>+1

  <button @click=“increment2(2, $event)”>+2

  
  
  
  （increment1 不需要传参数，则event可以直接获取；increment2有自定义参数，则event事件需要在参数中写出）
  
  
  
  （结论： 1. event 是原生的 2. 事件被挂载到当前元素）
  
  
  
  ****事件修饰符****
  
  
  
  <table border="1" cellspacing="0"><tbody><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">阻止单击事件继续传播</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;a v-on:click.stop=”doThis”&gt; &lt;/a&gt;</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">提交事件时不再重载页面</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;form v-on:submit.prevent=”onSubmit”&gt; &lt;/form&gt;</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">修饰符可以串联</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;a v-on:click.stop.prevent=”doThis”&gt; &lt;/a&gt;</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">只有修饰符</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;form v-on:submit.prevent&gt; &lt;/form&gt;</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">添加事件监听器时使用事件捕获模式，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;div v-on:click.capture=”doThis”&gt; &lt;/div&gt;</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">只在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;div v-on:click.self=”doThis”&gt; &lt;/div&gt;</p></td></tr></tbody></table>
  
  
  
  ****按键修饰符****
  
  
  
  <table border="1" cellspacing="0"><tbody><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">Alt或shift被一同按下也会触发</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;button @click.ctrl=”onClick”&gt;按钮&lt;/button&gt;</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">有且只有CTRL被按下才会触发</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;button @click.ctrl.exact=”onClick”&gt;按钮&lt;/button&gt;</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">没有任何修饰符被按下时才触发</p></td></tr><tr><td style="vertical-align:top;width:426.1pt;"><p style="margin-left:0pt;">&lt;button @click.exact=”onClick”&gt;按钮&lt;/button&gt;</p></td></tr></tbody></table>
  
  
  
  ### **7\. 表单**
  
  
  
    ****v-model****
  
  
  
    ****常见表单项textarea、checkbox、radio、select****
  
  
  
    ****修饰符lazy、number、trim****
  
  
  
  （Trim截取前后空格；Lazy输入完成之后才会变化，输入过程中不会变化；Number转化为数字）
  
  
  
  

  输入框: {{name}}

  多行文本: {{desc}}

  复选框 {{checked}}

  多个复选框 {{checkedNames}}

  Jack

  John

  Mike

  单选 {{gender}}

  男

  女

  下拉列表选择 {{selected}}

  请选择

  A

  B

  C

  下拉列表选择（多选） {{selectedList}}

  请选择

  A

  B

  C

  最后

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
  摸索成长，自己不成体系的自学效果低效漫长且无助。**

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  [外链图片转存中…(img-lY0lfn7f-1715703453821)]

  [外链图片转存中…(img-lL3ldoSB-1715703453821)]

  [外链图片转存中…(img-9tl3RAPX-1715703453822)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！