- 博客(45)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 轮播图设计
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Vue实现轮播图</title> <style type="text/css"> body{ margin: 100px auto; background-color: #F7F7F7; } #app{ position: relative; .
2022-01-22 10:50:02
403
原创 4.5 路由嵌套
实现路由嵌套有2个步骤：创建对应的子组件，并在路由映射中进行配置(添加children属性，该属性为数组) 组件内部使用<router-view>标签在编辑器中注意下这种写法：ul>li*6>{消息$}
2022-01-18 21:45:19
697
原创 行内元素包含块元素不会继承属性
示例：<a href="#"> <i class="iconfont icon-jishi"></i> <p>保障服务</p></a>a{ color: #FFFFFF; opacity: .7;}P标签不会调整字体颜色，因为行内元素的块元素不会继承属性。a{ display: block; color: #FFFFFF; opacity: .7;}添加display:block后，生效
2022-01-15 21:20:33
168
原创 4.4 vue-router的安装和配置
vue-router是Vue.js官方的路由插件，它是和Vue.js深度集成的，适用于构建单页面应用。vue-router是基于路由和组件的。路由用于设定访问路径，将路径和组件映射起来。 在vue-router的单页面应用中，路径的改变就是组件的切换安装vue-routernpm installvue-router --save 在src中创建router文件夹，在router文件夹下创建index.js文件，在此文件中配置路由相关信息index.js中的内容import...
2022-01-06 21:31:44
497
原创 4.3 认识Vue-cli3
Vue-cli3与2版本有很大区别Vue-cli3基于webpack4打造，Vue-cli2是基于webpack3； Vue-cli3设计原则是0配置，移除了build和config等目录； Vue-cli3提供了vue ui命令，提供了可视化配置； 移除了static文件夹，新增puclic文件夹，并且index.html移至public中； 现在做项目都用Vue-cli3。Vue-cli3创建步骤Please pick a preset? 有Default ([Vue 2] babel,.
2022-01-06 00:23:59
463
原创 4.2 runtime-only和runtime+compiler的区别
runtime-only:new vue({ el:'#app', render:h=>h(app)})render:h=>h(app)是箭头函数，相当于render:function(h) { return h(app) }执行步骤：render函数->vdom（虚拟dom）->UI //性能更高new Vue({ el: '#app', render:function(createElement){ //1.createE..
2022-01-04 21:37:54
607
原创 4.1 什么是脚手架（CLI）
Vue CLI叫做脚手架。CLI：Command-Line Interface，翻译为命令行界面，俗称脚手架。如果你只是简单写几个Vue的Demo程序，那么你不需要Vue CLI。使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。使用条件：Node8.9以上版本、NPM如果安装过慢，可以安装淘宝镜像，通过cnpm安装。npm install -g cnpm --registry=https://registry.npm.taobao.org这样就可以使用cnpm命
2021-12-16 21:56:19
2199
原创 3.4 webpack的配置抽离
通过merge插件实现配置文件合并npm install webpack-merge --save-dev"build": "webpack --config 配置文件相对路径","dev":"webpack-dev-server --open --config 配置文件相对路径"
2021-12-16 21:24:53
190
原创 安装Vue安装脚手架以及一直卡着不动的问题
下载一个cnpm （注释：淘宝npm镜像，这个是阿里把外国的npm服务器搬到我们中国来了，用淘宝镜像npm下载一些配置文件会更快一些）npm install -g cnpm --registry=https://registry.npm.taobao.org
2021-11-06 11:53:22
547
原创 npm淘宝镜像和默认镜像切换
1.得到原本的镜像地址npm getregistry>https://registry.npmjs.org/设成淘宝的npm config set registry http://registry.npm.taobao.org/2.换成原来的npm config setregistry https://registry.npmjs.org/3.mac 下的chromedriver老是下载不下来，解决办法npm install chromedriver --c...
2021-11-06 11:04:47
399
原创 3.3 创建本地服务器
webpack提供一个可选的本地开发服务器，服务器基于node.js搭建，内部使用express框架，可以让浏览器自动刷新显示修改结果。（服务器只会在内存中保存修改，npm run build后才将修改保存到硬盘文件）步骤1：本地服务器是一个单独的模块，在使用之前先安装它。npm install [email protected] --save-dev步骤2：修改webpack.config.js。...
2021-09-24 19:58:21
440
原创 3.2 Vue动画过渡组件transition
<transition name="qiqiu"> <img v-show="show" src="https://abc/abc.jpeg" ></transition>transition的name属性如果不指定，默认为v。<style type="text/css"> img{ width: 100px; } .qiqiu-leave,.qiqiu-enter-to{ opacity: 1; transf...
2021-09-23 12:21:55
204
原创 3.1 webpack的plugin
plugin是什么？plugin是插件的意思，通常用于对某个现有的架构进行扩展。webpack中的插件就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等。loader和plugin区别loader主要用于转换某些类型的模块，它是一个转换器。plugin是插件，它是对webpack本身进行扩展，它是一个扩展器。plugin使用过程 步骤1：通过npm安装需要使用的plugins(某些webpack...
2021-09-13 19:05:23
203
原创 获取微信用户信息
最近好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时，突然变成了下面这样。错误图示很多小伙伴肯定就疑虑了，明明我代码没有做任何改动啊，怎么突然就这样了呢。还记得我们之前应该长这样啊。石头哥最近也遇到这样的问题了，我第一时间想到的原因有两个1，微信官方服务器挂了（概率很小）2，微信又改规则了。。。带着这样的疑虑，去问了下微信小程序官方人员。得到的答案是。。。心理一万个。。。。。 哎，没办法，既然官方说改规则，咱们作为弱势群体，只能跟着官方规...
2021-08-10 22:16:16
115
原创 发起（获取）用户授权(authorize)
API：wx.authorize功能：向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据，但不会实际调用对应接口。如果用户之前已经同意授权，则不会出现弹窗，直接返回成功。示例：wx.authorize({ //scope为获取授权的范围，可查询scope列表文档 scope: 'scope.record', success () { // 用户已经同意小程序使用录音功能，后续调用
2021-07-19 12:43:49
3645
原创 微博项目学习
跳转页面时获取发起跳转页面的data数据在跳转后页面使用如下代码：constpages=getCurrentPages()const 常量名称=pages[0].data.具体数据
2021-06-23 21:10:29
131
原创 01 SQL学习
数字属性列（包括 整数，浮点数）的条件筛选表格式Operator（关键字） Condition（意思） SQL Example(例子） =, !=, < <=, >, >= Standard numerical operators 基础的 大于，等于等比较 col_name!=4 BETWEEN … AND … Number is within range of two values (inclusive) 在两个数之间 col_n..
2021-05-25 12:17:21
90
原创 2.6 weppack
什么是webpack？从本质上来讲，webpack是一个现代的javascript应用的静态模块打包工具。我们从两个点来理解模块和打包。目前浏览器仅支持ES6中的前端模块化规范，而且webpack不但支持ES6模块化规范，还支持commonJS、AMD、CMD等规范。通过webpack的打包（转换）能够让大部分浏览器识别上述模块化规范，而且打包时会自动处理模块之间的依赖。webpack其中一个核心就是让我们进行模块化开发，并会帮助我们处理模块间的依赖关系。而且不仅仅是javascript文件，CS
2021-05-24 13:39:47
308
原创 01 node读写文件
文件名不要使用node.js来命名，除了这个随便起，而且最好不要使用中文。node中没有BOM和DOM。浏览器中的javascript是没有文件操作能力的，但node中的javascript具有文件操作能力node的文件操作在node中如果想要进行文件操作，必须引入fs这个核心模块。在fs这个核心模块中提供了所有的文件操作相关API。例如：fs.readFile用来读取文件node中加载模块使用commonJS规范。函数格式：fs.readFile(cFilePath,callback
2021-05-23 22:41:53
158
原创 2.5 前端模块化
前端模块化的雏形let moduleA=(function(){ let mObj={} let name='模块化变量内容' let funcSum=function sum(x,y){ return x+y } mObj.name=name mObj.funcSum=funcSum return mObj})()commonJSnode使用的commonJS规范导出的两种写法// 方法1:直接在module.exports里写变量及函数方法module.e
2021-05-23 10:33:52
166
原创 2.4 插槽slot的基本使用
slot的基本使用最好的封闭方式就是将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。是搜索框还是文字还是菜单，由调用者自己来决定。可以给插槽默认值，方法是在组件中的slot标签内写明默认内容。如果调用组件时没有指定插槽内容，将使用默认值。<body> <div id="app"> <!-- 在此处写入slot内容 --> <cpn><a href="#">
2021-05-22 22:08:31
463
原创 2.3 父子组件的访问方式
有时候我们需要父组件直接访问子组件（通过$children或$refs），子组件直接访问父组件（$parent）。 $children this.$children是一个对象数组类型，它包括所有子组件对象。通过该对象数组可以读或写子组件中的数据、调用子组件的方法。弊端是有多个子组件时通过对象数组下标访问子组件，无法适应子组件的数量发生变化的情况。<body> <div id="app"> <cpn></cpn> <!-- 使用单
2021-05-22 11:08:24
115
原创 2.2 父子组件的通信
父传子props通过props向子组件传递数据,通过事件向父组件发送消息。props的值有两种方式：1.字符串数组，数组中的字符串就是传递时的名称；2.对象。对象可以设置传递时的类型，也可以设置默认值等。1.字符串数组格式：props:["属性名","属性名",...]<div id="app"> <!-- 通过属性wd传递数据 --> <cpn :wd="message"></cpn></div><templat
2021-05-16 22:35:03
113
原创 1.6 表单绑定
v-model绑定input<div id="app"> //通过v-model实现双向绑定 <input type="text" v-model="message" />{{message}} //v-model的实现原理 <input type="text" @input="message=$event.target.value" :value="message" />{{message}}</div>..
2021-05-09 08:30:02
103
原创 1.5 v-show与v-if的区别
v-show与v-if的区别v-show相当于增加了元素样式 display:none,v-if决定元素是否创建
2021-04-09 21:08:56
130
原创 微信小程序tcbRouter
安装tcbRoutergitHub中搜索tcb-Router，找到使用方法：npm install --save tcb-router 在使用tcbRouter的云函数文件夹中右键选择在终端打开输入并执行 npm install --save tcb-router 安装成功以后，在package.json文件中就会出现tcb-router依赖信息使用tcbRouter在云函数中使用require加载模块，模块名与package.json中的保持一致。const tcbRouter=re.
2021-04-07 21:33:55
484
原创 微信小程序组件的使用
1.在想要使用组件的JSON文件中引用组件，注意组件名称命名规范。{ "usingComponents": { "x-playlist" : "/components/playlist/playlist" }}2.组件的属性应用在引用组件的wxml中写上属性名称以及属性值//属性名为playlist<x-playlistplaylist="{{item}}"></x-playlist>在组件中接收对应的属性值。有两种写法proper.
2021-04-07 20:36:56
268
1
原创 微信小程序上拉加载下拉刷新要点
上拉加载1.新建云函数。通过skip、limit、orderBy子句获取数据。cloud.init()// 云函数入口函数exports.main = async (event, context) => { return await cloud.database().collection('playlist') .skip(event.start) .limit(event.count) .orderBy('CreateTime','desc')
2021-04-07 20:13:13
179
原创 1.4 计算属性
计算属性的基本使用对data中变量进行加工、组合、处理计算属性不必在末位加括号( )<div id="app"> <!-- 没有使用计算属性写法 --> <h2>{{firstName+' '+lastName}}</h2> <h2>{{firstName}} {{lastName}}</h2> <!-- 使用计算属性写法 --> <h2>{{fullName}}</h2>
2021-03-27 22:31:42
356
1
原创 微信小程序生成二维码方法1
qrCode类库下载链接：https://pan.baidu.com/s/1V2Fnut5r5zyVXpuB3XBCjA 提取码：9sz2//ES6语法引入qrcode.js工具类importQRfrom'../../utils/qrcode.js'//生成二维码QR.api.draw('二维码内容',"canvas组件canvas-id",宽,高)示例：QR.api.draw('http://csdn.net',"mycanvas",300,300)...
2021-03-24 17:46:22
425
原创 1.3 v-bind介绍
v-bind前面学习的指令主要作用是将值插入到我们模板的内容当中，但是除了内容需要动态决定外，某此属性也需要动态来绑定。比如动态绑定a元素的href属性，动态绑定img元素的src属性。动态指定属性不能使用Mustache语法。<div id="app"> 动态指定属性 <a v-bind:href="url">百度</a></div><script type="text/javascript"> const a
2021-03-20 11:07:29
1200
原创 1.2 Vue的MVVM
view层:视图层,通常就是DOM层,主要作用向用户展示各种信息 model层:数据层,从服务器请求的数据或者写死的数据 viewmodel层:视图模型图,是view和model沟通的桥梁.一方面实现了数据的绑定,将model的必变实时反应到view中;另一方面实现了DOM的事件监听,dom发生事件改变model.数据的代理(obj)<div id="app"> <h2>当前计数:{{counter}}</h2> <button type="but
2021-03-19 22:32:06
268
原创 1.1 Vue的安装
Vue下载地址：https://cn.vuejs.org/，有两个版本可以选择。Vue开发环境版本：包含了有帮助的命令行警告； Vue生产环境版本：优化了尺寸和速度。Vue的安装方式（3种）方式一：直接CDN引入开发版本：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>生产版本：<script src="https://cdn.jsdelivr.net/npm/vue@2.
2021-03-19 21:35:19
117
原创 [微信小程序]scroll-view组件使用
一、如何控制滚动方向 scroll-view设置为scroll-x或者scroll-y二、竖向滚动设置规则 scroll-view 的 CSS 属性 height 设置有值三、横向滚动设置规则scroll-view 的 CSS 属性 white-space : nowrap view 的 CSS 属性 display : inline-bl...
2019-12-03 17:05:36
390
原创 CSS文本垂直居中的几种方法
方法1：height=父容器高度方法2：display=table-cell; vertical-align:middle;
2019-12-03 16:56:26
317
转载 网上找的VB.NET实现PPPoE拨号,有错误但可借鉴
Option Explicit OnImports SystemImports System.TextImports Microsoft.Win32Imports System.Runtime.InteropServicesPublic Class FormMain Public Const MAX_PATH As Int32 = 260 Publi
2014-01-07 09:47:29
1196
转载 使用Rasdial这个命令来实现自动拨号、断开网络（更改IP地址）
使用Rasdial这个命令来实现自动拨号、断开网络（更改IP地址） 假设你的电脑的PPPOE拨号连接的名字是“宽带连接”，用户名是“abc”，密码是 “123”。 开始拨号命令：Rasdial 宽带连接 abc 123断开拨号命令：Rasdial 宽带连接 /disconnect 可直接使用.NET调用DOS命令。取出返回值就知道有没有
2014-01-07 08:29:24
9487
原创 WebBrowser控件技巧
1.给页面注入Javascript并执行'脚本内容为:javascript:document.Survey_Form.Action.value = 'SurveyOverSubmit';Survey_Form_Submit(); Dim ele As HtmlElement ele = Web.Document.CreateElement("script") ele.SetAttr
2014-01-04 21:24:01
1008
Lotus 的入门学习
2011-04-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人