Web前端总结

Vue生命周期

总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和**数据对象**data都为undefined,还未初始化。在created阶段,vue实例的数据对象data有了,$el还没有。
载入前/后:在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后:当data变化时,会触发beforeUpdate和updated方法。
销毁前/后:在执行destroy方法后,对data的改变不会再触发周期函数,说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。

vue获取数据在哪个周期函数

一般 created/beforeMount/mounted 皆可,
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作。

$route 和 $router 的区别

$router是VueRouter的实例,在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)

input类型有哪些

text:文本框

password:密框码

radio:单选按钮

checkbox:复选框

file:文件选择域

hidden:隐藏域

button:按钮

reset:重置按钮

submit:表单提交按钮

image:图片按钮,类似submit可以为按钮添加图片

JS中数组转换为字符串

<script>
    // 方法一
    var a = [1,2,3,4,5,6,7,8,9,0];  //定义数组
    var tostring = a.toString();  //把数组转换为字符串
    console.log(tostring);  //返回字符串”1,2,3,4,5,6,7,8,9,0″
    console.log(typeof tostring);  //返回字符串string,说明是字符串类型
    // 方法二
    var three = [1,2,3,4,5];  //定义数组
    var join = three.join(“==”);  //指定分隔符
    console.log(join);  //返回字符串”1==2==3==4==5″
</script>

JS字符串转换为数组

<script>
    // 方法一
    var text = “1,2,3,4,5”;
    var array = text.split(“,”);// 逗号是分隔符
    console.log(array)
    // 方法二
    var arrayone = [‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ‘6’, ‘7’, ‘8’, ‘9’]
    arrayone.map(Number);  //结果:[1, 2, 3, 4, 5, 6, 7, 8, 9]
    console.log(arrayone)
</script>

什么是Vue.nextTick()?

nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数

Vue.nextTick()的使用场景

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。

vuex是什么?怎么使用?哪种功能场景使用它?

vue框架中状态管理。在main.js引入store,注入。
新建了一个目录store.js,….. export 。
场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车

vue-router 有哪几种导航钩子?

三种
第一种:是全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截。
第二种:组件内的钩子
第三种:单独路由独享组件

HTML常用的语义化标签

  • <head>头部
  • <body>主体
  • <a> 超链接
  • <marquee>滚动字幕
  • <ol>有序列表
  • <ul>无序列表
  • <dl>说明项目条例
  • <i>定义斜体字
  • <b>定义粗体文本
  • <em>定义着重文字
  • <small>定义小号字
  • <strong>定义加重语气
  • <sub>定义下标字H2O
  • <sup>定义上标字c²=a²+b²
  • <ins>定义插入字(文字下方下划线效果)
  • <del>定义删除字(文字中间有一条横线)
  • <code>定义计算机代码
  • <kbd>定义键盘码
  • <samp>定义计算机代码样本
  • <var>定义变量
  • <pre>定义预格式文本
  • <abbr>定义缩写
  • <address>定义地址
  • <bdo>定义文字方向
  • <blockquote>定义长的引用
  • <q>定义短的引用语
  • <cite>定义引用、引证
  • <dfn>定义一个定义项目 
  • <form>定义一个表单
  • <table>定义一个表格

JS数组有哪些方法?

  • join()
  • push()和pop()
  • shift() 和 unshift()
  • sort()
  • reverse()
  • concat()
  • slice()
  • splice()
  • indexOf()和 lastIndexOf() (ES5新增)
  • forEach() (ES5新增)
  • map() (ES5新增)
  • filter() (ES5新增)
  • every() (ES5新增)
  • some() (ES5新增)
  • js数组方法详解

Vue和JQuery的区别

jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$(“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

computed和watch的使用场景

computed:
当一个属性受多个属性影响的时候就需要用到computed
最典型的栗子: 购物车商品结算的时候
watch:
当一条数据影响多条数据的时候就需要用watch
栗子:搜索数据

computed和watch的区别

①从属性名上,computed是计算属性,也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化,然后执行相对应的函数。
②从实现上,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算。watch在每次监听的值变化时,都会执行回调。其实从这一点来看,都是在依赖的值变化之后,去执行回调。很多功能本来就很多属性都可以用,只不过有更适合的。如果一个值依赖多个属性(多对一),用computed肯定是更加方便的。如果一个值变化后会引起一系列操作,或者一个值变化会引起一系列值的变化(一对多),用watch更加方便一些。
watch的回调里面会传入监听属性的新旧值,通过这两个值可以做一些特定的操作。computed通常就是简单的计算。
watchcomputed并没有哪个更底层,watch内部调用的是vm.$watch,它们的共同之处就是每个定义的属性都单独建立了一个Watcher对象。

为什么使用key?

需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点。
作用主要是为了高效的更新虚拟DOM。

 


NG资源库 » Web前端总结

发表评论

提供最优质的资源集合

立即查看 了解详情