超人
超人
> css那里的em,dpi文档定向可能出了问题,去看看,就是vuepress文档里 收到,已fix, 感谢
![](https://static.vue-js.com/63194810-3a09-11eb-85f6-6fac77c0c9b3.png) ## 一、思考 我们都听过知其然知其所以然这句话 那么不知道大家是否思考过`new Vue()`这个过程中究竟做了些什么? 过程中是如何完成数据的绑定,又是如何将数据渲染到视图的等等 ## 一、分析 首先找到`vue`的构造函数 源码位置:src\core\instance\index.js ```js function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor...
![](https://static.vue-js.com/e8764810-3acb-11eb-85f6-6fac77c0c9b3.png) ## 一、作用 `v-if` 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 `true`值的时候被渲染 `v-for` 指令基于一个数组来渲染一个列表。`v-for` 指令需要使用 `item in items` 形式的特殊语法,其中 `items` 是源数据数组或者对象,而 `item` 则是被迭代的数组元素的别名 在 `v-for` 的时候,建议设置`key`值,并且保证每个`key`值是独一无二的,这便于`diff`算法进行优化 两者在用法上 ```js {{ item.label }} ``` ## 二、优先级 `v-if`与`v-for`都是`vue`模板系统中的指令 在`vue`模板编译的时候,会将指令系统转化成可执行的`render`函数...
> 3.x 版本中 v-if 总是优先于 v-for 生效。 嗯,是的哈
> list是啥 一个变量,就是一个数组。
> 你举得例子没 嗯,大概就是这个意思,先将源数据(list)处理一次,
![](https://static.vue-js.com/02ac1620-3ac6-11eb-85f6-6fac77c0c9b3.png) ## 一、从历史说起 Web是World Wide Web的简称,中文译为万维网我们可以将它规划成如下的几个时代来进行理解 - 石器时代 - 文明时代 - 工业革命时代 - 百花齐放时代 ### 石器时代 石器时代指的就是我们的静态网页,可以欣赏一下1997的Apple官网 ![](https://static.vue-js.com/1734e450-3ac6-11eb-85f6-6fac77c0c9b3.png) 最早的网页是没有数据库的,可以理解成就是一张可以在网络上浏览的报纸,直到CGI技术的出现通过 CGI Perl 运行一小段代码与数据库或文件系统进行交互,如当时的Google(1998年) ![](https://static.vue-js.com/23189000-3ac6-11eb-85f6-6fac77c0c9b3.png) ### 文明时代 ASP,JSP大家应该都不会太陌生,最早出现于 2005 年左右,先后出现了微软的 ASP 和...
> > 数据驱动视图,在某些情况下比如v-model(输入框)视图也能改变数据 > > 我理解的 `v-model` 是 ”**视图抛发改变数据的特定事件去驱动数据更改**“ ,更像是双向绑定的一种“语法糖”,实际最终的数据还是由父组件传递给子组件的。 你理解的是对的,这块我们修正下,感谢指出
![](https://static.vue-js.com/cef7dcc0-3ac9-11eb-85f6-6fac77c0c9b3.png) ## 一、什么是双向绑定 我们先从单向绑定切入单向绑定非常简单,就是把`Model`绑定到`View`,当我们用`JavaScript`代码更新`Model`时,`View`就会自动更新双向绑定就很容易联想到了,在单向绑定的基础上,用户更新了`View`,`Model`的数据也自动被更新了,这种情况就是双向绑定举个栗子 ![](https://static.vue-js.com/d65738d0-3ac9-11eb-ab90-d9ae814b240d.png) 当用户填写表单时,`View`的状态就被更新了,如果此时可以自动更新`Model`的状态,那就相当于我们把`Model`和`View`做了双向绑定关系图如下 ![](https://static.vue-js.com/dcc1d4a0-3ac9-11eb-ab90-d9ae814b240d.png) ## 二、双向绑定的原理是什么 我们都知道 `Vue` 是数据双向绑定的框架,双向绑定由三个重要部分构成 - 数据层(Model):应用的数据及业务逻辑 - 视图层(View):应用的展示效果,各类UI组件 - 业务逻辑层(ViewModel):框架封装的核心,它负责将数据与视图关联起来 而上面的这个分层的架构方案,可以用一个专业术语进行称呼:`MVVM`这里的控制层的核心功能便是 “数据双向绑定” 。自然,我们只需弄懂它是什么,便可以进一步了解数据绑定的原理 ### 理解ViewModel 它的主要职责就是: - 数据变化后更新视图 - 视图变化后更新数据 当然,它还有两个主要部分组成 -...
![image.png](https://static.vue-js.com/24617c00-3acc-11eb-ab90-d9ae814b240d.png) ## 一、什么是首屏加载 首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容 首屏加载可以说是用户体验中**最重要**的环节 ### 关于计算首屏时间 利用`performance.timing`提供的数据: ![image.png](https://static.vue-js.com/2e2491a0-3acc-11eb-85f6-6fac77c0c9b3.png) 通过`DOMContentLoad`或者`performance`来计算出首屏时间 ```js // 方案一: document.addEventListener('DOMContentLoaded', (event) => { console.log('first contentful painting'); }); // 方案二: performance.getEntriesByName("first-contentful-paint")[0].startTime // performance.getEntriesByName("first-contentful-paint")[0] // 会返回一个...