Vue
文章平均质量分 69
Vue项目相关知识点
together UP
这个作者很懒,什么都没留下…
展开
-
patch函数被调用到diff之前的工作
首先,我们要知道什么情况下才会进行精细化比较:只有是同一个虚拟节点,才进行精细化比较;只进行同层比较,不会进行跨层比较。上树的前提是此节点必须是虚拟dom节点,因此在上树前要进行虚拟dom判断,如果是真实dom节点,那就先将其包装为虚拟节点:if(oldVnode.sel == '' || oldVnode.sel == underfined){ oldVnode = vnode(oldVnode.tagName.toLowerCase(), {}, [], underfined, o原创 2021-03-25 21:00:35 · 101 阅读 · 0 评论 -
snabbdom中的h函数
h函数的使用h函数被用于创建能描述真实DOM的JavaScript对象。比如我们可以使用h函数来描述下面这样的一条DOM节点:<a href='http://www.atguigu.com'>尚硅谷</a>我们可以使用h函数这样表达:h('a', {props: { href: 'http://www.atguigu.com'}}, '尚硅谷')最后h函数会的得到一个js对象,其实也就是虚拟DOM,简化过后它大概是这样的:{ "sel": "a",原创 2021-03-17 17:14:48 · 441 阅读 · 0 评论 -
mustache的机制
tokens的编译在mustache模板引擎,最为重要的就是tokens了,tokens还是“抽象语法树”、“虚拟DOM”等当今前端很火热的技术的开山鼻祖,那么tokens究竟是何方神圣呢?tokens其实是一个JS的嵌套数组,能把我们写好的模板字符串转换成一个特殊的数组,然后在这个数组的基础上结合数据对象,最后渲染成dom字符串。比如对于上面这样的一个模板字符串来说,mustache会先把它转换成下面的tokens:[ ["text", "<div><ol>"].原创 2021-03-11 16:11:25 · 193 阅读 · 0 评论 -
mustache模板引擎怎么使用
mustache是最早的模板引擎库,它的底层实现机理为后续模板引擎的发展提供了崭新的思路。使用需要引入mustache库https://www.bootcdn.cn/mustache.js/循环数组示例:其中{{#arr}}和{{/arr}}是模板语法的起始和结束语句,其中的arr是需要渲染的数据对象,而起始和结尾语句中间的内容就是模板的HTML代码了,至于中间需要渲染的数据,只需要使用{{变量名}}占位即可。那么我们需要怎么让mustache引擎起作用呢?此时我们需要使用mustache引擎原创 2021-03-08 15:10:09 · 442 阅读 · 0 评论 -
Vue3.x中自定义时钟钩子函数(TypeScript语法)
钩子函数的运用能使我们的代码更加简洁且易于维护,那么在Vue3.x中钩子函数的编写方式是怎样的呢? 下面,我以一个点击获取当前时间的例子来记录钩子函数的编写过程。创建hooks目录 一般情况下,我们都会在src文件目录下创建一个hooks文件夹,专门用来存放我们自定义的钩子函数。创建并编写钩子函数 创建好了目录,我们就可以创建钩子函数了。 我们在创建钩子函数的时候习惯性在命名前面加上use,没有为什么,仅仅是大多数程序员的习惯而已。例如我们要写的函数是获取当前时间,那我就将其命名为u原创 2020-11-19 20:38:40 · 742 阅读 · 1 评论 -
Vue3.x中的生命周期和钩子函数(部分)
Vue组件化编程中的生命周期,可以理解为组件在不同时间段能执行的不同的函数,这些函数也叫钩子函数。 钩子函数伴随着生命周期,是专门暴露给用户的,用来控制生命周期。因此,我们想要理解生命周期,就需要理解钩子函数。 在Vue3.x中,钩子函数做了一些改动,我们通过下面的例子框架来了解它。<template> <div> <button v-for="(item, index) in arr" v-bind:key="index"原创 2020-11-17 16:34:28 · 2602 阅读 · 0 评论 -
全局安装vue后命令行提示不是内部或外部命令如何解决
图示错误信息:这个是由于没有配置全局环境变量的问题,造成这个问题的原因有两种:使用npm安装vue的情况 npm全局安装的意义是把文件下载到一个node_global文件夹中,这个文件夹一般在你电脑的这个路径(也有可能不同,总之你需要找到它) 我这里的路径是C:\Program Files\nodejs\node_global也就是你得当初node的安装目录中的node_global文件夹,如果你安装了vue,你可以在这里找到vue文件夹(如果没有,你需要使用npm命令安装一下),如下图所示:原创 2020-11-12 09:19:50 · 1180 阅读 · 0 评论 -
VUE循环语句 v-for 绑定标签属性
vue-for 绑定属性(src等等)<img : src="data.src" />原创 2020-10-08 12:58:59 · 1041 阅读 · 0 评论