面试题总结

分享一波前端面试题供各位阅读

1. vue生命周期

  • 在VUE中每个组价都是独立的,每个组件都有属于自己的生命周期,从一个组件的**创建、数据初始化、挂载、更新、销毁、**这就是一个组件所谓的生命周期。

  • 生命周期的8个钩子函数分别为

    实例创建之前:beforeCreate(){},把传入的data属性的内容,赋给vue对象。即:把形参中data的属性赋给vue对象,前后分别的钩子函数是:beforeCreate、created

    **实例创建后:**created(){}

    **初始化之前:**beforeMount(),把vue对象中data渲染到dom对象上,前后分别的钩子函数是:beforeMount、mounted

    **实例初始化:**mounted(){}

    **数据同步前:**beforeUpdata(){},当数据发生变化时,会触发组件的更新。

    **数据同步后:**updata(){}

    **实例销毁前:**beforeDestroy(){}

    **实例销毁后:**destoryed(){}

    如果组件在缓存的话,那么,组件切换时,会调用的钩子函数是:

    activated 和 deactivated

2.VUE中常用指令

  • **v-model=变量 ** ( 必须绑定在表单元素上) 数据双向绑定
  • v-show=“true/false” 动态的display-block与none
  • **v-bind ** 简写 :src=变量 作用:绑定js原生属性
  • v-on 绑定事件
  • **v-for ** 循环遍历数据
  • v-if v-else v-else-if 条件语句
  • v-text v-html 文本展示
  • v-noce 只渲染该元素或组件一次
  • v-cloak 解决插值表达式闪屏问题
<style>
	[v-cloak]{
		display: none;
	}
</stye>
<div id="#app" v-cloak></div>
<script>
	new Vue({
		el: '#app',
		data: {},
		methods: {}
	})
</script>

3. v-if 和 v-show 的共同点与区别:

  • **共同点:**都能实现元素的显示与隐藏

  • 区别:

    • v-show只是简单的控制元素的display属性,而v-if才是条件渲染,条件为真,元素就会被渲染,条件为假,元素就会被销毁

    • v-show首次渲染占用资源多

    • v-if切换的时候会导致页面重绘,切换开销大

4.VUE数据双向绑定

  • 实现原理: 数据劫持 发布者订阅者模式 (一对多)
  • Vue 框架核心的功能就是数据双向绑定,双向是指:HTML标签数据绑定到vue对象,另外反方向数据也是绑定的
  • 使用v-model指令来实现双向数据绑定,把视图数据与模型数据相互绑定

5.VUE 组件传值(父子,兄弟)

  • 父子组件正向传值:

    • 父组件通过在子组件里面发送一条数据

    • props验证接收,props是一个属性,可以用来接收外部传入当前组件的数据

      // 使用props验证
          props:{
          	//验证数据类型
              ziProps:Number,
              
              // 既验证数据类型又验证他不能为空
              zione:{
                  type:String,
                  required:true
              },
              //既验证数据类型又设置默认值
              zitwo:{
                  type:String,
                  default:"我是默认值"
              }
          }
      
  • 父子组件逆向传值:

    • 逆向传值默认是不被允许的,必须通过事件来发出一个自定义事件的抛出

      抛出:

      // 1.通过事件触发抛出
      <button @click="fun()">点我进行逆向传值</button>
      //2.开始抛出
      methods:{
      	fun(){
      	//this.$emit("抛出的自定义事件名","抛出的数据")
      	this.$emit("zipao","我是子元素抛出的数据")
      	}
      }
      

      **接收:**在子组件被调用的时候使用@绑定抛出事件,调用父组件函数不加()

      //调用子组件的时候
      <zi @zipao="fun"></zi>
      //3.调用自定义事件,但是父组件不加()
      
      methods:{
      	fun(v){
      		console.log(v)
      		//在函数中,必须要有形参!!! 形参用来接收数据 这个形参就是子组件抛出的数据
      	}
      }
      
  • 兄弟组件传值:

    可以通过中央事件总线来传值

    1.在src下创建一个文件夹用来存放xxx.js文件,在其中只创建一个Vue实例,以后它就承担起了组件之间通信的桥梁,也就是事件总线

    //事件总线
    import Vue from “vue”
    
    export  default new Vue
    

    2.创建一个A组件,引入事件总线的js文件,接着添加一个按钮并绑定单击事件,进行自定义事件的抛出

    </button @click="fun()">点我兄弟组件传值</button>
    
    import   eventBus   from   '@/assets/eventBus.js'
    
    methods:{
    
    ​		fun(){
    
    ​			eventBus.$emit("pao","我是数据")
    
    ​		}
    
    } 
    

    3.再创建一个B组件,引入eventBus事件总线。在mounted钩子监听了自定义事件,并把传递过来的字符串参数传递给了on监听器的回调函数

    $on:监听当前实例上的自定义事件

    mounted(){
    
    ​		eventBus.$on("pao",(msg)=>{
    
    ​				this.text=msg
    
    ​		})
    
    }
    

    将传递回来的新值赋予给text。页面上就会显示出兄弟元素传递来的值

6. VUE路由模式

  • hash模式,url里面永远带着#号,我们在开发中默认使用这个模式,

    history模式没有#号,是个正常的url ,适合推广宣传。history模式有一个问题就是,做刷新操作,会出现404错误,那么就需要后端人配合,让他配置一下apache或是nginx的url重定向,重定向到你的首页路由地址上。

7. Keep-alive

  • 当我们不停的切换标签页面的时候(例如二级路由),我们选择好的状态就会丢失,原因就是每次切换的时候,Vue都创建了一个新的组件实例,因此,用标签将路由出口包裹起来,在切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验

8. Vue3.0新特性

#### 1、双向绑定

2.0现有限制:

- 无法检测到新的属性添加/删除
- 无法监听数组的变化
- 需要深度遍历,浪费内存

3.0优化:

- 使用 ES6的Proxy 作为其观察者机制,取代之前使用的Object.defineProperty。Proxy默认可以支持数组
- 允许框架拦截对象上的操作
- 多层对象嵌套,使用懒代理

#### 2、虚拟DOM

2.0 VDOM性能瓶颈:
\* 虽然vue能够保证触发更新的组件最小化,但单个组件部分变化需要遍历该组件的整个vdom树
\* 传统vdom性能跟模版大小正相关,跟动态节点的数量无关
3.0优化工作
在 vue 3.0 中重新推翻后重写了虚拟 DOM 的实现,官方宣称渲染速度最快可以翻倍。更多编译时的优化以减少运行时的开销

#### 3、Tree-Shaking

2.0现有限制: 并不是每个人都使用框架的所有功能,但仍需下载/解析相应代码
3.0优化:将大多数全局API和内部组件移至ES模块导出,tree-shaking更友好
4.Composition API
使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高,代码量会不断的加大;由于相关业务的代码需要遵循option的配置写到特定的区域,导致后续维护非常的复杂,同时代码可复用性不高,而composition-api就是为了解决这个问题而生的
\*	state更名为reactive
	reactive等价于 Vue 2.x 的Vue.observable(),用于获取一个对象的响应性代理对象
	value更名为ref,并提供isRef和toRefs
	watch可作用于单一函数
5.Object.defineProperty -> Proxy
	Object.defineProperty是一个相对比较昂贵的操作,因为它直接操作对象的属性,颗粒度比较小。将它替换为es6的Proxy,在目标对象之上架了一层拦截,代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作,颗粒度变大。

javascript引擎在解析的时候希望对象的结构越稳定越好,如果对象一直在变,可优化性降低,proxy不需要对原始对象做太多操作。

9. JS基本数据类型

  • js中有5种数据类型:Undefined、Null、Boolean、Number和String。
  • 还有一种复杂的数据类型Object,Object本质是一组无序du的名值对组成的。

10. 数组去重

  • 1.利用ES6 Set 去重(ES6中最常用,代码最少)

    let arr = [4, 1, 3, 3, 2, '2'];
    let uniqueArr = [...new Set(arr)];
    console.log(uniqueArr); 
    
  • 2 利用for for循环嵌套,然后splice去重(ES5中最常用)

    //示例数组
    var a = [1, 3, 2, 4, 5, 3, 2, 1, 4, 6, 7, 7, 6, 6];                        
     var b = [];
    
        for(var i = 0; i < a.length; i++) {
            var status = 0;
            for(var j = 0; j < b.length; j++) {
                if(a[i] == b[j]) {
                    status = 1;
                    break;
                }
            }
            if(status == 0) {
                b.push(a[i]);
            }
        }
    	console.log(b)
    
  • 3.利用index Of 去重

    var arr=[1,1,2,2,3,3,4,5]
    var array=[]
    for (var i=0;i<arr.length;i++){
    	if(array.indexof(arr[i])===-1){
    		array.push(arr[i])
    	}
    }
    console.log(array)
    

11. 深拷贝和浅拷贝

  • 浅拷贝:只是增加了一个指针指向已存在的内存地址,

    深拷贝:是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存,

12. Js中如何实现每隔几秒调用一个函数

  • 定时器
  • **开启计时器:**setInterval(要执行的函数名,间隔时间);
  • **关闭定时器:**clearInterval(定时器名称);

13. 箭头函数

  • 箭头函数是匿名函数,不能作为构造函数,不能使用new
  • 箭头函数不绑定-,取而代之用rest参数…解决
  • 箭头函数不绑定this,会捕获其所在的上下文的this值,作为自己的this值
  • 箭头函数通过 call() 或 apply() 方法调用一个函数时,只传call()与.apply()区别 入了一个参数,对 this 并没有影响。
  • 箭头函数没有原型属性
  • 箭头函数不能当做Generator函数,不能使用yield关键字

14. BOM 和DOM的区别

  • 1、BOM是Browser Object Model的缩写,即浏览器对象模型。

    BOM和浏览器关系密切。浏览器的很多东西可以通过JavaScript控制的,例如打开新窗口、打开新选项卡(标签页)、关闭页面,把网页设为主页,或加入收藏夹,等等…这些涉及到的对象就是BOM。

    2、DOM是Document Object Model的缩写,即文档对象模型。

    DOM和文档有关,这里的文档指的是网页,也就是HTML文档。网页是由服务器发送给客户端浏览器的,无论用什么浏览器,接收到的HTML都是一样的,所以DOM和浏览器无关,它关注的是网页本身的内容。由于和浏览器关系不大,所以标准就好定了

    BOM的最根本对象是window。

    DOM最根本对象是document(实际上是window.document)

15. 事件冒泡和事件捕获

  • 事件冒泡: 事件由内向外冒泡,点击时候先触发最里面元素的事件

  • 事件捕获:从外向内触发,

  • 阻止事件冒泡的两种方法:

      1. event.stopPropagation(); 只阻止事件往上冒泡,不阻止事件本身。
      1. return false; 不仅阻止了事件往上冒泡,而且阻止了事件本身

16. display的值

  • block 此元素将显示为块级元素,此元素前后会带有换行符。

    none 此元素不会被显示。

    inline: 行内元素

    inline-block 行内块元素。

    list-item 此元素会作为列表显示。

    table 此元素会作为块级表格来显示

    inherit 规定应该从父元素继承 display 属性的值

17. Css选择器有哪些

  • 通配符

  • 元素选择器

  • 类选择器

  • ID选择器

  • 派生选择穷器

    • 后代选择器
    • 子元素选择器
    • 相邻兄弟选择器
  • 属性选择器

18.常用伪类选择器及其应用场景

  • :hove 鼠标划入更改样式
  • :after 在某个元素之后加入某些内容
  • :before 此伪类是在某个元素之前加入某些内容
  • :visited 向已被访问的链接添加样式
  • :first-child 向元素的第一个子元素添加样式。伪类选择器
  • :active 点击转换样式

19. Margin和padding

  • margin: 块级元素外边距,会发生margin传递
  • padding: 块级元素内填充,会撑大元素

20.Css3 flex布局

  • display: flax 添加给容器,让父元素成为弹性布局容器

  • flex-direction 添加给容器 决定主轴的方向 row主轴为水平方向 colum主轴方向为垂直

  • flex-wrap 添加给容器 换行操作

  • flex-flow 添加给容器

  • justify-content 添加给容器 定义了项目在主轴上的对齐方式

  • align-items 添加给容器 定义项目在侧轴上如何对齐。

  • align-content 添加给容器定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

  • 以下6个属性设置在项目上。

    • order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0

    • flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

    • flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

    • flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

    • flex 属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。 flex:1 独占一份,自适应容器剩余空间

    • align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

21.Xss攻击

  • 什么是XSS攻击?

XSS又叫CSS (Cross Site Script) ,跨站脚本攻击。它指的是恶意攻击者往Web页面里插入恶意html代码,当用户浏览该页之时,嵌入其中Web里面的html代码会被执行,从而达到恶意的特殊目的。XSS属于被动式的攻击,因为其被动且不好利用,所以许多人常呼略其危害性。

在WEB2.0时代,强调的是互动,使得用户输入信息的机会大增,在这个情况下,我们作为开发者,在开发的时候,要提高警惕。

  • XSS攻击的主要途径

XSS攻击方法只是利用HTML的属性,作各种的尝试,找出注入的方法。现在对三种主要方式进行分析。
第一种:对普通的用户输入,页面原样内容输出。

  • XSS攻击的解决办法

    请记住两条原则:过滤输入和转义输出

    具体执行的方式有以下几点:
    第一、在输入方面对所有用户提交内容进行可靠的输入验证,提交内容包括URL、查询关键字、http头、post数据等

    第二、在输出方面,在用户输内容中使用标签。标签内的内容不会解释,直接显示。

    第三、严格执行字符输入字数控制。

    四、在脚本执行区中,应绝无用户输入。

22. 子元素和父元素不加宽高,子元素居中的三种方法。

  • 一、inline-block、text-align:center
    • 特点:适应性好,IE6、IE7不兼容inline-block。text-align:center会导致子元素的内容也居中。
<style>
    .parent{
        text-align: center;
    }
    .child{
        display: inline-block;/*宽度跟内容变化*/
    }
</style>
  • 二、absolute+transform

    • 特点:子元素不会影响其他元素,transform是CSS3内容,不兼容IE6、IE7、IE8。
    <style type="text/css">
        .parent{
            position: relative;
        }
        .child{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);/*向左移自身宽度一半*/
        }
    </style>
    
  • 三、flex+justify-content

    特点:只对父容器设置,是CSS3内容,不兼容IE6、IE7、IE8。

    <style type="text/css">
     .parent{
            display: flex;
            justify-content: center;/*设置了这个就用用设置子元素margin: 0 auto*/
     } .child{ margin: 0 auto;/*如果不用justify-content: center,可以用这个*/ } </style>
    

23. transform和transition

  • transform: 是2D的位移属性,translate是transform的属性值

    • transform:translate(x轴移动距离,y轴移动距离)
    • transform 有很多其它属性值,**translate3D(3D变换),scale(2D缩放)**等其他的变换方式
  • transition: 是3D动画属性

    • 语法 transition:需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行
    • 一般写法为 transition:all 1s linear

24. 浏览器兼容1360-1920(媒体查询)

  • 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

    当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    @media screen and (max-width: 300px) {
        body {
            background-color:lightblue;
        }
    }
    //all        用于所有设备
    //screen    用于电脑屏幕,平板电脑,智能手机等。
    //print 	用于打印机和打印预览
    //speech    应用于屏幕阅读器等发声设备
    
    
    其他媒体类型都已经废弃
    

25. rem的原理

  • rem是根字体大小相对单位,也就是说跟当前元素的font-size没有关系而是跟整个body的font-size有关系,例如body的字体大小是12px,那么1rem就是12px

26. 数组和字符串常见方法。

  • 数组方法:

    join(): 把数组放入字符串,默认逗号隔开,arr数组不变。

    **concat():**连接数组,返回新的数组,arr数组不变。

    slice(): 选取数组,返回选取的数组,arr数组不变。(第一个参数从哪里开始,第二个是截取到哪个(返回不包括),如果只有第一个参数0,都取。)

    push(): 数组末尾增加元素,返回数组长度,arr为增加后的数组。

    **unshift():**数组开头增加元素,返回数组长度,arr为增加后的数组。

    pop(): 数组末尾删除一个,返回删除的元素,arr为删除后的数组。

    shift(): 数组开头删除一个,返回删除的元素,arr为删除后的数组。

    splice(): 增、删、改都可以,返回增删改的元素,arr为增删改的元素。(第一个参数从哪里开始,第二个参数是删除的个数,后面的参数是增加的元素)

  • 字符串的方法:(字符串有恒定性,修改字符串不会修改本身)

    charAt(): 传入一个数组,返回选中位置的字符串,string字符串不变。

    concat(): 传入增加的字符串,返回新的字符串,string字符串不变。

    split(): 字符串分割为数组,返回新的数组,string字符串不变。

    **indexOf():**字符串首次出现的位置,返回位置,没有返回-1, string字符串不变。(第一个参数是要检索的字符,第二个参数从哪里开始检索)

    lastIndexOf(): 从后向前检索。但是下标还是从左往右算。

    replace(): replace(‘b’, ‘B’),替换。

    slice(): 跟数组方法类似。截取。

    toLowerCase(): 字符串转为小写。

    toUpperCase(): 字符串转为大写。

27. 描述一下vuex是什么

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

  • 创建vuex的store仓库(*store文件夹*),并在index.js里设置了两个常量:state和mutations,它们分别用于存储和修改*公共状态;*

  • 1.在插值表达式{{ }}中使用state的状态属性count时,写法是:{{$store.state.count}};

    2.如果需要修改这个count属性的状态值,就需要使用 s t o r e 的 c o m m i t 方 法 : store的commit方法: storecommitstore.commit(‘add’) 、

28. vue遇到的印象深刻的问题。

  • 1.路由跳转之间状态丢失问题, 解决办法:
  • 2.路由权限控制
    • 鉴权:登录后记录token,使用路由钩子beforeEach,判断是否有登陆。
    • 权限控制路由显示:动态路由,根据登录后的用户角色来匹配

29. elment-UI 结合vue-router,连续点击控制台报错问题

  • 1.把项目依赖的 node_modules 文件夹删除, 然后再 npm install 重新下载依赖包就可以解决。

  • 2.如果在重新下载依赖包时,安装的vue-router还是之前出错的那个版本,那么要怎么解决呢?解决方法也很简单,在项目目录下运行 npm i vue-router@3.0 -S 即可

  • 3.如果不想换 vue-router 的版本 或者 还是 没有用,那么可以用以下方法
    在 router 的配置文件里下添加一下代码(在use之前):

    import Router from 'vue-router'
    
    const originalPush = Router.prototype.push
    Router.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    }
    

30. 组件里面怎么用vue的state

    1. 直接在组件中使用 {{$store.state.count}}

    2. //在computed里面调用count方法,return this.$store.state.count;然后在页面中使用{{count}}
      
      
      <template>
        <div class="test">
          {{count}}  <!--步骤二-->
        </div>
      </template>
      
      <script type="text/ecmascript-6">
        export default{
          name:'test',
          data(){
            return{}
          },
          computed:{
            count(){
              return this.$store.state.count; //步骤一
            }
          }
        }
      </script>
      
    3. <template>
        <div class="test">
          {{count}}  <!--步骤三-->
        </div>
      </template>
      
      <script type="text/ecmascript-6">
        import {mapState} from 'vuex' //步骤一
        export default{
          name:'test',
          data(){
            return{}
          },
          computed:{
            ...mapState([             //步骤二,对象扩展运算符方式
              "count"
            ])
          }
        }
      

31. react里边为什么用Classname?

  • 因为class是react里面保留的类关键字,所以要

32. react中Props怎么获取,super目的是啥

  • this.props.xxxx

  • super( ) ——继承

    在class方法中,继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 super( )方法,否则新建实例时会报错。

33. 没有Consturucte还可以用props吗?

  • 如果子类没有定义constructor方法,这个方法会被默认添加,也就是说,不管有没有显示定义,任何一个子类都有constructor方法。

  • 有constructor钩子函数时候,Child类会多一个constructor方法 ,可以定义state ,如果用户不定义state,有无constructor钩子函数的时候没有区别

  • 结论: 如果组件要定义自己的state初始状态的话,需要写在constructor钩子函数中,

    如果用户不使用state的话,纯用props接受参数,有没有constructor钩子函数都可以,可以不用\constructor钩子函数。

    再者如果不使用state,那么为什么不使用 无状态组件(建议使用) 呢???

34. 怎么缓存组件,Keepalive使用后怎么触发事件,在哪里触发?

  • 用包裹需要缓存的组件的路由出口

    • 这个写法大家应该不会陌生,这也是尤大神官方推荐的缓存方法, exclude属性值可以是组件名称字符串(组件选项的name属性)或者数组,代表不缓存这些组件,所以vuex里面的addExcludeComponent是代表要缓存组件,
  • 使用后: beforeRouteEnter --> created --> mounted --> activated --> deactivated

    再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivatedcreated和mounted不会再执行

    因为这个页面需要缓存。只有第一次进入时才会执行created和mounted方法,再次进入就不执行了。而activated每次进入都执行,所以在这个钩子函数中获取数据。

  • 在activated钩子函数中执行

35. 拦截器

import axios from "axios"
// 创建axios 赋值给常量service 
const service = axios.create();

// 添加请求拦截器(Interceptors)
service.interceptors.request.use(function (config) {
    // 发送请求之前做写什么
    return config;
  }, function (error) {
    // 请求错误的时候做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });
  export default service

36. 介绍一下promise

  • **promise简介:**promise的出现,原本是为了解决回调地狱问题,把异步中回调函数的场景改写成了.then()/.catch()等函数链式调用的方式,基于promise我们可以把复杂的异步回调处理方式进行模块化

  • 使用promis封装请求

    export function demob(){
        return new Promise((resolve,reject)=>{
            return service.request({
                url:"http://1234",
                method:"get"
            }).then((ok)=>{
                resolve(ok)
            }).catch((err)=>{
                reject(err)
            }
        })
    }
    

37. VUEX怎么使用

  • 第一步 cmd进入到你的项目目录,并且输入命令
    cnpm  install vuex --save
    注:自动安装到你项目中
    第二步 在你的src新建一个store.js文件,并引入vuex
    import Vue from 'vue';//这里为固定格式照抄
    import Vuex from 'vuex';//这里为固定格式照抄
    Vue.use(Vuex);//此为引用Vuex
    第三步 设置状态常量
    假设
    const state={
        num:0
    }
    注:这里面你可以设置多个值
    第四步 你考虑这状态常量能不能被你的a.vue组件或者b.vue组件引用,所以你必须再加一行代码
    export default new Vuex.Store({
    state
    })
    第五步你可以建立一个新的模板例如a.vue
    代码如下
    <template>
        <div>
            <h2>{{msg}}</h2>
            <hr/>
            <p>{{$store.state.num}}</p>
        </div>
    </template>
    <script>
        import store from '@/store'
        export default{
            data(){
                return{
                   msg:'足球比赛',
                }
            },
            store        
        }
    </script>
    注:这里你要特别注意p标签写法,这为固定格式
    你可以观察到为0
    第六步 我们如果想加入一些方法,我们可以在store.js加入一个 mutations
    const mutations={
       jia(state){
            state.count++;//这就代表上面num加加
        },
    jian(state){
            state.count--;//同上
        }
    }
    第七步在你组件引入方法即可
    <div>
        <button @click="$store.commit('jia')">+</button>
        <button @click="$store.commit('jian')">-</button>
    </div>
    注:此为固定写法,你只需要把commit里面复制对应的方法名即可,
    当你点击加,你会观察到p值开始越变越大,点击减则相反
    

38. VUEX里面的mutation里面的方法怎么获取

  • Vuex的五大核心概念之一mutation
    mutation,更改Vuexstore中的状态的唯一方法是提交mutation
  • 也就是说,在mutation中写上自定义的方法,然后在组件的js中通过this.$store.commit("自定义的方法名")就可以更新store中的数据和状态
  • 自己理解:在state中定义数据,在mutation里面添加数据的方法,然后在组件中调用方法,并且把想要的数据添加进去

39.CSS3新增特性

  • 2.过渡 transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)复制代码

    3.动画 animation:动画名称,一个周期花费时间,运动曲线(默认ease),动画延迟(默认0),播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)复制代码

    4.形状转换 transform:适用于2D或3D转换的元素

    rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);

    5.选择器

    6.阴影 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向(默认是从里往外,设置inset就是从外往里);复制代码

    7.边框 border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量(默认0) 铺满方式–重复(repeat)、拉伸(stretch)或铺满(round)(默认:拉伸(stretch));

    8.背景 background-clip 制定背景绘制(显示)区域 background-origin background-size

    1.(background-clip: border-box;)默认情况(从边框开始绘制) 2.(background-clip: padding-box;)从padding开始绘制(显示),不算border,,相当于把border那里的背景给裁剪掉! 3.(background-clip: content-box;)只在内容区绘制(显示),不算padding和border,相当于把padding和border那里的背景给裁剪掉!

    9.反射 -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ],偏移量,遮罩图片

    10.文字 换行 语法:word-break: normal|break-all|keep-all;、语法:word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法:text-shadow:水平阴影,垂直阴影,模糊的距离,以及阴影的颜色。

    11.颜色 rgba(rgb为颜色值,a为透明度) color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”,“s:饱和度”,“l:亮度”,“a:透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码

    12.渐变

    13.Filter(滤镜):黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)

    14.弹性布局 Flex

    15.栅格布局 grid

    16.多列布局

    17.盒模型定义 box-sizing:border-box的时候,边框和padding包含在元素的宽高之内! box-sizing:content-box的时候,边框和padding不包含在元素的宽高之内!如下图

    18.媒体查询 就在监听屏幕尺寸的变化,在不同尺寸的时候显示不同的样式!在做响应式的网站里面,是必不可少的一环!

40. HTML5新增

  • 标签描述
    header文档头部区域
    footer档的尾部区域
    nav导航
    section节(section、区段)
    article独立的内容区域
    aside侧边栏内容
    detailes描述文档或文档某个部分的细节
    summary标签包含 details 元素的标题
    dialog定义对话框,比如提示框表单控件,type属性有calendar、date、time、email、URL、search;
  • 表单控件,type属性有calendar、date、time、email、URL、search;

  • 对input、select、textarea与button指定autofocus属性。它以指定属性的方式让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性,同时设置多个,则第一个生效,当输入框获取焦点时,提示字符消失。

41. 视频和音频的用法

  • 视频
<video
   src=”视频的路径”
   controls=”控制播放、暂停、音量等”
   autoplay=”自动播放”
   loop=”循环播放”
   width=”视频播放器的宽度”
   height=”视频播放器的高度”
>
</video>

  • 音频
<audio
   src=”音频的路径”
   controls=”控制播放、暂停、音量等”
   autoplay=”自动播放”
   loop=”循环播放”
></audio>

42.利用CSS3 border-radius画图

  • 圆形

    //宽高相同的时候
    
    border-radius:50%;
    
  • 2、自适应椭圆

    .example3{
        width:200px;
        height: 150px;
        border-radius:50%;
        background: #8BC34A;
    }
    
  • 3、自适应的半椭圆:沿横轴劈开的半椭圆

    .example4{
        width:200px;
        height: 150px;
        border-radius: 50% / 100% 100% 0 0;
        background: #8BC34A;
    }
    
  • 4、自适应的半椭圆:沿纵轴劈开的半椭圆

    .example5{
        width:200px;
        height: 150px;
        border-radius: 100% 0 0 100% / 50%;
        background: #8BC34A;
    }
    
  • 5、四分之一椭圆

    .example6{
        width:160px;
        height: 100px;
        border-radius: 100% 0 0 0;
        background: #8BC34A;
    }
    
  • 用椭圆绘制opera浏览器的logo

    <div class="opera">
            <div class="opera-top"></div> 
    </div>
    
    
    
    .opera{
        width:258px;
        height: 275px;
        background: #F22629;
        border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
        position: relative;
    }
    .opera-top{
        width: 112px;
        height: 231px;
        background: #FFFFFF;
        border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
        position: absolute;
        left: 50%;
        right: 50%;
        top: 50%;
        bottom: 50%;
        margin-left: -56px;
        margin-top: -115px;
    }
    
  • 7、平行四边形

    .button {
        width:200px;
        height: 100px;
        position: relative;
        left: 100px;
        line-height: 100px;
        text-align: center;
        font-weight: bolder;
    }
    .button::before {
       content: ''; /* 用伪元素来生成一个矩形 */
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      z-index: -1;
      transform: skew(45deg);
      background: #8BC34A;
    }
    
  • 8、菱形

    .example1 {
        width:140px;
        height: 140px;
        position: relative;
        left: 100px;
        line-height: 100px;
        text-align: center;
        font-weight: bolder;
    }
    .example1::before {
        content: ''; 
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
        transform: rotate(45deg);
        background: #8BC34A;
    }
    
  • 9、切角效果

    .example2{
        background: #8BC34A;
        background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
                    linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
                    linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
                    linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        
        padding: 1em 1.2em;
        max-width: 12em;
        line-height: 1.5em;
    }
    
  • 10、弧形切角

    .example3{
        background: #8BC34A;
        background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
                    radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
                    radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
                    radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
        background-size: 50% 50%;
        background-repeat: no-repeat;
        
        padding: 1em 1.2em;
        max-width: 12em;
    }
    

43. 存储数据在localstorage,如果后端变更了几条数据,你怎么修改到你的页面上

  • 第一步:使用getItem读取localstorage里面的数据和后端传来数据做对比,如果发现改变,则使用setItem将新数据写入,然后在向页面渲染

44.vue权限动态路由显示

  • 创建动态路由页面,根据后端传来的用户数据的数据权限不同,动态分发路由页面

45. vue中watch和computed的区别

  • 计算属性computed :

    \1. 支持缓存,只有依赖数据发生改变,才会重新进行计算

    \2. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化

    3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

    \4. 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed

    5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

  • 侦听属性watch:

    \1. 不支持缓存,数据变,直接会触发相应的操作;

    2.watch支持异步;

    3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;

    \4. 当一个属性发生变化时,需要执行对应的操作;一对多;

    \5. 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数,

    immediate:组件加载立即触发回调函数执行,

    deep: 深度监听,为了发现对象内部值的变化,复杂类型的数据时使用,例如数组中的对象内容的改变,注意监听数组的变动不需要这么做。注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。

46. methods里面的方法可以实现compute的和watch的功能吗

  • 不能
  • 从作用机制上
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值