憨憨的博客

原创 鸿蒙-构建布局（线性布局 Row/Column）

Column容器内子元素在垂直方向上的排列Row容器内子元素在水平方向上的排列

原创 鸿蒙-构建布局（轮播 Swiper）

组件提供滑动轮播显示的能力。

原创 鸿蒙-构建布局（Tabs）

Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏。组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。案例二：上下都有导航栏（下面导航栏固定不可滑动）

原创 鸿蒙HarmonyOS $r(““)与$rawfile(““)的区别

r 用于引用字符串、颜色、尺寸等定义在资源文件中的资源$rawfile 用于引用原始文件资源，如图片、音频等。

原创 鸿蒙（四）导航

原创 鸿蒙（三）模态转场

原创 鸿蒙（二）模态转场

原创 鸿蒙（一）animation

原创 css（二）flex布局

④just-content（子元素在主轴方向上的对齐方式）: flex-strat、flex-end、center、space-between（子元素平均分布在主轴上，首尾元素分别对其主轴起点和终点）、space-around（子元素平均分布在主轴上，且每个元素两侧的间隔相等，首尾元素到容器边缘的间隔会比它们之间的间隔少一半）①flex-direction（子元素的排列方向--主轴）：row（水平）、row-reverse、column（垂直）、column-reverse。

原创 css3（一） transition

③transition-timing-function：规定过渡效果的时间曲线(先快后慢、快、匀速等)，默认是ease。④transition-delay：规定过渡效果合适开始（延迟时间）默认是0。②transition-duration:规定过渡花费的时间，默认是0。①transition-property：规定过渡的css属性的名称。案例：实现效果鼠标悬浮时改变元素的属性。

原创 js(十一)数组方法

数组常见方法

原创 js(七)语句与表达式

（大于、小于）②switch语句判断后直接执行到程序的语句效率较高，if语句有几种判断条件就的判断多少次。语句：语句不一定有值，所以比如alert() for和break等语句就不能被用于赋值。1、if语句（单分支语句、双分支语句、多分支语句）3、switch语句:一般用于值判断，不适用于区间判断。一、分支语句：if分支语句、三元运算符、Switch语句。表达式：表达式可以被求值，所以可以写在赋值语句右侧。程序三大流程控制语句：顺序结构、分支结构、循环结构。三要素：变量的起始值、终止条件、变量变化量。

原创 js(五)数据类型及转换和字符串拼接

/ null表示赋值了,但内容为空（尚未创建的对象）eg: let obj = null。1、基本数据类型：数字、字符串、undefind、null、bollean。1、隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换。通过单引号、双引号、反引号包裹的数据都是字符串，推荐使用单引号。---------null 和undefined--------（2）语法（外面用``,里面${变量名}）综合案列 ：页面输入商品价格、数量、收货地址，打印订单信息。----------字符串------

原创 echarts--dataZoom

3、 backgroundColor： 组件的背景色（底部条条）, borderColor:边框颜色,dataBackground:数据阴影的样式(底部条条内的颜色)1、fillerColor：选中范围填充，moveHandleSize：移动手柄的尺寸高度。2、handleStyle:两侧手柄缩放配置。4、手柄样式可放图片。

原创 Vue(四十三)、路由命名和参数传递

Vue路由命名和传参

原创 Vue（四十二）、路由基本使用

vue路由

原创 Vue（四十一）、Vuex的应用

vuex的应用

原创 echarts（一）、散点图

echarts简单绘制散点图

原创 Vue（三十七）动画与过渡

vue过渡和动画

原创 ES6（一）let、var、const 异同

ES6声明变量

原创 Vue（三十二）插件

总结一、功能：用于增强Vue二、本质：包含install方法的一个对象，install的第一个参数书Vue,第二个以后的参数是插件使用者传递的数据。三、使用（一）、定义插件：对象.install = function(Vue,options){//1.添加全局过滤器Vue.filter(...)// 2.添加全局指令Vue.direcive(...)//3.配置全局混入(合)Vue.mixin(...)//4.添加实例方法Vue.prototype.$my

原创 Vue（三十）rem和媒体查询

一 、rem1、rem 是一个相对单位，，rem的基准是相对于html元素的字体大小2、rem的优点：可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制3、类似于em,em是父元素字体的大小eg:em的使用：父元素设置font-size= 14px,非根元素设置width:2rem,则换成px表示就是28pxrem的使用：根元素（html）设置font-size= 14px,非根元素设置width:2rem,则换成px表示就是28px二、媒体查询

原创 Vue（二十三）组件初始

总结一、组件的概念二、组件的分类三、组件的使用（一）组件使用的三大步骤1、定义组件（创建组件）①定义：使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options 几乎一样，不同点在于：a.el不写（最终所有的组件都要经过一个vm管理，由vm中的el决定服务于那个容器）b.data必须写成函数（避免组件被复用时，数据存在引用关系）2、注册组件①局部注册：在new Vue的时候传入compone.

原创 Vue（二十二）生命周期

总结1、生命周期又名生命周期回调函数，生命周期函数、生命周期钩子，是Vue在关键时刻帮我们调用的一些特殊名称的函数2、生命周期函数的名字不能岁半改3、生命周期函数中的this指向vm或组件的实例对象4、常用的生命周期钩子①mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息【初始化dom操作】②beforeDestory:清除定时器。绑定自定义事件、取消订阅消息【收尾工作】5、关于销毁Vue实例①销毁后借助vue开发者工具看不到任何消息②销毁后自定义事件

原创 Vue（二十一）自定义指令

总结一、自定义语法1、局部指令a、函数类型（用于比较简单的指令）new Vue({ directives:{ 指令名：回调函数 } })b、对象类型（用于需要一些细微处理时）new Vue({ directives: { 指令名：配置对象 } })2、全局指令a、对象类...

原创 Vue（二十）内置指令

总结：常见的内置指令1、v-modle:双向数据绑定，用于表单元素2、v-on：绑定事件监听，可简写为@3、v-bind：单向绑定解析表达式，可简写为:xxx4、v-for:遍历数组、对象、字符串5、v-if、v-else：条件渲染（动态控制节点是否存在）6、v-show:条件渲染（动态控制节点是否展示）7、v-text:向其所在的节点中渲染内容（会替换标签中原有的内容，不会解析标签）案例8、v-html:①作用：向指定节点中渲染包含htm结构中的

原创 Vue（十九）过滤器

过滤器总结：1、定义：对要显示的数据进行特点格式化后再进行显示（适用于一些简单的逻辑处理）2、语法：①注册过滤器a:全局 Vue.fliter(name,callback)b:局部：new Vue（{filters:{}}）②使用过滤器：{{xxx|name}} 或v-bind:属性 = "xxx|name" （xxx ：要过滤的数据，name：过滤器的明名字）3、注意①过滤器可以接受额外参数，多个过滤器可以串联②并没有改变原有的数据，是产生新的对应的数据案列下载

原创 Vue（十八）v-model在表单中的应用

总结：1、v-model收集的是value值，输入类标签不需要手动添加添加value属性，如 type=‘text’等2、非输入类标签需要手动添加value属性，如 type=‘radio’，type=‘checkbox’等3、若<input type="checkbox">①没有配置value属性，收集的是checked(勾选or未勾选，收集的是布尔值)②配置了vlaue属性a、若v-model 的初始值是非数组，那么收集的是checked(勾选or未勾选，收集的是布尔

原创 Vue（十六）列表过滤

案例1、计算属性实现列表过滤2、监听属性实现列表过滤计算属性实现列表排序

原创 Vue（十五）v-for渲染时key的作用

总结1、虚拟DOM中key的作用（key存在于虚拟DOM不会在真实DOM中）key是虚拟dom对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，规则如下（1）旧虚拟DOM中找到了与新虚拟DOM相同的key①若虚拟DOM中内容没有变化，直接使用之前的真实DOM②若虚拟DOM中内容变了，则生成的新的DOM随后替换掉之前页面的真实DOM（2）旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM随后渲

原创 Vue（十三）条件渲染

条件渲染总结一、v-if1、写法（1）.v-if="表达式"（2）v-else-if="表达式"（3）v-else=“表达式”注：v-if可和v-else-if、v-else一起使用，但必须连用结构不能被打断2、使用场景：切换频率较低的场景3、特点：不展示的DOM元素直接被删除二、v-show1、写法：v-show=“表达式”2、用于切换频率较高的场所3、特点：不展示的DOM元素未被移除，样式display:none使用v-if时元素可能无法获取到，v-show元

原创 Vue（十二）样式属性

样式绑定方式一、class形式1、字符串写法：类名不确定需要动态指定2、数组写法：绑定的样式个数不确定、名字也不确定3、对象写法：绑定的样式个数确定、名字也确定，但需要动态决定用不用案列一、class形式...

原创 Vue （十一）计算属性和监听属性

总结：computed和watch之间的区别1、computed能完成的功能，watch都可以完成2、watch能完成的功能computed不一定可以完成，eg:watch可以进行异步操作注：1、被Vue管理的函数最号写成普通函数，这样this的指向是vm或组件的实例对象2、所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数、promise的回调函数）最好写成箭头函数，这样this的指向才是vm或组件的实例对象案例：监听计算属性...

原创 Vue（十）监视属性watch

总结：一、监听1、当被监视的属性发生变化时回调函数自动调用，进行相关操作2、监视的属性（包括计算属性和属性）必须存在才能进行监视3、监视属性的两种写法①new Vue时传入watch配置（确定要监视谁时调用）②通过vm.$watch监视二、深度监听1、Vue中的watch默认不监视对象内部值得改变（只监视一层）2、配置deep:true可以监视对象内部（多层）值得改变注：1、Vue自身可以监视对象内部值得变化，但Vue提供的watch默认不可以2、使用watc

原创 Vue（九）计算属性

总结一、计算属性1、定义：要用的属性不存在，用通过已有的属性（data中的属性）计算得来2、原理：依赖于Object.defineproperty方法提供的getter和setter3、get函数执行时间（get函数返回值就是计算属性的值）①初次读取时会执行函数②当依赖的数据发生变化时再次调用4、优势:与methods相比有内部缓存机制（复用），效率更高，调试方便5、备注①计算属性最终会出现在vm上，直接读取即可使用②如果计算属性被修改，必须写set函数去响应修改，且

原创 Vue（八）键盘事件

总结（vue中常见的按键别名）一、常见的按键别名1、回车enter2、删除 delete(捕获“删除”和“退格”键)3、退出esc4、空格 space5、换行 tab(特殊，必须配置keydown使用)6、上 up7、下down8、左left9、右rightkeydown事件按下键盘不用抬起来就可以触发事件，keyup按下键盘抬起才会触发事件二、Vue未提供别名的按键，可以使用按键原始的key值绑定，有多个单词时转为kebab-case(短线命名)三、系统

原创 Vue（七）事件修饰符

总结1、prevent：阻止默认事件2、stop：阻止事件冒泡（由内往外）3、once：事件只触发一次4、capture：事件捕获（由外往内）5、self：只用event.target是当前操作的元素时才触发事件6、passive:事件默认为立即执行，无需等待事件回调执行完毕其中1-3事件修饰符常用...

原创 Vue（六）事件基本使用

总结1、事件使用v-on：xxx或@xxx绑定，xxx指事件名2、事件的回调需要配置在methods对象中，最终会在vm上3、methods中配置的函数都是被Vue管理的函数，this指向vm或组件实例对象,如果使用了箭头函数其指向会发生改变。4、@click="met"和@click="met($event)'效果一样案例...