2023年中前端面试真题之Vue篇

转载： https://mp.weixin.qq.com/s/ZK2pklXyHEtGPNtOoV9n2Q

<div id="app">
  <input v-model="message" type="text">
  <p>{{ message }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

<template>
  <div>
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'Initial Value',
      message: ''
    }
  },
  watch: {
    value(newValue, oldValue) {
      // 在value属性变化时执行的操作
      this.message = 'Value changed: ' + newValue;
    }
  }
}
</script>

Vue.component('my-component', {
  // 组件的选项
  template: '<div>This is a custom component</div>'
})

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<template>
  <div>
    <my-component :message="message"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from parent component'
    }
  }
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})
export default store

npm install vue-router
# 或者
yarn add vue-router

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',         // 路由路径
    component: Home    // 对应的视图组件
  },
  {
    path: '/about',
    component: About
  }
  // 其他路由配置
]
const router = new VueRouter({
  routes // 使用配置文件中的路由规则
})
export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由配置

new Vue({
  el: '#app',
  router, // 使用路由配置
  render: h => h(App)
})

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<template>
  <div>
    <button @click="showModal">Show Modal</button>
    <teleport to="#modal-container">
      <Modal v-if="isModalVisible" @close="closeModal" />
    </teleport>
  </div>
</template>

<template>
  <div>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <v-fragment>
      <p>Paragraph 3</p>
      <p>Paragraph 4</p>
    </v-fragment>
  </div>
</template>

import { createApp } from 'vue';
const app = createApp(App);
app.mount('#app');

app.component('my-component', MyComponent);

import { defineComponent, ref, mix } from 'vue';
const mixin = {
  data() {
    return {
      message: 'Hello from mixin'
    };
  }
};
const MyComponent = defineComponent({
  mixins: [mixin],
  setup() {
    const count = ref(0);
    return {
      count
    };
  },
  template: `
    <div>
      {{ message }}
      {{ count }}
    </div>
  `
});

app.directive('my-directive', {
  // 自定义指令的定义
});

import { ref } from 'vue';
const count = ref(0); // 创建一个包装数字的 ref

import { reactive } from 'vue';
const person = reactive({
  name: 'Alice',
  age: 30
}); // 创建一个包含多个属性的响应式对象