打卡学习-Vue2.x（二）

MINT
186 阅读3分钟

菜鸡打卡

1.列举 Vue 中常用的指令

  • v-model:实现双向数据绑定;
  • v-bind: 绑定属性;
  • v-on:注册事件;
  • v-html: 设置标签内容(允许内容 html)
  • v-text: 设置标签的内容(不允许包含 html)
  • v-clack: 解决插值表达式闪烁问题
  • V-for: 循环遍历数组或对象
  • v-if：判断
  • ...

2.Vue 有哪些常用的事件修饰符?

  • .prevent: 阻止默认事件;
  • .stop: 阻止冒泡;
  • .once: 事件执行一次;
  • .self: 只当在 event.target 是当前元素自身时触发处理函数
  • ...

3.Vue 中如何解决插值表达式闪烁问题?

  1. 使用 v-html 或 v-text 替代插值表达式;

  2. 使用 v-clack 解决插值表达式闪烁

  • 第一步:声明属性选择器[v-clack]{display:none}

  • 第二步:在插值表达式所在标签添加属性 v-clack

4.Vue 路由中如何实现通过锚点值的改变切换组件?

通过监听 hashchange 事件, 具体如下:

window.addEventListener('hashchange', function() {
    console.log('hash change');
})

5.vue 中如何实现给样式添加作用域?说明其实现原理

vue 中要给样式添加作用域, 只需要给 style 标签添加 scoped 属性即可.

实现原理:

添加了scoped 属性的style 标签内的样式会被改写成一个交集选择器, 会在原来类名的基础上添加一个随机属性(如.container[v-abcde]), 同时 引 用 该 类 名 的 标 签 也 会 添 加 一 个 相 同 的 属 性, 如 <div class="container" v-abcde></div>) , 这样的话, 这个类名就可以对引用它的标签生效, 同时不会影响其他同类名的标签.

6.Vue 中有何优化页面的加载效率?

  1. 使用路由懒加载和组件懒加载;
  2. 不要打包一些公共的依赖(vue, 组件库);
  3. 使用 CDN 加载这些依赖文件
  4. ...

7.什么是路由懒加载? 路由懒加载有什么好处? 如何实现路由懒加载?

路由懒加载是指通过异步的方式来加载对应的路由组件(默认情况是将所有的组件全部加载并打包).

路由懒加载的好处: 可以提高页面的加载速度, 尤其是首页的加载速度(因为使用了懒加载后, 加载首页的时候, 就不需要加载其他页面对应的组件, 在需要的时候再加载)

具体实现：

import Vue from 'vue';
import Router from 'vue-router';
// 异步导入组件
// 异步加载方式一
const List = resolve => require(['@/components/list'], resolve);
// 异步加载方式二
const Detail = () => import(/* webpackChunkName: "group-master" */ '@/components/detail')
Vue.use(Router);
export default new Router({
  // 路由规则
  routes:[
      {path:'/list',component:List},
      {path:'/detail',component:Detail}
  ],
  // 路由模式: 默认 hash, 可选值 hash(如#/index)|history(/index)
  mode:'history'
});

8.Vue 中如何触发一个自定义事件?如何监听自定义事件的执行?中如何移除自定义事件?

自定义事件:通过 this.$emit(event, '数据') 可以触发自定义事件的执行.

监听自定义事件：通过 this.$on(event,callback)可以监听自定义事件的执行

移除自定义事件: 通过this.$off(event,callback)可以移除一个自定义事件; 如果某些特殊场景下, 一个事件被触发一次后就需要将其移除,可以使用this.$once(event,callback)进行事件注册

9.Vue 中 keep-alive 组件的作用是什么?

keep-alive 可以将被包裹的组件暂存在内存当中, 当页面切换的时候, 组件不会被重复的销毁和创建, 从而可以提高整体性能, 同时也可以保存组件的一些状态

10.vue 实例中有哪些属性?

  • vm.$data 可以获取 vm 实例对象 data 中的数据;
  • vm.$props 可以获取 vm 组件接收到的 props 对象数据;
  • vm.$el 可以获取 vm 实例对象的根 dom 元素;
let MyComponent = 
Vue.extend({ 
  template: 
   '<div>Hello!</div>'
})

let vm = new MyComponent().$mount() 
document.getElementById('app').appendChild(vm.$el)
  • vm.$refs 可以获取 vm 实例中注册过 ref 特性的所有 dom 元素和组件实例.
avatar
文章
阅读
粉丝