首页 » 网站推广 » vue解析php技巧_Vuejs 浅析笔记整理

vue解析php技巧_Vuejs 浅析笔记整理

访客 2024-12-02 0

扫一扫用手机浏览

文章目录 [+]

Vue.js 的目标是通过尽可能大略的 API 实现相应的数据绑定和组合的视图组件。

如果你是有履历的前端开拓者,想知道 Vue.js 与其它库/框架的差异,查看比拟其它框架。

vue解析php技巧_Vuejs 浅析笔记整理

上面的是官网的先容,阐明的非常的抽象,相信很多初学者看完之后对付Vue.js的观点还是很模糊,不知道这个框架是用来干什么的:什么是“渐进式框架”?什么是“自底向上增量开拓的设计”?什么是“视图层”?什么是“单文件组件”?什么是“繁芜的单页运用?为了搞清楚这些问题,我又去百度这些名词,结果得到的是其余一堆名词,对vue.js的理解还只是勾留在前端框架上。

vue解析php技巧_Vuejs 浅析笔记整理
(图片来自网络侵删)

后来我在一个学习网站里看到了一个很随意马虎理解的定义:Vue.js便是一个用于搭建类似于网页版知乎这种表单项繁多,且内容须要根据用户的操作进行修正的网页版运用。

什么是单页运用程序

单页运用一样平常指的是一个页面便是运用,当然也可以是一个子运用,比如说刚刚提到的知乎,知乎的一个页面就可以视为一个子运用。
单页运用程序中一样平常交互处理非常多,而且页面中的内容须要根据用户的操作动态变革。

什么是视图层?

我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。
Vue 的核心库只关注视图层

备注:什么是DOM?

DOM是 Document Object Model(文档工具模型)的缩写。
文档工具模型 (DOM) 是HTML和XML文档的编程接口。
它供应了对文档的构造化的表述,并定义了一种办法可以使从程序中对该构造进行访问,从而改变文档的构造,样式和内容。

DOM 将文档解析为一个由节点和工具(包含属性和方法的工具)组成的构造凑集。
简言之,它会将web页面和脚本或程序措辞连接起来。

而DOM的浸染便是为了操作HTML中的元素,使得网页被下载到浏览器后改变网页内容成为可能。

Vue.js为什么能让基于网页的前端运用程序开拓起来这么方便?有声明式相应式的数据绑定:vue.js会自动相应数据的变革情形,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修正。
组件化的开拓:非组件化开拓代码和事情量都非常大,后期修正起来十分困难。
Virtual DOM

前端中如何进行组件化开拓?借用的后真个面向工具中的模块化思想,把一些大功能拆分成许多函数,然后分配给不同的人来开拓把一个单页运用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级运用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑)

Virtual DOM什么是Virtual DOM?

所谓的 virtual dom,也便是虚拟节点。
它通过 JS 的 Object 工具仿照 DOM 中的节点,然后再通过特定的 render 方法将其渲染成真实的 DOM 节点。

为什么有Virtual DOM技能?

现在的网速越来越快了,很多人家里都是几十乃至上百M的光纤,手机也是4G起步了,按道理一个网页才几百K,而且浏览器本身还会缓存很多资源文件,那么几十M的光纤为什么打开一个之前已经打开过,已经有缓存的页面还是觉得很慢呢?

由于浏览器本身处理DOM也是有性能瓶颈的,而且用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要一直的渲染新的DOM树。
尤其是在传统开拓中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要一直的渲染新的DOM树,导致页面看起来非常卡顿。

怎么实现Virtual DOM技能?

估量算dom的各种操作,把末了一次的结果渲染出来(减少dom的渲染次数)。

须要理解的一些名词ECMAScript

ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(其余的 ECMAScript 方言还有 Jscript 和 ActionScript)。
日常场合,这两个词是可以互换的。

而ECMAScript6便是新一代的JavaScript措辞。

Webpack

Webpack是一个前端打包和构建工具。
用于管理各种素材,打包以便减少浏览器的访问次数。

单页运用程序中用到很多素材,如果每一个素材都通过在HTML中以src属性或者link来引入,那么要求一个页面的时候,可能浏览器就要发起十多次要求,每每要求的这些资源都是一些脚本代码或者很小的图片,这些资源本身才几k,下载连1秒都不须要,但是由于HTTP是运用层协议,它的下层是TCP这个运输层协议,TCP的握手和挥手过程花费的韶光可能比下载资源本身还要长,以是须要把这些小文件全部打包成一个文件,这样只要一次TCP握手和挥手的过程,就把多个资源给下载下来了,并且多个资源由于都是共享一个HTTP要求,以是head等部分也是共享的,相称于形成了规模效应,让网页展现更快,用户体验更好。

Vuex和Vue-route

Vuex是vue的一个状态管理器。
用于集中管理一个单页运用程序中的各种状态。

Vue-route是vue的一个前端路由器,这个路由器不是我们上网用的路由器,而是一个管理要求入口和页面映射关系的东西。
它可以实现对页面局部进行无刷新的更换,让用户觉得就像切换到了网页一样。

什么是前后端分离

在前后端分离的开拓模式中,后端仅返回前端所需的数据,前端卖力渲染HTML页面,后端不再掌握前真个效果,用户看到什么样的效果,从后端要求的数据如何加载到前端中,都由前端自己决定,后端仅仅须要供应一套逻辑对外供应数据即可,并且前端与后真个耦合度相对较低,在这种模式中,我们常日将后端开拓的每个视图都成为一个接口,或者API,前端通过访问接口来对数据进行增编削查。
总结一句话,后台卖力供应数据,前端卖力数据展示,职责分离,分工明确

我们可以利用vue和php进行前后端分离。

标签:

相关文章

Python编程从入门到精通,探索编程之美

编程已经成为现代社会的一项基本技能。Python作为一种简单易学、功能强大的编程语言,在我国教育领域备受关注。本文将从Python...

网站推广 2025-03-02 阅读1 评论0

Scum07代码编程之美与适用方法

编程已成为当今社会不可或缺的技能之一。Scum07代码作为一款经典的编程语言,在我国众多程序员中备受推崇。本文将深入解析Scum0...

网站推广 2025-03-02 阅读1 评论0

Linux环境下的前端代码运行优化与步骤

前端技术逐渐成为软件开发的核心。Linux操作系统因其稳定性、安全性、开放性等特点,成为众多开发者和企业青睐的运行环境。本文将从L...

网站推广 2025-03-02 阅读1 评论0