<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[codezha的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/codezha</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; codezha]]></copyright><item><title><![CDATA[input输入框按照字符数限制输入]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/122808924</link><guid>https://blog.youkuaiyun.com/codezha/article/details/122808924</guid><author>codezha</author><pubDate>Mon, 07 Feb 2022 15:03:19 +0800</pubDate><description><![CDATA[实现效果：按照字符数限制用户输入长度，汉字为两个字符，数字和字母为一个字符，超出字符长度限制时，自动去掉多余部分来限制用户输入。通过自定义指令实现上述功能

vue文件

&lt;template&gt;
  &lt;div&gt;
    &lt;textarea v-limitTextLen="titleMaxLength" v-model="textareaValue"/&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export defaul]]></description><category></category></item><item><title><![CDATA[console调试]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/118584724</link><guid>https://blog.youkuaiyun.com/codezha/article/details/118584724</guid><author>codezha</author><pubDate>Thu, 08 Jul 2021 23:54:27 +0800</pubDate><description><![CDATA[输出
log、info、warn、error



占位符
%d、%s、%i、%f、%o、%c





占位符
作用




%d
数字


%s
字符串


%i
整数


%f
浮点数


%o
对象


%c
输出样式





调试
console.debug()


清空
console.clear()


表格
var thisObj = [
　　　　{ name: ‘quber’, email: ‘qubernet@163.com’, qq: 757200834 },
　　　　{ name.]]></description><category></category></item><item><title><![CDATA[vue中子组件的created、mounted钩子中获取不到props的问题]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/118188453</link><guid>https://blog.youkuaiyun.com/codezha/article/details/118188453</guid><author>codezha</author><pubDate>Thu, 24 Jun 2021 15:02:31 +0800</pubDate><description><![CDATA[问题描述：父组件向子组件传递了一个参数，参数有效值通过接口请求动态获取，子组件可能在获取到数据之前就执行created 、 mounted  生命周期，而且只执行一次，所以只能拿到默认值，我们期望的正常效果是子组件可以正常获取到父组件传递过来的参数
解决方案：子组件中为传递的参数添加watch监听，来接收参数
watch: {
  propDataKey: {
    handler:(newVal, oldVal) {
      this.xx = newVal
    },
    //监听对象是数组]]></description><category></category></item><item><title><![CDATA[vue-treeselect组件使用]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/118179231</link><guid>https://blog.youkuaiyun.com/codezha/article/details/118179231</guid><author>codezha</author><pubDate>Thu, 24 Jun 2021 10:35:57 +0800</pubDate><description><![CDATA[官网传送门

安装依赖

npm install --save @riophae/vue-treeselect


引入组件

&lt;template&gt;
&lt;/template&gt;

&lt;script&gt;
  // 引入组件
  import Treeselect from '@riophae/vue-treeselect'
  // 引入样式
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export d]]></description><category></category></item><item><title><![CDATA[css实现操作当前元素，改变子元素或父元素的样式]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/118176938</link><guid>https://blog.youkuaiyun.com/codezha/article/details/118176938</guid><author>codezha</author><pubDate>Thu, 24 Jun 2021 09:37:01 +0800</pubDate><description><![CDATA[悬浮父元素，改变子元素样式

.parent:hover .children1 {
	//修改子元素样式
	color: red;
}


点击子元素，改变父元素样式
focus-within伪类选择器，它表示一个元素获得焦点或该元素的后代元素获得焦点

.parent:focus-within {
	//修改父元素样式
	color: red;
}


...]]></description><category></category></item><item><title><![CDATA[Javascript按照字符数截取字符串]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/117960963</link><guid>https://blog.youkuaiyun.com/codezha/article/details/117960963</guid><author>codezha</author><pubDate>Wed, 16 Jun 2021 18:07:34 +0800</pubDate><description><![CDATA[function substrByByte (str, maxLength) =&gt; {
  if (!str || !maxLength) {
    return ''
  }
  let result = ''
  let temp = str.replace(/[^\x00-\xff]/g, "**")
  let temp1 = temp.substring(0, maxLength)
  
  let x_length = temp1.aplit("\*").length - 1
  let]]></description><category></category></item><item><title><![CDATA[van-picker 动态设置当前选中项]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/117331226</link><guid>https://blog.youkuaiyun.com/codezha/article/details/117331226</guid><author>codezha</author><pubDate>Thu, 27 May 2021 16:16:05 +0800</pubDate><description><![CDATA[使用vant-field和van-picker、van-popup组合实现单选类型表单时，通常我们需要pick每次显示时，默认选中的是当前有效值，但往往会出现这样的情况

我们可以在没法显示picker的时候，动态设置当前选中项，代码示例如下
//pick中指定ref属性为myPicker
//currentIndex为当前有效值对应的索引值
this.$refs.myPicker.setColumnIndex(0, currentIndex)

setColumnIndex有两个参数，第一个参数colum]]></description><category></category></item><item><title><![CDATA[webAPP遇到的iOS兼容性问题小结（持续更新中）]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/115504519</link><guid>https://blog.youkuaiyun.com/codezha/article/details/115504519</guid><author>codezha</author><pubDate>Thu, 08 Apr 2021 09:30:59 +0800</pubDate><description><![CDATA[时间格式化
Safari浏览器中不支持‘-’格式时间，格式化时间会出现异常，例如’2021-04-08’需要转换成’2021/04/08’格式，字符串转换方法如下

date= date.replace(/-/g,'/')


table布局
音频播放


]]></description><category></category></item><item><title><![CDATA[vue项目中eventBus总线机制]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/114010730</link><guid>https://blog.youkuaiyun.com/codezha/article/details/114010730</guid><author>codezha</author><pubDate>Wed, 24 Feb 2021 10:08:54 +0800</pubDate><description><![CDATA[使用场景
vue项目中，某些特殊情况下，我们需要不想关的组件之间通信，这种情况我们可以通过eventBus来解决问题，通过事件的监听和触发来实现通信和参数传递
封装
新建eventBus.js文件

let events = {}
export default {
  //事件监听
  on(eventName,handler){
    if (typeof handler === 'function') {
      if (!events[eventName]) {
        events[.]]></description><category></category></item><item><title><![CDATA[弹性布局]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/113676964</link><guid>https://blog.youkuaiyun.com/codezha/article/details/113676964</guid><author>codezha</author><pubDate>Fri, 05 Feb 2021 11:03:53 +0800</pubDate><description><![CDATA[概述
弹性布局理解为在一个容器中，所有子元素按照规则排列展示，所有的子元素称为“项目”，容器本身存在主轴（水平方向）和交叉轴（垂直方向）


容器属性



flex-direction&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主轴项目排列方向
flex-wrap&nbsp;&nbsp;&nbsp;&nbsp;&nbsp..]]></description><category></category></item><item><title><![CDATA[Chrome谷歌浏览器离线安装vue-devtool]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/113308201</link><guid>https://blog.youkuaiyun.com/codezha/article/details/113308201</guid><author>codezha</author><pubDate>Thu, 28 Jan 2021 10:04:35 +0800</pubDate><description><![CDATA[开发vue项目过程中vue-devtool可以帮助我们只管看到对应的数据，方便调试，安装方法有以下两种
1、在Chrome商店，搜索vue-devtool，安装后启用（网络可能不通）
2、GitHub下载插件，完成安装并启用
下面我们来介绍下方法二的详细操作步骤

下载插件
下载链接
下载后解压
安装依赖
vue-devtools-master文件夹下先后执行以下命令

npm install
npm run build

命令执行完成后，会在shell-&gt;chrome目录下生成相应文件


浏览器安]]></description><category></category></item><item><title><![CDATA[JavaScript数据数据类型判断]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/112346268</link><guid>https://blog.youkuaiyun.com/codezha/article/details/112346268</guid><author>codezha</author><pubDate>Fri, 08 Jan 2021 11:08:45 +0800</pubDate><description><![CDATA[数据类型
基本数据类型：string、number、boolean、null、undefined、symbol
引用数据类型：object、array、function
typeof
typeof操作符返回一个字符串，表示未经计算的操作数的类型

console.log(typeof 42);
// expected output: "number"

console.log(typeof 'blubber');
// expected output: "string"

console.log(type.]]></description><category></category></item><item><title><![CDATA[Vue项目全局和局部组件]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/110840775</link><guid>https://blog.youkuaiyun.com/codezha/article/details/110840775</guid><author>codezha</author><pubDate>Mon, 07 Dec 2020 21:17:44 +0800</pubDate><description><![CDATA[Vue项目开发过程中，通常我们会把一些常用或者通用的功能抽取出来作为全局或者局部组件，代码复用率和项目扩展性相对会好一点，下面我们详细看下具体的定义和使用吧
定义组件内容
新建TestComponent.vue文件，并添加组件内容
&lt;template&gt;
  &lt;div&gt;
    {{ name }}
  &lt;/div&gt;
&lt;/template&gt;
&lt;style lang="stylus" scoped&gt;
//样式...
&lt;/style&gt;
&lt]]></description><category></category></item><item><title><![CDATA[Vue项目中render函数的使用]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/110828425</link><guid>https://blog.youkuaiyun.com/codezha/article/details/110828425</guid><author>codezha</author><pubDate>Mon, 07 Dec 2020 20:56:33 +0800</pubDate><description><![CDATA[Vue项目中，大多数情况我们都可以通过模板来创建HTML，	有些场景需要使用JavaScript来动态创建HTML，这种情况我们可以使用render函数来实现，下面我们来看下详细使用方法。
函数调用简写
render: function (createElement) {
  return createElement(App)
}

按照ES6语法简写函数
render (createElement) {
  return createElement(App)
}

再简写
render (createEl]]></description><category></category></item><item><title><![CDATA[vue-router路由实现原理]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/110584258</link><guid>https://blog.youkuaiyun.com/codezha/article/details/110584258</guid><author>codezha</author><pubDate>Thu, 03 Dec 2020 23:53:50 +0800</pubDate><description><![CDATA[通常我们使用Vue来开发单页面应用（SPA）时，通常都会使用vue-router来实现页面路由跳转。单页面应用采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。
Vue-router提供了以下几种路由跳转方法




方法
作用




router.push
添加新路由


router.replace
替换当前路由


router.go
跳转到指定索引路由


router.back
返回上一个路由


router.forward
跳转下一个路由


下面我们通过vue-ro]]></description><category></category></item><item><title><![CDATA[Vue.use()源码解读]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/110500463</link><guid>https://blog.youkuaiyun.com/codezha/article/details/110500463</guid><author>codezha</author><pubDate>Wed, 02 Dec 2020 22:16:04 +0800</pubDate><description><![CDATA[基本使用方法
官方文档传送门
使用Vue.use()方法注册插件的时候，可以传入函数或带有install方法的对象，install方法和函数的第一个参数总是Vue
Vue.use()方法需要在new Vue()之前调用
原理
源码如下：
/* @flow */

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function |]]></description><category></category></item><item><title><![CDATA[Vue项目多环境访问地址配置]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/110468288</link><guid>https://blog.youkuaiyun.com/codezha/article/details/110468288</guid><author>codezha</author><pubDate>Wed, 02 Dec 2020 09:50:50 +0800</pubDate><description><![CDATA[添加环境变量和多环境地址
src目录下新建const.js文件,并添加类似下面的配置


const env = {
  development: {
    API_BASE_ORIGIN: '/base',
    API_TEST_ORIGIN: '/test'
  },
  test: {
    API_BASE_ORIGIN: 'https://xx.xx.xx1',
    API_TEST_ORIGIN: 'https://xx.xx.xxx1'
  }
  production: {
..]]></description><category></category></item><item><title><![CDATA[Vue-amap  实现获取定位功能]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/109711111</link><guid>https://blog.youkuaiyun.com/codezha/article/details/109711111</guid><author>codezha</author><pubDate>Sun, 15 Nov 2020 22:20:25 +0800</pubDate><description><![CDATA[注册账号并申请key

高德开发平台


引入
public目录下index.html中通过src引入插件
&lt;script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&amp;key=xxxxx"&gt;&lt;/script&gt;



使用
let AMap = window.AMap
AMap.plugin('AMap.Geolocation', function() {
   var geolocati.]]></description><category></category></item><item><title><![CDATA[webApp中H5和原生交互]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/109710350</link><guid>https://blog.youkuaiyun.com/codezha/article/details/109710350</guid><author>codezha</author><pubDate>Sun, 15 Nov 2020 21:36:50 +0800</pubDate><description><![CDATA[开发webAPP的过程中，通常因为业务逻辑或兼容性问题，需要H5和原生APP之间互相调用，以下为具体的代码


操作系统判断
通过浏览器提供的navigator.userAgent判断当前操作系统


function paltform() {
  var ua = navigator.userAgent.toLowerCase()
  //微信
  if (ua.indexOf('micromessenger') !== -1) return 'wechat'
  //ios (ipad/iphone)
]]></description><category></category></item><item><title><![CDATA[fiddler抓取APP数据包]]></title><link>https://blog.youkuaiyun.com/codezha/article/details/108454113</link><guid>https://blog.youkuaiyun.com/codezha/article/details/108454113</guid><author>codezha</author><pubDate>Mon, 07 Sep 2020 19:23:57 +0800</pubDate><description><![CDATA[电脑安装fiddler，安装完成后打开fiddler
电脑开热点共享，手机连接热点，在WiFi设置中添加手动代理，IP配置为电脑IP，端口号配置为8888
fiddler中设置connection
tools -&gt; options  -&gt;connections  配置如下

手机浏览器中输入ip:port（类似于192.xxx.xx.xx:8888），l点击安装证书（iOS需要信任证书：设置-通用-关于本机-证书信任设置，找到对应证书，启用）
手机上操作我们就可以看到抓包信息了


...]]></description><category></category></item></channel></rss>