sj1255897381-CSDN博客

原创 Vue组件（一）：评分、搜索、菜单、轮播、分页等

Vue组件在做项目的时候经常会写功能一样，只是写入的数据不一样的元素，为了避免重复书写，会将这些元素做成组件，例如菜单、分页、轮播图等。由于目前还是用的是VScode软件，写组件的模板没有提示，需要手动书写，所以对于刚刚尝试写组件的新手，可以现在html文件中先写出组件的元素以及需要实现的功能。评分组件以评分作为例子：做评分组件的几个元素：1、总分有几颗星？2、初始时有没有默认星？3、怎么实现鼠标往后移动的时候星星被点亮，向前移开的时候星星不亮。鼠标离开评分，恢复默认值4、鼠标点击的时候，

2020-07-24 11:42:08 563

原创 Vue中axios的使用

axios的原理axios的基于promise，可以在浏览器和node.js的HTTP客户端，主要用于请求数据。同时可以避免代码请求数据套了好多层，不利于维护和管理。1、axios基于promise的封装let axios = { get(url) {//接收路径数据 let pro = new Promise(function (resolve, reject) { $.get(url, data => { reso

2020-07-21 10:45:01 351

原创 Vue过滤器、计算属性以及生命周期

Vue过滤器在列表生成用户信息时，性别字段或者时间字段可以使用过滤器来格式化形如: {{ user.gender | fmtGender }}Vue.filter(‘fmtGender’,val=>{//fmtGender 为过滤器的名字return [‘男’,‘女’][val] || ‘未知’})过滤器分为全局过滤器和局部过滤器。1、局部过滤器：局部过滤器只能在el对应的DOM元素内使用，当el对应的元素外的其他地方使用，只能再定义一回，就比较麻烦，不通用。所以局部过滤器一般不推荐使用

2020-07-17 10:20:09 239

原创初识VUE以及vue的常用指令

1、VUE的基本结构在html中需要有一个盒子来定义内容的范围：<div id="app" v-cloak></div>在JavaScript中需要先引入vue.js的本地连接或者在线链接，然后再new一个VUE：new Vue({ el: '#app', //Vue的作用对象是ID名为app的盒子，也就是html中的盒子 data() {//数据，所有变量都需要在data函数中初始化。 ret

2020-07-16 14:55:14 128

原创 echarts制作图表

echartsechart官方使用说明文档首先添加本地echarts.js文档或者使用在线链接根据说明文档添加示例： <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 va

2020-07-07 11:08:33 304

原创通过Mock随机生成得数据制作页面元素、ArtTemplate的使用

MockMock支持随机生成中英文的文本、数字、布尔值、日期、图片、链接等各种数据，前端自己生成数据进行场景的模拟，并且使用十分方便。首先需要导入Mock的js文件，可以是本地文件，也可以去BootCDN上复制在线链接。接下来是Mock数据的语法：let obj=Mock.mock({ 'userlist|10':[//生成10个（可以在|后面写数据的数量） { //冒号前的名字是变量名，后面是取值（具体数据格式名字见BootCDN的使用文档） 'u

2020-07-07 10:37:30 363

原创初识ajax，并通过jQuery通过ajax获取数据

1、ajax是利用js或者jq在页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。简而言之，就是通过ajax获取数据。2、ajax获取数据的三种方法（1）、原生 let ajax=new XMLHttpRequest() ajax.open('GET', 'http://47.92.50.43:8888/sys/siteinfo',//url()地址 true) ajax.sen

2020-07-03 11:56:07 657

原创 jq制作飞机大战小游戏

飞机大战小游戏页面布局： <h1 class="score">0</h1> <div class="contain"> <div class="plane"></div> </div> <style> * { margin: 0; padding: 0; } .contain {

2020-07-03 11:18:36 525

原创 jq制作表格、日历以及事件委托

事件委托1、事件委托：主要是通过冒泡原理（委托父集或者祖先集），委托就是让别人也可以完成所指定的事件，对于新创建的元素，直接拥有指定事件。例子：使用委托添加按钮在页面中加入一个按钮，通过这个按钮添加其他按钮，再利用委托，使得新生成的按钮点击后也能生成其他新的按钮。<div class="contain"> <button class="button button-3d button-action button-pill">添加</button>&

2020-07-03 10:59:14 409

原创初识jquery以及示例

初识jq1、jq与js的相互转换<div id="app">simba <div class="app">ace <div class="app1">xixi</div> <div class="app2">嘿嘿</div> </div> <div class="app">ace</div> <div class="app"&gt

2020-06-29 16:14:09 132

原创当页面滑动到一定位置，元素固定位置、页面进度条以及翻屏效果

页面进度条和元素固定位置1、页面进度条：当滚动条在页面中滚动时，页面上部会出现等比例的颜色填充效果。 <div class="progress"> </div> //制作进度条 <div style="height: 500px;"></div> <div class="demo"></div>//需要固定位置的页面元素 <div class="item"></div> *{ margin

2020-06-26 09:46:24 1829

原创 JS练习一

JS练习一存一个有效期为7天的cookie，key = nickname, val = Acefunction setCookie(key, val, expires) { //封装cookie（设置cookie） let now = new Date() now.setDate(now.getDate() + expires) //设置生命周期 document.cookie = `${key}=${val};expi

2020-06-22 19:23:08 205

原创 JS基础

JS基础知识点数据类型number：数字string：字符串boolen：布尔类型（true、false）null：空undefined：未定义（与null相比，null占内存）内置对象数组（具有相同数据类型的一个或者多个值的集合）常用的内置方法concat（）：合并两个数组join（）：将数组转化为字符串，（）内写的是连接方式，不写默认为‘，’号toString（）：将数组变成字符串reverse（）：将数组元素逆序。原数组改变sort（）：将数组排序（存在缺陷，他的排序是

2020-06-22 17:28:22 168 1

sj1255897381的博客