前端基础
关注
分享
扫一扫
文章平均质量分 91
前端基础语法
less more
少则多，简则精
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vuex
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享能够在vuex中集中管理共享的数据，便于开发和后期进行维护能够高效的实现组件之间的数据共享，提高开发效率存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新。原创 2024-04-10 16:55:18 · 655 阅读 · 0 评论 -
vue-vant组件库
下载网易云音乐node接口项目, 在本地启动, 为我们vue项目提供数据支持项目地址备用地址下载后, 安装所有依赖, 在本地启动起来, 测试访问此地址是否有数据http://localhost:3000, 看到如下页面就成功了初始化工程下载需要的所有第三方依赖包引入reset.css和flexible.js - 实现样式初始化和适配问题 - 引入到main.js本次vant使用自动按需引入的方式文档: https://vant-contrib.gitee.io/vant/#/zh-CN/quic原创 2024-04-06 23:00:25 · 678 阅读 · 0 评论 -
vue-router
目标: 设备和ip的映射关系目标: 接口和服务的映射关系目标: 路径和组件的映射关系目标: 如何在Vue项目中集成路由官网: https://router.vuejs.org/zh/vue-router模块包它和 Vue.js 深度集成可以定义 - 视图表(映射规则)模块化的提供2个内置全局组件声明式导航自动激活的 CSS class 的链接……目标: vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用vant官网提供 60 多个高质量组件，覆盖移动端各类场景。原创 2024-04-06 22:49:02 · 615 阅读 · 0 评论 -
vue-(组件进阶、自定义指令)
需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, 一个填写用户简介信息效果如下:准备被切换的 - UserName.vue / UserInfo.vue 2个组件引入到UseDynamic.vue注册准备变量来承载要显示的"组件名"设置挂载点, 使用is属性来设置要显示哪个组件点击按钮 – 修改comName变量里的"组件名"在App.vue - 引入01_UseDynamic.vue并使用显示使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁演示1: 可以原创 2024-04-06 22:22:00 · 698 阅读 · 0 评论 -
vue-(组件生命周期、axios、$refs)
Vue_生命周期作用: 特定的时间点，执行特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据分类: 4大阶段8个方法官网文档下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。含义讲解:1.new Vue() – Vue实例化(组件也是一个小的Vue实例)2.Init Events & Lifecycle – 初始化事件和生命周期函数3.beforeCreate – 生命周期钩子函数被执原创 2024-04-06 21:23:14 · 565 阅读 · 0 评论 -
vue-(组件封装、组件通信)
=作用大纲能够理解vue组件概念和作用能够掌握封装组件能力能够使用组件之间通信能够完成todo案例1. vue组件1.0_为什么用组件以前做过一个折叠面板需求: 现在想要多个收起展开的部分方案1: 复制代码模板标签 - 在这个基础上, 把要复用的多复制几份(讲解不好的地方引出解决方案)上面复制3份, 发现变化一起变化解决方案: 不同的部分, 用不同的isShow变量1.1_vue组件_概念组件化 ：封装的思想，把页面上 封装为 ，从而方便项目的 开发 和 维护原创 2024-04-06 17:05:04 · 766 阅读 · 0 评论 -
vue-(key作用、过滤器, 计算属性, 侦听器)
马上能反应过来循环遍历是什么, 索引(下角标)是什么 数组的filter方法使用 重绘与回流(重排)的概念 localStorage浏览器本地存储语法使用 JSON的方法使用大纲能够了解key作用, 虚拟DOM, diff算法能够掌握设置动态样式能够掌握过滤器, 计算属性, 侦听器能够完成品牌管理案例1. vue基础1.0_vue基础 v-for更新监测情况1: 数组翻转情况2: 数组截取情况3: 更新值口诀:数组变更方法, 就会导致v-for更新,原创 2024-04-06 00:02:51 · 784 阅读 · 0 评论 -
vue-Webpack
webpack是一个打包模块化javascript的工具，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建模块化项目。原创 2024-04-05 18:30:49 · 952 阅读 · 0 评论 -
Element
Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。使用Element前提必须要有Vue。组件：组成网页的部件，例如超链接、按钮、图片、表格等等~Element官网：https://element.eleme.cn/#/zh-CN自己完成的按钮Element 提供的按钮开发步骤引入 Element 样式文件夹。引入 Vue 核心 js 文件。在html中引入vue.js在html中引入 Element 核心 js 文件。编写按钮标签。在官网中找到按钮标签的代码，将代码原创 2024-03-27 15:36:37 · 1124 阅读 · 0 评论 -
Vue脚手架
Vue脚手架学习目标：理解Node.js基本使用方法理解包资源管理器NPM的使用理解webpack的作用理解 vue-cli 脚手架 (重点)Element-UI 组件库1.vue的格式： new Vue({ //作用的视图 el:"id选择器", //vue中的数据 /*data:{ key:value, key:value, ...原创 2024-03-27 17:52:28 · 1105 阅读 · 0 评论 -
vue的异步操作
/list=[{age:18,id:"001",name:"张三"},{age:18,id:"002",name:"李四"},{age:18,id:"003",name:"王五"}]2.this.user就是json格式的数据：user = {"username":"锁哥","password":"1234"}1.后台url的地址 "http://localhost:8080/axiosDemo01Servlet"//说明查询好友列表成功，将后台响应的数组数据赋值给数据模型中的list。原创 2024-03-27 14:53:06 · 1075 阅读 · 0 评论 -
vue基础
vue的学习网站：1.Vue的介绍学习目标说出什么是Vue能够说出Vue的好处能够说出Vue的特点内容讲解【1】Vue介绍1.vue属于一个前端框架，底层使用原生js编写的。主要用来进行前端和后台服务器之间的一个交互。2.Vue是一套构建用户界面的渐进式前端框架。大部分时间关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。特点易用：在有HTML,CSS, JavaScript的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20原创 2024-03-27 15:09:54 · 1546 阅读 · 0 评论 -
jQuery
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>认识jQuery</title> <!-- JS存在的痛点: 1. 复杂的DOM操作 2. 浏览器兼容问题 3. 事件\动画比较复杂 jQuery的亮点: 1. 轻松实现DOM操作原创 2021-05-13 08:58:40 · 136 阅读 · 0 评论 -
ajax基础
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS的CRUD</title> <style> #main{ background-color: red; width: 400px; height: 300px;原创 2021-05-12 10:09:00 · 331 阅读 · 0 评论 -
ES6新语法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document的常用操作-1</title> <script> function changeImg() {// alert(0); // 1.获取网页中的图像标签 var img原创 2021-05-12 10:05:23 · 351 阅读 · 0 评论 -
JS 简单示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>上下切换图片</title></head><body> <img name="icon" src="image/icon_01.png"> <p></p> <button>上一张</b原创 2021-05-12 10:06:09 · 147 阅读 · 0 评论 -
JS的基础
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS的基本语法</title> <script type="text/javascript"> // 1.基本的语法 var age = 18; // number var money = 100.88; // nu原创 2021-05-11 10:23:25 · 157 阅读 · 0 评论 -
认识bootstrap
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>认识bootstrap</title> <!--引入外部的框架--> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> <style>原创 2021-05-12 09:57:43 · 124 阅读 · 0 评论 -
CSS基础
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS的行内样式</title></head><body> <div style="color: blue; font-size: 28px; background-color: aqua;">我是容器标签</div>原创 2021-04-25 10:21:53 · 338 阅读 · 0 评论 -
HTML中常用标签
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>常见的HTML的标签</title></head><body> <!--标题标签--> <h1>我是h1标签</h1> <h2>我是h2标签</h2> <h3>我是h3标签原创 2021-04-25 10:14:20 · 233 阅读 · 0 评论