第二十四天前端学习浅记录

75 阅读3分钟

今天不太想复习了,就看了一下vue的课程,和大家分享一下看到的东西。

因为之前有过vue基础,所以直接看vuecli部分了,就是vue的脚手架,具体就是帮助我们更快搭建项目的工具。

render

这是在main.js所创建的vm实例中的一个方法,它是用来解决vue引用没有模板解析器的问题

image.png

完整版的vue是vue.js,由于vue.js体积较大,所以vue开发者帮助我们默认调用的更小的包。也就是vue.runtime.esm.js,所以残缺的部分需要render来解决这个问题

image.png

vue.config.js

它可以修改很多vuecli所封装好的配置。但是不要随意修改,有需求再去修改。修改后要重启项目才会生效。

module.exports = {
    // 关闭语法检查
    lintOnSave: false
}

简单的一个小demo,具体使用手册可以去vue.js官网查看。

ref

在vue中获取DOM元素的方法,以前js中提到过document.getElementById是类似的,只不过在vue中,我们还使用操作原生DOM的方法是有点笨重的,所以就引入了我们的ref

image.png

这样是很简单就可以获取到我们的DOM元素,当然也是视情况而定,之前js中获取DOM元素的方法在vue中依然有效。

但是有个小问题需要注意,如果我们给组件增加ref并获取,得到的是组件实例对象。

props

之前在父子组件传值部分提到过,系统性在提一下。

image.png

这是父组件给传的值

子组件在接收值时有三个常用的方法

  • easy image.png

这是最简单的接受方法,传来什么值我就要什么值。

  • type

image.png

此接受方法可以规定收到值的类型,如果类型不同,则不会接收并且报错。

  • total

image.png

此方法是功能最全的,它可以规定接收到值的参数,还可以规定哪些值是必须传的,哪些值不传就会给出默认值等等。

注: 接收到的值是无法修改的,如果一定要修改,需要在子组件重新把接收到的值赋值给一个新的值再修改。

mixin

它可以把多个组件共用的配置提取成一个混入对象。

image.png

引入方法还是比较简单的,在实际项目中,他是用途是非常广泛的,可以精简我们的代码量,比如分页功能就是很典型的例子,在后台项目中我们可能好多页面都会用到分页,把他放在mixin中就会节省我们很多工作量。

scoped

vue框架中css部分的一个属性,他可以解决同一个页面下,不同的子组件中类名冲突样式覆盖的问题,还是比较常用的,但是特别注意,app.js文件中一般我们不使用它,因为再app中使用的样式大多是很多页面都需要的样式。

image.png

代码中就是scoped使用的位置。

总结

今天看的东西,说多不多说少不少,最近虽然说忙着复习,其实也是每天摸鱼,有点放纵了,所以今天学习一下前端,找找学习的感觉,一定要最快进入复习状态,毕竟时间不多了,期待下次更新,加油大家。

image.png