![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE基础
文章平均质量分 50
dongdongdongJL
这个作者很懒,什么都没留下…
展开
-
浏览器解析机制
浏览器是如何解析一个html页面的?第一步,构建DOM树浏览器的渲染引擎,首先解析HTML文档,将html的标签转换为DOM树。第二步,构建渲染树浏览器引擎,继续渲染CSS样式文件,这里就包括JS,CSS,html指令,构建相应的渲染树。第三步,渲染页面渲染引擎结合DOM树和渲染树,共同渲染,进行具体元素的绘制工作。当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流,原创 2022-04-21 11:22:52 · 489 阅读 · 0 评论 -
理解element-ui中的slot-scope的理解
理解element-ui中的slot-scope的理解这个是一个固定用法,需要对比理解:普通表格的方法 使用slot-scope的方法 对比说明普通表格方法我们先说一说这个基础的用法里面,在el-table中,:data="tableData"是数据集,结构如下:那么对于每一个el-table-column,我们只需要使用prop="date",就可以将该列的数据绑定为该数组所有的对象中的“date”属性,我们可以理解为对于tableData,这里始终取的是tableData[$原创 2022-04-21 11:10:24 · 17811 阅读 · 4 评论 -
mock.js详细用法
mock.js使用方法MOCK.JS 是前端的一个模拟数据的库。这个库的使用,可以在前端开发时,就避免大量的后端请求。1.定义随机生成相应格式的数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。官方文档:Mock.js2.安装npm install mockjs --save3. 使用方法方法一,直接使用一个mock.js文件的情况下:01 编写一个mock.js文件const Mock = require('mockjs') // 这..原创 2022-04-12 14:26:28 · 4815 阅读 · 0 评论 -
VUEX的结构目录使用
1、结构这个结构,其实就是再告诉你,导入store以后,就可以使用通过modules分组的方式使用。2 、关键点解析如何引入store在需要使用的js文件当中,包括:main.js,或者是。router当中的index.js文件中最常出现。main.jsimport Vue from 'vue' import App from './App.vue' import router from './router' import store from './store'rout..原创 2022-04-12 13:33:49 · 941 阅读 · 0 评论 -
Vue vueRouter的基本使用
一、Vue Router的基本使用1、安装vue-router插件npm install vue-router --save 1链接:Vue Router文档2、创建路由实例import Vue from 'vue'import VueRouter from 'vue-router'import listTemplate from '@/view/demo/listTemplate.vue'Vue.use(VueRouter)const routes = [ {原创 2022-04-12 13:31:36 · 560 阅读 · 0 评论 -
el-menu菜单下划线解决办法
现象说明:代码实现: <router-link to="/index"> // 关键节点,使用router-link,一旦使用了这个链接,那么就会出现上边的下划线了。 <el-menu-item index="0"> <template slot...原创 2022-04-07 15:51:01 · 3374 阅读 · 1 评论 -
VUEX3.0.1导入到VUE中的方法
1.安装 vuexnpm install vuex@3.0.1 --save 或者 cnpm install vuex@3.0. --save2.vuex理解官方解释:vuex是一个专为vue.js应用程序开发的 状态管理模式。它采用集中式存储管理应用的所有的状态,并以相应的规则保证状态以一种可预测的方式发生变化。我的理解:可以理解为是一个 全局变量例如: 模块a / 模块b。我想 模块b获取模块a的数据。方法1: 用组件之间通讯。这样写很麻烦,并且写着写着,估计自己都...原创 2022-04-07 10:37:53 · 525 阅读 · 0 评论 -
VUE基础知识(六)
VUE组件是什么什么是组件组件的出现就是为了拆分Vue实例的代码量 能够让我们以不同的组件来划分不同的功能模块 需要什么功能就去调用对应的模块即可 局部功能界面。扩展名为.VUE的文件,就是一个独立的组件,这里边包含了,JS + HTML + css,这样就构成了可以复用的对象。组件关系组件是VUE当中最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同的组件之间是无法相互作用的。也就是说,组件是相互独立的存在。如上图所示,A 和 B、B...原创 2022-04-01 12:19:43 · 623 阅读 · 0 评论 -
VUE基础知识(五)
Vue生命周期是什么Vue提供给开发者一系列的回调函数 让我们可以在Vue的各个阶段添加自定义的逻辑处理三大阶段1)初始化显示创建期间的生命周期函数(1次)beforeCreate()Vue实例被创建 但date和methods数据中的数据还没有被设置上去(未初始化)created()data和methods以及被初始化(已被设置在Vue实例上)但是还未开始模版编译常用 如果要操作data中的数据和methods中的方法 最早只能在created中调用bef.原创 2022-03-31 16:34:37 · 686 阅读 · 0 评论 -
VUE基础知识(四)
什么是挂载,实例,模板挂载:英文叫 mount ,这是一个引用,原来在linux系统当中,linux本身的文件系统要与真正的硬件设备的文件目录合二为一,这样才能够使用linux的文件系统,那么这个过程,被VUE引用了过来,也就是说,只有将虚拟DOM跟真实的DOM绑定了,这样虚拟DOM才能够生效。那么这个过程就是挂载。import Vue from 'vue'import App from './App'new Vue({el: '#app', //#app 元素的 outerHTML ..原创 2022-03-31 16:32:18 · 2490 阅读 · 0 评论 -
VUE基础知识(三)
vue指令介绍v-text说明:文本数据渲染用法:v-text = "Vue实例中的数据" => 简写 {{Vue实例中的数据}}相当于JavaScript中的innerTextv-html说明:HTML渲染数据用法:v-html = "Vue实例中的数据"会解析html结构 渲染至页面相当于JavaScript中的innerHTMLv-on说明:事件绑定(绑定事件监听器)用法:v-on:事件名 = "事件处理函数" => 简写 @事件名...原创 2022-03-31 16:29:19 · 371 阅读 · 0 评论 -
VUE基础知识(二)
什么是命令式编程和声明式编程说明:命令式编程: 简单来说,就是业务逻辑编程,第一步做什么,第二步做什么,如果少一步,就会少执行,这个就是命令式编程。举个例子:当你需要显示如下数据时:中国 美国 俄国这个时候,在界面上如何操作哪?大概的过程如下,(注意伪代码)获取数据然后拼接字符串 <ul><li>中国</li><li>美国</li><li>俄国</li></ul然后获取DOM,然原创 2022-03-31 16:28:06 · 597 阅读 · 0 评论 -
利用脚手架搭建一个vue+elementUI的开发环境的步骤
利用脚手架搭建一个vue+elementUI的开发环境的步骤01 NODEJS安装前后端分离框架,前端通常采用的都是NODEJS服务器。VUE的运行,需要依赖于node的npm包管理工具。NodeJS的下载地址:Node.js查看node版本node -v02 安装CNPM因为npm是使用的国外的镜像,最好还是使用cnpm,这样使用阿里的镜像,国内的速度快。淘宝的cnpm代替npm。npm install -g cnpm --registry=https://regis原创 2022-03-31 16:23:00 · 1678 阅读 · 0 评论 -
VUE基础知识(一)
Vue是什么Vue是一套用于构建用户界面的渐进式框架 “前端框架” 让程序员脱离自己操作DOM 专注于写逻辑和操作数据 Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合 当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供驱动说明:构建用户界面:就是说,通过vue可以构建一个用户界面。这句话的理解是,传统的动态界面构建,是通过后台获取数据,然后通过操作DOM,实现界面的动态变化了。但是现在这个过程,就是通过VUE来实现的,也就是所,VUE获取后原创 2022-03-31 08:49:18 · 315 阅读 · 0 评论