强化历程2-Vue+axios+ajax面试系列(2023.6.17)

---

因为主要是后端，在此训练都是非常基础的题目,后续会持续更新…

---

强化历程2-Vue+axios+ajax面试系列(2023.6.18第一次更新)

题目汇总

1 Vue常用指令

答：

• v-text:等同于DOM中的innerText，向标签中写入文本，该指令和{{}}功能一样，使用较少
• v-html:等同于DOM中的innerHTML，向标签中写入文本，该指令会对HTML进行解析执行
• v-for
• v-if,v-else-if,v-else
• v-show:等同于v-if
• v-on:事件绑定指令,如v-on:click=“方法”，一般使用简写方式@click=“方法”
• v-bind:绑定事件，将属性与事件绑定到一起，简写为:(单向绑定)
• v-model:绑定事件，将属性与事件绑定到一起,v-model只能在带有value属性的HTML元素中使用

2 v-show和v-if区别

答:

• v-show:修改的是css(display)属性，元素始终被渲染在html属性上
• v-if:判断后，直接修改html
• v-show切换开销比v-if小，需要频繁切换时v-show显然更好

3 讲一讲MVVM

答:

MVVM(Model View View Model):Model表示数据模型，View表示视图,指由数据驱动视图

简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

4 vue特点?

答：

• 易学易用:基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。
• 性能出色:经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。
• 灵活多变:丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。

5 vue组件之间的传值

答:

① 使用props从父组件向子组件传递数据

• 在父组件中，我们可以通过在子组件标签上添加属性来传递数据，如下所示：

 <template>
	 <div>
     <child-component :message="parentMessage"></child-component>
     </div>
   </template>
   <script>
   import ChildComponent from './ChildComponent.vue'

   export default {
     components: {
 	  ChildComponent
     },
     data() {
  	 return {
 	    parentMessage: 'Hello from parent'
	   }
     }
   }
   </script>

• 在子组件中，我们可以使用props来接收数据，如下所示：

  <template>
    <div>
      {{ message }}
    </div>
  </template>
  
  <script>
  export default {
    props: {
      message: String
    }
  }
  </script>
  

② 使用$emit从子组件向父组件传递数据

• 在子组件中，我们可以使用$emit来触发一个自定义事件，并将数据作为参数传递给父组件，如下所示：

  <template>
    <div>
      <button @click="sendMessage">Send Message</button>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message-sent', 'Hello from child')
      }
    }
  }
  </script>
  

• 在父组件中，我们可以通过在子组件标签上添加v-on指令来监听自定义事件，并在事件处理程序中接收数据，如下所示：

  <template>
    <div>
      <child-component @message-sent="handleMessage"></child-component>
    </div>
  </template>	
  <script>
  import ChildComponent from './ChildComponent.vue'	
  export default {
    components: {
      ChildComponent
    },
    methods: {
      handleMessage(message) {
        console.log(message)
      }
    }
  }
  </script>
  

6 vue整合其他框架

答:此处以element-ui为例

• 在终端使用npm引入

  npm i element-ui -S
  

• 在main.js 中写入以下内容:

    import ElementUI from 'element-ui';//导入elementUI组件
    import 'element-ui/lib/theme-chalk/index.css';//导入element样式组件
    //引入组件
    Vue.use(ElementUI)
  

• 在Index.vue组件测试使用

  	<div>
  	   <el-button type="primary" @click="test">按钮</el-button>
  	</div>
  

7 vue生命周期

答:图来自https://cloud.tencent.com/developer/article/1514771

8 vue中实现路由跳转的方式

答:

• vue-router

• 声明式:router-link

  <router-link to="/home">首页</router-link>
  

• 编程式:用JS代码来进行跳转

  this.$router.push('/home')
  

9 vue中data｛｝里的内容在页面有时会有闪闪的情况，怎么解决

答:
当数据发生变化时，Vue会异步更新DOM，这可能会导致在更新之前看到旧的数据，从而导致闪烁的情况。
使用v-cloak指令来防止闪烁。在CSS中添加一个样式来隐藏元素，然后将v-cloak指令添加到需要隐藏的元素上。
在css里加上以下代码

[v-cloak] {
 display: none;
   }

10 在vue中怎么使用dom

可以使用ref属性来访问DOM元素。例如，在模板中使用ref属性

  <div>
    <button ref="myButton" @click="handleClick">点击我</button>
  </div>

然后，在Vue实例中，可以使用this.$refs来访问DOM元素。

methods: {
    handleClick() {
      this.$refs.myButton.innerHTML = '已点击'
    }
  }

11 axios的作用和用法

答:

• 主要用于前后端数据交互，自动转换json数据

• vue引入axios后，可在method中的方法使用

    test() {  
        		//方法为get，post，delete，put
              this.$axios.get("/user/selectUser")
                  .then()
                  .catch()
          }
  

12 ajax的作用

答:

异步刷新前段某一部分数据，减少服务器开销

13 如何实现跨越配置

答:为了项目安全，项目之间不可随意访问，跨域请求默认是不允许的，可以请求，但无法返回资源

• 前端配置:是基于代理实现的(前端项目访问服务端项目时，做一个代理，将两个项目整合)
• 服务端配置:不使用代理，而是在服务端设置当前应用中哪些资源可以被外部调用

14 npm run dev和npm run serve区别

答:

• npm run dev通常用于在开发过程中启动应用程序，并启用热重载，这样当您更改代码时，应用程序将自动重新加载以反映更改。

• npm run serve通常用于在开发过程中启动一个服务器，以便您可以通过浏览器访问您的应用程序。这个命令通常与静态网站生成器一起使用，例如Vue.js或React等框架。

15 vue的双向绑定如何实现

答:

• Vue的双向绑定是通过数据劫持和发布-订阅模式实现的。

• 当Vue实例化时，它会遍历所有的data属性并使用Object.defineProperty()方法将其转换为getter和setter。当数据改变时，setter会通知依赖项更新视图。而当视图中的数据改变时，v-model指令会触发对应属性的setter，从而更新数据。