前端须知知识点

最新推荐文章于 2024-01-26 16:28:09 发布

yy_qq吴

最新推荐文章于 2024-01-26 16:28:09 发布

阅读量458

点赞数

分类专栏：前端面试文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40889256/article/details/107362096

版权

前端面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.active-class是哪个组件的属性？嵌套路由怎么定义?

(1)active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换。
(2)嵌套路由定义
只需要我们在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。
index.html，只有一个路由出口

<div id="app">  
    <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->  
    <router-view></router-view>  
</div>

main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。

import Vue from 'vue'  
import VueRouter from 'vue-router'  
Vue.use(VueRouter)  
 
//引入两个组件 
import home from "./home.vue"  
import game from "./game.vue"  
//定义路由  
const routes = [  
    { path: "/", redirect: "/home" },//重定向,指向了home组件  
    {  
        path: "/home", component: home,  
        children: [  
            { path: "/home/game", component: game }  
        ]  
    }  
]  
//创建路由实例  
const router = new VueRouter({routes})  
 
new Vue({  
    el: '#app',  
    data: {  
    },  
    methods: {  
    },  
    router  
})
————————————————
版权声明：本文为CSDN博主「超级吴小迪」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43606158/article/details/99132101

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

<template>  
    <div>  
        <h3>首页</h3>  
        <router-link to="/home/game">  
            <button>显示<tton>  
        </router-link>  
        <router-view></router-view>  
    </div>  
</template>

game.vue

<template>  
    <h3>游戏</h3>  
</template>

现在的game组件就是home组件的子级路由了。如果还要嵌套继续在game中加children就可以了。

2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

在router目录下的index.js文件中，对path属性加上/:id。获取:使用router对象的params.id。

3.vue-router有哪几种导航钩子？

(1)全局守卫：router.beforeEach。
(2)全局解析守卫：router.beforeResolve。
(3)全局后置钩子：router.afterEach。
(4)路由独享的守卫：beforeEnter。
(5)组件内的守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

4.scss是什么?使用步骤是?有哪几大特性?

（1）scss是sass 3引入新的语法，其语法完全兼容css3，并且继承了sass的强大功能。唯一不同的是，scss需要使用分号和花括号而不是换行和缩进。scss对空白符号不敏感。其次文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名；语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
（2）使用步骤:
1).用npm安装sass的依赖包（可使用cnpm淘宝镜像）。

npm install --save-dev sass-loader
npm install --save-dev node-sass

2).在build目录下找到webpack.base.conf.js文件，在module的rules中插入以下代码。

{
   test: /\.sass$/,
   loaders: ['style', 'css', 'sass']
},

3).在vue文件中使用sass

  <style lang="scss">

（3）scss10大常用特性
一、（节点）可嵌套性
二、变量
变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似js里的变量）。
三、 Mixins(混合@mixin)：可重用性高，可以注入任何东西
注意点：
1.可以相互调用，但是不能拿自己调用自己，形成递归
2.通过@include引用
例子：

@mixin banner {
　　width: 100%;
　　position: relative;
　　color: $deeepBlue;
　　.banner-content {
        position: absolute;
        top: 50px;
        width: 100%;
　　}
}
.lead-banner {
　　@include banner;
}

四、@extend：允许一个选择器继承另一个选择器

例子:

.a1 {
　　color: blue;
}
.a2 {
　　@extend .a1;
　　font-size: 12px;
}

五、 @function:函数功能，用户使用@function可以去编写自己的函数（常用）
使用语法：使用 @function+函数名称，每个函数都需要有返回值的内容
例子:

@function du($r) {
　　@return $r*2
}
.a8 {
　　border: solid #{du(2)}px red;
}

六、引用父元素&：在编译时，&将被替换成父选择符（常用）
例子:

a {
　　font-size: 20px;
　　text-decoration: none;
　　&:hover {
        text-decoration: underline;
　　}
}

编译后:

a {
　　font-size: 20px;
　　text-decoration: none;
}
a:hover {
　　text-decoration: underline;
}

七、计算功能（会用但是不多吧）
例子:

p {
　　margin: 20px + 30px;
　　width: (100% / 6)；
}

编译后：

p {
　　margin: 50px;
　　width: 16.6666666667%;
}

八、组合连接： #{} ：变量连接字符串（目前用到的是这个）
例子：

$name: foo;
$attr: border;
p.#{$name} {
　　#{$attr}-color: blur;
}

被编译为：

p.foo {
　　border-color: blur;
}

九、循环语句：（很少用到）

例子：

@for $i from 1 to 10 {
　　.a5_img#{$i} {
        background-image: url('images/img#{$i}.png');
　　}
}
@while $j>0 {
　　.a5_img#{$j} {
        background-image: url('images/img#{$j}.png');
　　}
　　$j:$j - 1;
}
@each $item in 1,2,3,4,5 {
　　.a5_img#{$item} {
        background-image: url('images/img#{$item}.png');
　　}
}

十、if语句：（很少用到）

例子：

@mixin bgcolor($b) {
　　@if($b==5) {
        background-color: #fff;
　　} @else if($b == 6) {
        background-color: green;
　　} @else {
        background: blue;
　　}
}

5.mint-ui是什么?怎么使用?至少说出三个组件的使用方法?

mint-ui是基于vue的前端组件库。npm安装，然后import样式和js，vue.use(mintUi)全局引入。在单个组件局部引入：import { Toast } from ‘mint-ui’。组件一：Toast(“登录成功”)；组件二：mint-header；组件三：mint-swiper。

6.v-model是什么?怎么使用?vue中标签怎么绑定事件?

1.vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
2. v-model也可以和.lazy、.trim和.number这些修饰符一起使用。

<!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步 -->
<input v-model.lazy="msg" >
<!--去除字符串首尾的空格-->
<input v-model.trim="msg">
<!--将数据转化为值类型-->
<input v-model.number="age" type="number">

.trim和.number的用法比较简单，这里就不做过多解释。.lazy相当于一个延迟加载的过程。在上面我们讲过相当于一个语法糖<input :value=“test” @input=“test = $event.target.value”>，v-model.lazy只有当焦点移除input时才会触发事件。下图1位v-model效果，图2位v-model.lazy效果。
在这里插入图片描述
v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件
自定义组件使用v-model，应该有以下操作：
1.接收一个value prop
2. 触发input事件，并传入新值
在原生表单元素中：

<input v-model="inputValue">

相当于：

<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value">

在自定义组件中：

<my-component v-model="inputValue"></my-component>

相当于：

<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component>

这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。

this.$emit('input', value)

vue中标签是怎么绑定事件的?
一、前言
vuejs中的事件绑定，使用<v-on:事件名 = 函数名>来完成的，这里函数名是定义在Vue实例中的methods对象中的，Vue实例可以直接访问其中的方法。

二、事件绑定方式
1、直接在标签中写js方法

<button v-on:click="alert（'hi'）">执行方法的第一种写法</button>

2、调用method的办法

<button v-on:click="run()">执行方法的第一种写法</button>
<button @click="run()">执行方法的 简写 写法</button>
export default {     
      data () { 
        return {
          msg: '你好vue',
          list:[]      
        }
      },
      methods:{
           run:function(){
              alert('这是一个方法');
             }
           }
 }

（1）方法传参，方法直接在调用时在方法内传入参数

 <button @click="deleteData('111')">执行方法传值111</button>
 
      <button @click="deleteData('222')">执行方法传值2222</button>
 deleteData(val){
            alert(val);
        },

（2）传入事件对象

<button data-aid='123' @click="eventFn($event)">事件对象</button>
eventFn(e){
          console.log(e);
          // e.srcElement  dom节点
          e.srcElement.style.background='red';
          console.log(e.srcElement.dataset.aid);  /*获取自定义属性的值*/
        }

三、事件修饰符
1、stop //阻止事件继续传播即阻止它的捕获和冒泡过程
方法一： @click=‘show($event)’ 我们有了事件对象后，我们函数中是不是就可以利用原生中的e.cancelBubble=true；

方法二： @click.stop=‘show()’ 只要在事件后面加 .stop 就可以阻止事件冒泡;
举个例子：
实例：如下点击内部点击，阻止了冒泡过程，即只执行tz这个方法，如果不加.stop，先执行tz方法，后执行gett方法。即通过了冒泡这个过程。

<div v-on:click="gett">
   外部点击
   <div  v-on:click.stop="tz">内部点击</div>
</div>

2、prevent //阻止默认事件：
方法一： @click=‘show($event)’ 我们有了事件对象后，我们函数中是不是就可以利用原生中的 e.preventDefault();

方法二： @click.prevent=‘show()’ 只要在事件后面加 .prevent 就可以阻止默认事件。
举个例子：阻止了a标签的默认刷新

<a href="" v-on:click.prevent>点击</a>

3、capture // 添加事件监听器时使用事件捕获模式，即在捕获模式下触发
实例：在点击最里层的点击6时，gett方法先执行，因为gett方法在捕获模式执行的，先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。

<div v-on:click.capture="gett">外部点击5
    <div  v-on:click="tz">内部点击5
        <div  v-on:click="set">点击6</div>
    </div>
</div>

4、self //当前元素自身时触发处理函数时才会触发函数
原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数。

实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件。

<div v-on:click.self="gett">
   外部点击1
   <div  v-on:click="tz">内部点击2</div>
</div>

5、once //只触发一次
实例：

<div  v-on:click.once="tz">once</div>

6、键盘事件
方法一：@keydown=‘show()’ 当然我们传个$event 也可以在函数中获 ev.keyCode

if(ev.keyCode==13){
    alert('你按了回车键！')
}

方法二：
<input type=“text” @keyup.enter=“show()”>回车执行
<input type=“text” @keydown.up=‘show()’ >上键执行
<input type=“text” @keydown.down=‘show()’ >下键执行
<input type=“text” @keydown.left=‘show()’ >左键执行
<input type=“text” @keydown.right=‘show()’ >右键执行

7.调用axios.post(‘api/user’)是进行什么操作?axios.put(‘api/user/8’)呢?

8.谈谈对vue组件化的理解。

一、基础概念:
1.概念:组件是html、css、js等的一个聚合体。
2.为什么要使用组件?
1.组件化
将一个具备完整功能的项目的一部分进行多处使用
加快项目的进度
可以进行项目的复用
2.要想实现组件化，我们使用的这一部分必须是完整的，这个完整的整体称之为组件。
3、vue将html、css、js、img等聚合体放在一起组成的文件称之为单文件组件，后缀名为vue（xxx.vue）。
二、组件的创建

引入vue.js文件之后，会向全局暴露一个Vue构造器函数
Vue.extend()是 vue 用来扩展 vue 功能（组件）的
Vue.extend()实例化与new Vue()是一样的，几乎没有区别，所以借鉴react，vue决定组件要以标签的形式呈现
为了符合html/html5的规则，所有组件的标签化使用必须先注册（即创建）
说明白点注册就是将标签化的组件解析为html能识别的标签，因为自己创建的标签需要符合html规则，让html正确解析该组件标签
组件必须先注册再使用，使用是在实例范围内使用
组件名称可以小写加-命名如：header-title
大驼峰如：GabrielLi 使用的时候写gabriel-li （注册的时候写的是大写，使用的时候写小写加-，因为浏览器会自动将大写解析成小写）
一个单词大写，注意不要和原生的h5标签重名，比如 header footer
1.全局注册

<div id="app">
    <Father></Father>   <!-- 组件注册一次就可以在不同的实例中使用  -->
</div>
<div id="root">
    <Father></Father>   <!-- 组件注册一次就可以在不同的实例中使用  -->
</div>

//组件的创建：Vue.component( 组件的名称，组件的配置项 )  
var Hello = Vue.extend({
    template:'<div>这是father组件</div>'  
})
Vue.component('Father',Hello)  // 组件Father不能在实例范围外使用

new Vue({
    el:'#app'
})
new Vue({
    el:'#root'
})

2.局部注册
局部注册在组件中用一个components的配置项来表示，只能在注册的范围内使用，其他地方不能使用

<div id="app">
    <zhang-san></zhang-san>
</div>

var Hello = Vue.extend({
    template:'<div> 这里是组件 </div>'
})
new Vue({
	el:'#app',
    components:{
        'zhang-san':Hello  //key:value  key是组件名称  value是组件配置项
    }
})

3.简写

<div id="app">
    <gabriel-li></gabriel-li>   <!-- 输出结果为 “局部注册”  -->
    <Father></Father>   <!-- 输出结果为 “全局注册”  -->
</div>

Vue.component('Father',{
    template:'<div> 全局注册 </div>'
})
new Vue({
    el:'#app',
    components:{
        'GabrielLi':{
            template:'<div> 局部注册 </div>'
        }
    }
})

三、组件的嵌套

父组件里面放子组件，类似dom结构的父子级结构将子组件以标签的形式放在父组件的模板中使用，千万不要放在父组件的内容中

<div id="app">
    <Father></Father>
</div>

Vue.component('Father',{
    template:'<div> Father <Son></Son> </div>'
})
Vue.component('Son',{
    template:'<div> son </div>'
})
new Vue({
    el:'#app'
})

局部的写法

new Vue({
    el: '#app',
    components: {
      'Father': {
        template: '<div> father组件 <Son></Son></div>',
        components: {
          'Son': {
            template: '<div> son组件 </div>'   // son组件嵌套在father组件中
          }
        }
      }
    }
  })

四、组件的特殊使用规则
1、使用规则之is规则
如果直属父子级直接组件以标签化形式使用，会有bug

<div id="app">
    <table>
<!-- <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <Hello></Hello>   上述这种方法会有bug -->
      <tr is = "Hello"></tr>   <!-- 通过is来绑定组件 -->
    </table>
</div>

 Vue.component('Hello',{
    template: '<tr> <td> 4 </td> <td> 2 </td><td> 3 </td></tr>'
  })
  new Vue({
    el: '#app'
  })

2、实例范围外使用
实例范围外template标签中的代码是不会被直接解析的

<div id="app">
<template>  <!--  该段代码会原样呈现在html结构中，不会被解析 -->
    <div>
      <ul>
        <li>1</li>
        <li>2</li>
      </ul>
    </div>
  </template>
</div>

Vue.component('Hello',{
    template: ''
  })
  new Vue({
    el: '#app'
  })

需要正确使用template，可以采用实例范围外方法，但是需要修改部分代码

<div id="#app">
  <Hello></Hello>  <!--  使用Hello组件 -->
    <template id="hello">   <!--但是使用第二种template使用后，有个弊端，`<template></template>`标签结构会在html文件中显示,解决： 使用webpack、gulp等工具编译，将来要用vue提供的单文件组件-->
    <div>
      	<ul>
        	<li>1</li>
        	<li>2</li>
     	 </ul>
    </div>
  </template>
</div>

Vue.component('Hello',{
    template: '#Hello'
  })
  new Vue({
    el: '#app'
  })

9.谈谈对Vue路由的理解。

10.谈谈你对Vue钩子函数的理解。
11.如何让css只在当前页面起作用。
在style标签内加scoped。
12.created和mounted的区别,分别什么时候用?
13.vue采用什么技术实现双向数据绑定?
14.描述下vue从初始化页面-修改数据-刷新页面UI的过程?
15.Vue中watch、methods和计算属性的区别是什么?
16.vue中怎么重置data？
17.Vue组件中写name选项有什么作用?
18.Vuex有哪几种属性?

19.vue的优点是什么?
VUE的特性
1、轻量级的框架
2、双向数据绑定
3、指令
4、插件化
vue的优点
1、简单易用
2、灵活渐进式
3、轻量高效
（3-1）、压索之后20KB大小
（3-2）、虚拟DOM
4、MVVM
（4-1）、数据驱动视图
（4-2）、常规的操作方式都是DOM
（4-3）、普通的javascript数据
5、组件化
组件化优点
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发

20.说出至少4种vue当中的指令和它的用法?
21.vuex的store特性是什么?
22.vuex的mutation特性是什么?
23.vuex如何区分state是外部直接修改，还是通过mutation方法修改的?
24.不用vuex会带来什么问题?
25.v-show与v-if区别?
区别:
1.手段：v-if是通过控制dom节点的存在与否来控制元素的显隐;v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
2.编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换；
3.编译条件：v-if是惰性的，如果初始条件为假，则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后，然后再切换的时候进行局部卸载);v-show是在任何条件下(首次条件是否为真)都被编译，然后被缓存，而且DOM元素保留。
4.性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

26.Class与Style如何动态绑定?
class可以通过对象语法和数组语法进行动态绑定:
1.对象语法:

data:{ isActive:true, hasError:false } 2.数组语法:

data:{ activeClass:'active', errorClass:'text-danger' } Style也可以通过对象语法和数组语法进行动态绑定：对象语法:

data:{ activeColor:'red', fontSize:30 } 数组语法:

data:{ styleColor:{ color:'red' }, styleSize:{ fontSize:'23px' } } 30.说说Vue中的事件修饰符。

yy_qq吴

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端须知知识点

1.active-class是哪个组件的属性？嵌套路由怎么定义?(1)active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换。(2)嵌套路由定义index.html，只有一个路由出口
复制链接

扫一扫