vue面试常见问题（建议收藏）

最新推荐文章于 2024-09-30 12:30:10 发布

浮雨Floating Rain

最新推荐文章于 2024-09-30 12:30:10 发布

阅读量299

点赞数

本文链接：https://blog.csdn.net/weixin_45150889/article/details/103380961

版权

本文深入探讨Vue面试中的常见问题，包括常用指令、v-model的实现原理、vue-cli2.0与3.0的区别、组件传值、Vue路由传参的各种方式（params和query）以及路由守卫的使用。内容涵盖Vue核心概念和工具的使用，有助于理解Vue的内在机制。

摘要由CSDN通过智能技术生成

一.常用指令

 1.v-text:用于更新标签，他的作用跟差值表达式{
   {
   }}效果相同
 <p v-text='name'></p>
 <p>{
   {
   name}}</p>
 2.v-html：绑定一些含有html代码的数据，可以渲染html标签
 <div id ='app'>
    <p v-html='name'></p>
 </div>
 <script>
   let vm = new Vue({
   
       el:'#app',
       data:{
   
           name:'<h1>Tom</h1>'
       }
   })
 </script>

 3.v-show:指令的取值为boolean类型true or false 对应的是显示和隐藏
  <div id ='app'>
    <p v-show='show1'>显示</p>
    <p v-show='show2'>隐藏</p>
 </div>
 <script>
   let vm = new Vue({
   
       el:'#app',
       data:{
   
           show1:true,
           show2:false
       }
   })
 </script>
 4.v-if:取值为boolean，控制元素是否被渲染，当值为true时p标签会被成功渲染，为false p标签会被注释所代替
 <div id ='app'>
    <p v-if='show1'>显示</p>
    <p v-if='show2'>隐藏</p>
 </div>
 <script>
   let vm = new Vue({
   
       el:'#app',
       data:{
   
           show1:true,
           show2:false
       }
   })
 </script>
v-show与v-if的区别：如果需要频繁切换显示/隐藏可以用v-show，如果运行后不太可能需要切换显示/隐藏的可以用v-if
5.v-else：和v-if搭配使用，没有对应值。当v-if的值为false，v-else才会被渲染 
 <div id ='app'>
    <p v-if='show1'>显示</p>
    <p v-else='show2'>隐藏</p>
 </div>
 <script>
   let vm = new Vue({
   
       el:'#app',
       data:{
   
           show1:false
          
       }
   })
 </script>
6.v-for：遍历data存放的数组数据，实现列表渲染（v-for除了可以迭代数组，可以迭代对象和整数）
 <div id ='app'>
    <div v-for='item in list'>
       {
   {
   item}}
    </div>
 </div>
 <script>
   let vm = new Vue({
   
       el:'#app',
       data:{
   
         list：['tom','Ice','jack']
       }
   })
 </script>
如果要在循环解析的过程中获取每一个元素的索引可以在循环的时候加上（item，index）
<div id ='app'>
    <div v-for='（item，index） in list'>
       {
   {
   index+1}}{
   {
   item}}
    </div>
 </div>
 <script>
   let vm = new Vue({
   
       el:'#app',
       data:{
   
         list：['tom','Ice','jack']  
       }
   })
 </script>
7.v-bind:用于动态绑定DOM元素的属性，例如a标签的href属性
<a v-bind:href='link'>跳转</a>
简写：
<a :href='link'>跳转</a>
8.v-on：可以绑定事件的监听器，通过v-on指令修饰click点击事件，指定事件响应后的处理函数为methods中的say（）方法
<div id ='app'>
   <button v-on:click="say">
       点击
   </button>
 </div>
 <script>
   let vm = new Vue({
   
       el:'#app',
       data:{
   }，
       methods:{
   
       say(){
   
          console.