![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
文章平均质量分 52
wanglingli95
希望可以在这个平台上和大牛们一起学习、进步!
展开
-
CSS3新增结构伪类选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CS.原创 2022-04-14 23:29:49 · 235 阅读 · 1 评论 -
CSS3新增属性选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CS.原创 2022-04-14 23:28:05 · 273 阅读 · 0 评论 -
Vuex的基本使用
一、什么是Vuex?概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,定义一系列规范来对 vue 中多个组件的共享状态进行使用和操作数据,也是一种组件间通信的方式,且适用于任意组件间通信。二、Vuex的核心概念state:存放着需要共享的数据。 mutations:存放着对state的数据进行修改的函数,你不能直接改变 store 中的状态,改变 store 中数据的唯一途径就是提交 (commit) mutations中的函数对数据进行修改。三、Vuex的具体使用方法原创 2022-04-09 22:49:59 · 1173 阅读 · 0 评论 -
Vue-cli项目中二维码插件的使用
一、使用场景在微信支付场景中,需要调用二维码插件来生成二维码。首先梳理一下微信支付的流程: 在确定使用微信支付的时候,会把当前订单的订单号发给后台开发人员; 后台开发人员利用订单号去数据库中查询订单信息,比如商品名称、订单金额等,还有一些微信官方要求的信息,整合这些信息之后后台开发人员就会将这些数据发送给微信官方,微信官方接收到请求后,返回一个携带了支付必要信息的链接给后台开发人员; 后台开发人员将微信官方提供的字符链接返回给前端开发人员,利用二维码插件将这个链接生成一个二维码展示到页面中,用户使原创 2022-03-27 21:20:58 · 1861 阅读 · 0 评论 -
Vue-cli项目中百度地图插件的使用
一、百度地图插件1.1 百度地图基本使用关于百度地图的基本使用在官方网站中有详细的介绍,可以参考以下链接:百度地图开发平台https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B51.2 百度地图的使用步骤1.2.1 申请密钥百度地图的使用需要一个专属的密钥(ak)作为路径,具体申请流程如图:在申请ak之前,首先要注册百度的账号,然后要申请成为百度开发者。完成以上两步之后才能去获取ak密钥。申请注册的步骤很简单,只需原创 2022-03-27 20:49:37 · 5556 阅读 · 2 评论 -
Vue计算属性computed之购物车商品结算案例
一、需求说明:实现页面基本布局。 单击“+”按钮时,对应商品的数量增加,当单击“-”按钮时,对应商品的数量减少,当数量减少到1时,“-”按钮无法再进行操作。 每个对应商品后面都有一个“移除”按钮,当单击“移除”按钮时,当前商品列表项会删除,页面效果图如下: 二、实现过程:HelloWorld.vue代码示例:<template> <div> <table id="mytable"> <thead> .原创 2022-03-22 23:40:55 · 2500 阅读 · 0 评论 -
计算属性和侦听器
一、计算属性1.1 什么是计算属性首先通过一个示例来介绍计算属性,需求是把一个字符串倒序显示,具体代码如示例1所示:<template> <div class="hello"> <h1>{{msg}}转为{{msg.split('').reverse().join('')}}</h1> </div></template><script>export default { name: 'H原创 2022-03-20 22:28:52 · 1062 阅读 · 0 评论 -
vue组件之匿名slot 的分类案例
一、使用组件的复用完成如下分类页面效果:利用父组件给子组件Category.vue传递数据完成不同内容的复用:父组件App.vue示例代码:<template> <div class="container"> <!-- 步骤三:调用子组件 --> <Category title="美食" :listData="foods"></Category> <Category title="游戏" :listDa原创 2022-03-14 21:45:44 · 1223 阅读 · 4 评论 -
vue组件之具名slot 的分类案例
需求说明:利用组件的复用完成美食、游戏、电影的分类布局。 使用具名slot完成分类组件的不同内容显示。实现过程:1.创建一个分类子组件(Category.vue),在子组件中定义具名插槽:<template> <div class="category"> <h3>{{title}}分类</h3> <!-- 定义一个插槽(挖个坑,等着组件的使用者进行填充) --> <slot name="center"&原创 2022-03-14 21:11:07 · 5893 阅读 · 1 评论 -
vue组件之子组件向父组件传值完成数量控制器
本章作业——利用父子组件的传值完成数量控制器的功能需求:单击“增加1”按钮的时候,对应数量会增加1。 单击“减少1”按钮的时候,对应数量会减少1。项目运行的页面效果如图所示:实现过程:父组件示例代码(App.vue):<template> <div id="app"> <p>{{total}}</p> <!-- 第三步:调用组件 --> <Counter @father_add="原创 2022-03-13 22:21:16 · 2582 阅读 · 0 评论 -
vue组件之通过 props 给子组件传数组数据
上机训练——移动端标题栏需求说明完成移动端标题子组件,在子组件中接收标题和两张修饰图片; 在父组件中调用子组件,并传递给子组件对应的内容; 图片以import的方式进行导入,页面效果如图所示。实现过程:父组件示例代码(App.vue):<template> <div id="app"> <TitleItem :list="listdata"></TitleItem> </div></templat原创 2022-03-13 21:13:54 · 7779 阅读 · 0 评论 -
HTML基础标签学习
一、HTML概述 HTML是一种超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。我们可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。二、HTML骨架格式如同日常生活的书信,我们要遵循约定俗成的格式进行书写。那么,HTML 页面也有自己的骨架格式:<!DOCTYPE html>//声明为 HTML5 文档<html><head&...原创 2021-12-27 23:25:38 · 1073 阅读 · 0 评论