前端框架之VUE
文章平均质量分 53
关于VUE框架知识点梳理的一个集合
全干程序员demo
一名00后互联网开发从业者,现就职华中科技大学担任后端开发工程师.致力代码改变生活,公众号:全干程序员demo,欢迎各位大佬关注!
展开
-
Element UI实战教程之Select选择器组件的使用(下拉列表)06
Element UI实战教程之Select选择器组件的使用(下拉列表)06Select选择器组件的使用(下拉列表)1.组件的创建 <el-select> <el-option>上海</el-option> <el-option>上海</el-option> <el-option>上海</el-option> <el-option>上海...原创 2021-02-25 16:22:53 · 285 阅读 · 0 评论 -
Element UI实战教程之input输入框组件05
Element UI实战教程之input输入框组件05input输入框组件 1.创建输入框input组件 <el-input v-model="input"></el-input> 2.常用属性 <el-input disabled v-model="input"></el-input> <el-input disabled type="texta...原创 2021-02-25 12:13:58 · 472 阅读 · 0 评论 -
Element UI实战教程之复选框组件04
Element UI实战教程之复选框组件04checkbox组件1.创建checkbox组件 <el-checkbox v-model="checked">上海</el-checkbox> <el-checkbox v-model="checked">天津</el-checkbox>2.checkbox组件属性的使用<el-checkbox v-model="checked" true-label="北京">北京<.原创 2021-02-23 21:25:37 · 336 阅读 · 0 评论 -
Element UI实战教程之Radio单选按钮组件03
Element UI实战教程之Radio单选按钮组件03Radio单选按钮1.创建Radio按钮 <el-radio label="男" v-model="label">男</el-radio> <el-radio label="女" v-model="label">女</el-radio> <script> export default { ...原创 2021-02-23 21:01:41 · 1462 阅读 · 1 评论 -
Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02
Element UI实战教程之Link链接组件以及Layout布局组件和Container容器组件02Link文字链接组件1.文字链接组件的创建 <el-link>默认文字链接</el-link>2.文字链接组件的属性的使用 <el-link type="success" href="http://www.baidu.com">默认文字链接</el-link> <el-link type="primary" :underlin.原创 2021-02-23 19:45:15 · 1774 阅读 · 2 评论 -
Element UI实战教程之按钮组件01
Element UI实战教程之按钮组件011.Element UI 引言 官网:https://element.eleme.cn/#/zh-CN官方定义网站快速成型工具 和 桌面端组件库定义element UI 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面.由来 饿了么前端团队 基于vue进行开发并且进行了开源 element UI中提供全部都是封装好的组件2.安装Element UI快速上手安装(官网演示):h...原创 2021-02-23 16:48:52 · 857 阅读 · 0 评论 -
Vue实战之Vue CLI 脚手架
Vue CLI 脚手架14.1 什么是CLI命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后,予以执行。也有人称之为字符用户界面(CUI)14.2 什么是Vue CLIVue CLI 是一个基于 Vue.js 进行快速开发的完整系统。使用Vue 脚手架之后我们开发的页面将是一个完整系统(项目)。14.3 Vue CLI优势 通过 vue-cli原创 2021-02-22 19:32:10 · 856 阅读 · 0 评论 -
Vue实战之vue中的路由(VueRouter)
Vue中路由(VueRouter)13.1 路由路由:根据请求的路径按照一定的路由规则进行请求的转发从而帮助我们实现统一请求的管理13.2 作用用来在vue中实现组件之间的动态切换13.3 使用路由1. 引入路由 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-r...原创 2021-02-22 19:24:54 · 342 阅读 · 0 评论 -
Vue实战之组件(Component)
Vue实战之组件(Component)12.1 组件作用组件作用: 用来减少Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据 不能业务功能将页面中划分不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。12.2 组件使用12.2.1 全局组件注册说明:全局组件注册给Vue实例,日后可以在任意Vue实例的范围内使用该组件 //1.开发全局组件 Vue.component('login',{...原创 2021-02-05 22:07:01 · 1060 阅读 · 0 评论 -
Vue实战之Axios 基本使用和vue生命周期
Vue实战之Axios 基本使用和vue生命周期10.1 引言Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax10.2 Axios 第一个程序中文网站:https://www.kancloud.cn/yunye/axios/234845安装: https://unpkg.com/axios/dist/axios.min.js10.2.1 GET方式的请求//发送GET方式请求 axios....原创 2021-02-05 22:03:44 · 745 阅读 · 0 评论 -
vue实战之事件修饰符
vue实战之事件修饰符修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制# 1.常用的事件修饰符 .stop .prevent .capture .self .once .passive8.1 stop事件修饰符用来阻止事件冒泡<div id="app"> <div class="aa" @click="divClick"> <!--用来阻止事件冒泡-...原创 2021-02-05 22:00:22 · 300 阅读 · 0 评论 -
Vue实战之基本语法
Vue实战之基本语法1. Vue 引言渐进式 JavaScript 框架 --摘自官网# 渐进式 1. 易用 html css javascript 2. 高效 开发前端页面 非常高效 3. 灵活 开发灵活 多样性# 总结 Vue 是一个javascript 框架# 后端服务端开发人员: Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑...原创 2021-02-05 21:57:34 · 125 阅读 · 0 评论 -
VUE快速入门04之vue-cli
VUE快速入门04之vue-clivue-cli vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板; 预先定义好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目,这个骨架项目就是脚手架,我们的开发更加的快速;主要的功能: 统一的目录结构 本地调试 热部署 单元测试 集成打包上线需要的环境Node.js : http://nodejs.cn/download/安装就无脑下一步就好,安装在自己的环境目录下Git原创 2020-09-24 15:34:10 · 109 阅读 · 0 评论 -
VUE快速入门03-slot插槽
vue官方文档中关于slot插槽的说明很简短,语言又写的很凝练,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”的想法,于是就关闭了vue的说明文档。一、slot的作用Q: 假如父组件需要在子组件内放一些DOM元素,那么这些DOM是显示呢还是不显示呢?默认情况下是不会显示的,如下图所示,页面并没有显示父组件增加的<span>我是魔鬼</span> 元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢?这就用到了slot插槽,使.原创 2020-09-20 19:39:46 · 102 阅读 · 0 评论 -
VUE快速入门02-Axios通信
VUE快速入门02-Axios通信一,使用axios发送ajax请求vue本身不具备发送ajax的请求,所以要借助第三方库来完成;1.在1.x版本发送ajax请求可以使用vue-resource,不过现在vue-resource不在维护,官方推荐使用axios代替;使用cdn引入即可:<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></.原创 2020-09-20 19:26:28 · 114 阅读 · 0 评论 -
VUE快速入门01-VUE组件
VUE快速入门03-VUE组件总结提示:这里对文章进行总结:例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。...原创 2020-09-20 13:10:00 · 112 阅读 · 0 评论 -
VUE基础02-模板语法
VUE基础02-模板语法5.按键修饰符 .enter 回车键 <input type="text" v-model='pwd' @keyup.enter='fun'/> .delete 删除键 <input type="text" v-model='pwd' @keyup.delete='fun'/> 6.自定义按键修饰符 全局 config.keyCodes 对象 Vue.config.keyCodes.自定义名...原创 2020-08-01 20:20:04 · 128 阅读 · 0 评论 -
VUE 基础01-基础入门
VUEVue概述: Vue的创建者 : 尤雨溪 2014年2月,Vue正式发布 2015年10月27日,正式发布1.0.0 2016年4月27日,发布2.0的预览版本 Vue : 渐进式JavaScript框架 渐进式:声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建 官网: https://cn.vuejs.org/v2/guide/ 易用:熟悉HTML,CSS,JavaScript知识后,可快速上手Vue原创 2020-07-25 22:06:06 · 199 阅读 · 0 评论