- 博客(25)
- 收藏
- 关注
RSS订阅原创 js的DOM节点操作
节点操作定义一、节点分为几种不同的类型二、操作节点的属性定义DOM ：文档对象模型DMO是针对HTML文档的一个API（应用程序编程接口），DOM描绘了一个层次化的节点树，允许开发人员添加，删除，修改页面的某一部分。一、节点分为几种不同的类型节点名 nodeType nodeName nodeValue元素节点 1 大写的标签名 null文本节点 3 ‘#text’ 文本的内容注释节点 8 ‘#comment’ 注释的内容文档节点 9 ‘#document’ null元素节
2020-11-25 09:50:15
193
原创 通过JavaScript使div随时居中
学习内容：下面就跟大家一起简单分析下JS是如何实现让DIV盒子，在页面自动居中，并且随着页面的变动，也能居中。思路： 一、首先我们的DIV盒子模型，一般是绝对定位于浏览器的，那么首先我们可以先获取整个页面（浏览器的可视区）的宽度、高度。 二、然后获取自身DIV盒子的宽度、高度。 三、用浏览器可视区的宽度、高度，减去DIV自身的宽度，高度，然后除以2。就可以获取到DIV距离页面的top值，left值。在赋值给DIV相应的top值，left值。 四、随着我们的浏览器窗口的改变，让DIV
2020-11-22 16:36:14
1418
1
原创 git笔记
git config --global user.name "Your Name" #用户名git config --global user.email "email@example.com" #邮箱git config --list 查看信息git version 查看git版本git init 初始化仓库git add 1.txt 添加文件git commit -m 描述git status 查看状态中间少了一步 设置sshssh-keyge...
2020-11-10 15:04:27
167
原创 vue生命周期
生命周期一、vue的生命周期是什么？二、官网给的vue生命周期的图片提示：以下是本篇文章正文内容，下面案例可供参考一、vue的生命周期是什么？vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。二、官网给的vue生命周期的图片vue生命周期可以分为八个阶段，分别是：beforeCreate(创建前),created(创建后)，beforeMount(载入前)
2020-10-20 09:14:32
182
原创 Vue路由守卫
Vue路由守卫全局守卫代码：main.js页面：to是要去的页面，from是要离开的，next是个函数，否则就展示哪个页面 const auth = { isLogin () { return false } }// 全局守卫router.beforeEach((to, from, next) => { // console.log(to) if (to.path === '/more') { console.log('盘查') if (au
2020-10-20 08:59:36
1007
1
原创 CSS 三角制作
如图结构<div class="box1"></div><div class="box2"></div><div class="jd"> <span></span></div>css<style> .box1 { width: 0; height: 0; /* border: 10px solid pink; */
2020-09-26 10:35:47
124
原创 jQuery的children()和find()方法
1.children() 方法返回被选元素的所有直接子元素。（直接子元素，只找儿子不要孙子）2.find（）方法获得当前元素集合中每个元素的后代布局<div class="nav"> <p>我是p1</p> <div> <p>我是p2</p> </div></div><script> $(function(){ //children 选亲儿子 $('.nav').chi
2020-09-22 09:27:27
1640
原创 jQuery的parent和parents方法
1.parent 返回的是最近的父级元素 ，亲爸爸2.parents ( ) : 获取除被选中元素的所有父元素； <script> $(function(){ //parent 返回的是最近的父级元素 ，亲爸爸 console.log($('.son').parent()); //找到father console.log($('.father').parent()); //找到yeye //parents ( ) : 获取除被选中元素的所
2020-09-22 09:03:02
318
原创 Vuex的mapState
Vuex的mapStatestore.js state: { // 自定义共享状态 istabbarshow: true, },在某个页面调用的时候可以直接调用 即{{ this.$store.state.istabbarshow}} 但是要是想要数据很多的话这样就比较麻烦了使用computed 计算属性 computed: { isshow () { return this.$store.state.istabbarshow } }
2020-08-27 18:16:22
221
原创 this.$router.push() 的用法
1、作用：this.$router.push() 可以通过修改url实现路由跳转。2、push 后面可以是对象，也可以是字符串：// 字符串this.$router.push('/home/first')// 对象this.$router.push({ path: '/home/first' })// 命名的路由this.$router.push({ name: 'home', params: { myid: id }}).Params由于动态路由也是传递params的，所以在 this
2020-08-24 13:47:45
11639
原创 vue二级路由的配置
二级路由的配置在router中配置路由import Vue from 'vue'import VueRouter from 'vue-router'// @ 指向src 用./容易混import Comingsoon from '@/views/Film/Comingsoon'import Nowplaying from '@/views/Film/Nowplaying'import Mess from '@/views/Mess'import Person from '@/views/P
2020-08-24 10:42:10
797
原创 vue路由声明式导航
声明式导航使用前请先配置好路由，上一节在components下面新建一个Tabbar组件<template> <div class="box"> <ul> <!-- 声明士导航 --> <router-link to='/mess' tag='li' activeClass="mycolor"> mess</router-link>
2020-08-24 09:48:44
246
原创 vue的一级路由配置
vue的一级路由配置router的路由配置：import Vue from 'vue'import VueRouter from 'vue-router'// @ 指向src 用./容易混import Mess from '@/views/Mess'import Person from '@/views/Person'import More from '@/views/More'Vue.use(VueRouter)/* const auth = { isLogin () { .
2020-08-24 09:06:46
401
原创 vue配置反向代理解决跨域问题
配置反向代理解决跨域问题反向代理用来解决前端跨域问题，设置很简单，在 vue-cli 项目的 config 文件夹 index.js 文件下进行如下设置即可：module.exports = { devServer: { proxy: { '/ajax': { target: 'https://m.maoyan.com', // 跨域地址 // ws: true, changeOrigin: true // 是否跨域 }
2020-08-23 16:28:06
863
原创 vue的多个单文件组件
vue的多个单文件组件一、多个单文件组件一、多个单文件组件多个组件可以在一起使用，它们的关系可以是：平行的、嵌套包含的目标：应用两个组件，它们是彼此平行的关系使用：把组件用import引入、用conmponent注册。1、注册后引用（全局定义方式）：<script>import navbar from './components/Navbar'import sidebar from './components/Sidebar'//全局组件//模块化import Vue .
2020-08-22 13:34:47
383
原创 vue单文件组件
vue单文件组件一、单文件组件介绍二、结构组成一、单文件组件介绍vue中的单文件组件是以.vue扩展名结尾的文件，在这个文件中封装了html、js、css的代码，它自身是一个独立的组件，所以成为单文件组件二、结构组成<template> <div>html代码</div></template><script>export default {js代码}</script><style lang="s.
2020-08-22 13:11:15
148
原创 vue脚手架安装
vue脚手架安装vue脚手架安装及vue脚手架创建项目（详细步骤）首先，我们要先到nodejs官网下载与电脑适配的nodejs文件到电脑上并安装脚手架:（3）如何:安装脚手架的工具命令:npm i -g @vue/cli 电脑安装完命令后 ： 直接创建 vue create 文件夹名字用命令反复创建脚手架:cd 要保存项目的文件夹完整路径比如: cd C:\xampp\htdocs\dd\6_VUE\day04用vue命令工具，创建一个项目的脚手架代码
2020-08-21 09:25:42
356
原创 Vue.js之入门教程
Vue.js学习笔记一. Vue.js是什么？1.Vue.js 特点2.Vue.js 安装二. 1.创建第一个 Vue 应用2.绑定元素特性3.v-html4.v-if与v-show的区别一. Vue.js是什么？Vue.js是一套构建用户界面（view）的MVVM框架。Vue.js的核心库只关注视图层，并且非常容易学习，非常容易与其他库或已有的项目整合。1.Vue.js 特点简洁： HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。数据驱动： 自动追踪依赖的模板
2020-08-06 16:00:53
357
原创 Github和Git的基本教程
Github和Git的基本使用Github一. 基本概念 一. 基本概念 仓库(Repository): 存放项目代码，多个开源项目存放多个仓库。收藏（star）：收藏项目。复制克隆项目（fork）：该fork的项目时独立存在的，复制过来自己用发起请求（Pull request）：你新增了功能，觉得不错，想和原本项目一起关注（watch）：关注别人项目，及时收到更新的消息。事物卡片（lssue）：发现代码BUG，但是目前没有成型代码，需要讨论时用。主页：（1）github（2）仓库（3）
2020-08-05 12:46:09
208
原创 微信小程序checked选中与取消并弹出未勾选
wxml<checkbox-group bindchange='checkedTap'> <checkbox value='点击' checked='{{checked}}'/>点我</checkbox-group>js//是否选中checkedTap: function (e) { console.log(e.detail.value) if (e.detail.value =='') { this.data.checked =
2020-07-03 20:46:35
2583
原创 微信小程序radio单选按钮选中与取消
wxml<view bindtap='checkedTap'> <radio checked="{{checked}}">设为默认</radio></view>wxss/* 自定义 radio 样式 */radio .wx-radio-input{ border-radius: 50%; width: 28rpx; height: 28rpx;}/* 选中后的样式 （可根据需求自己修改） */radio .w
2020-07-03 20:19:40
7393
原创 微信小程序text文本的展开与收起
wxml中<text class="title {{content?'content':'content1'}}">做个心平气和的陌生人，正所谓没有经历，哪来的回忆，你好，陌生人，相逢一笑泯恩仇。有时候，我也会埋怨生活总是波折不断，遇到突如其来奇怪的事、奇怪的人，莫名将自己牵扯其中，明明懒得理会，却又咽不下刹那间的心塞而影响心情，该如何是好。</text><view bindtap='content'> <view> <butto
2020-06-30 20:41:29
921
原创 微信小程序的跳转方式
1.只能跳转到tabBar配置页面 wx.switchTab({ url: '/pages/index/index', });tabBar配置页面，app.json里 "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" },{ "pagePath": "pages/me/me", ...
2020-06-30 11:13:43
197
原创 微信小程序实现拨打电话
wxml中<view class="phone">联系电话 : <text>150343188888</text></view><view class="tel" bindtap='tels'>拨打</view>js中 tels:function () { wx.makePhoneCall({ phoneNumber: '15034318888',////此号码并非真实电话号，仅用于测试
2020-06-30 10:10:21
2359
原创 微信小程序中实现点击复制
wxml中<textbindtap="fun"selectable="true">复制的内容</text>js中fun:function(){wx.showToast({title:'复制成功',})wx.setClipboardData({data:"复制内容",success:function(res){wx.getClipboardD...
2020-06-30 09:38:31
1957
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人