- 博客(12)
- 收藏
- 关注
RSS订阅原创 vue的指令
⑴v-bind：给元素绑定属性⑵v-on：给元素绑定事件⑶v-html：给元素绑定数据，且该指令可以解析html标签⑷v-text：给元素绑定数据，不解析标签⑸v-model：数据双向绑定⑹v-for：遍历数组⑺v-if：条件渲染指令，动态在DOM内添加或删除DOM元素⑻v-else：条件渲染指令，必须跟v-if成对使用⑼v-else-if：判断多层条件，必须跟v-if成对使用⑽v-cloak：解决插值闪烁问题⑾v-once：只渲染元素或组件一次⑿v-pre：跳过
2021-05-17 10:37:43
98
原创 请vue.cli项目中src目录每个文件夹和文件的用法
assets文件夹是放静态资源；components是放组件；router是定义路由相关的配置;view视图；app.vue是一个应用主组件；main.js是入口文件
2021-05-17 10:35:27
419
原创 Vue的生命周期(11个钩子函数)
⑴beforeCreate(创建前)：在此生命周期函数执行的时候，data和methods中的数据都还没有初始化。⑵created(创建后)：在此生命周期函数中，data和methods都已经被初始化好了，如果要调用 methods中的方法，或者操作data中的数据，最早只能在created中操作。⑶beforeMount(载入前)：在此生命周期函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。⑷mounted(载入后)：此时页面和内存中都是最新的数据，这个钩子
2021-05-13 11:49:10
351
1
原创 如何实现一个自定义组件
自定义组件： 创建子组件的文件，建立组件的模板，把架子搭起来，也就是在子组件中写好<template>视图层，<script>逻辑层<style>css样式层。然后定义好props里面的数据，实现子组件需要的逻辑代码后，也就封装好了，然后直接调用即可。调用的花import引入，同时在父组件<script>（逻辑层）中的components这个对象中写入组件名称，最后挂载到父组件的template中即可。...
2021-05-13 11:43:32
314
原创 vue中的路由嵌套
routes:[{ path:"/home", name:"Home",components:Home, //子路由children:[{ path:"child", name:"Child", components:"Child"}]} ]
2021-05-10 11:08:45
86
原创 Proxy相比于defineProperty的优势
Vue3.0摒弃了Object.defineProperty，改为基于Proxy的观察者机制探索。首先说一下Object.defineProperty的缺点：①Object.defineProperty无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实施响应。 ②Object.defineProperty只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。Vue2.X里，是通过递归 + 遍历data对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历，显然如果能
2021-05-10 10:49:21
467
原创 nextTick的使用
使用nextTick的原因：Vue是异步修改DOM的，并且不鼓励开发者直接接触DOM，但是有时候需要必须对数据更改后的DOM元素做相应的处理，但是获取到的DOM数据并不是更改后的数据，这时候就需要this.$nextTick()；使用：//HTML<button @click="change()">按钮</button><h1 ref="gss">{{msg}}</h1>//JSexport default{name:"app"...
2021-05-10 10:46:34
286
原创 vue双向数据绑定
双向数据绑定是由v-model来实现的。是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图,实现数据和视图同步。数据属性:就是我们经常使用的属性访问器属性:也称存取器属性（存取器属性就是一组获取和设置值的函数）第一步：需要observer（观察者）[əbˈzɜːvə(r)]的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和...
2021-05-07 21:27:40
99
原创 清除浮动的方式以及元素居中的方法！
清除浮动1.为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题1.比如,我给父盒子设置一个boder,内部放两个盒子一个big、一个small，未给big和small设置浮动，则他们会默认撑开父盒子2.如果给这两个盒子都加上了float属性的时候，底部的盒子就会顶上来，因为父盒子没设置高度，变成一条线，big和small已经浮动了小结：当父元素不给高度的时候，内部元素不浮动的时候会撑开，而浮动时父元素会变成一条线，所以这个时候就需要解决浮动.
2021-05-06 16:04:00
224
1
原创 BFC
BFC就是“块级格式化上下文”的意思，简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。1.BFC触发的几种方式：浮动元素，float除none以外的值； 绝对定位元素，position（absolute，fixed）； display 为以下其中之一的值inline-block，table-cell，table-caption； overflow 除了 visible ...
2021-05-06 16:01:04
140
1
原创 css3新特性
css3中新增的一些特性大概可以分为：选择器，背景和边框属性，文本效果，2D/3D转换选择器常规选择器:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */:nth-child(even) /* 按照偶数 */:nth-child(odd) /* 按照奇数 */:disabled /* 选择每个禁用的dom元素 */:checked /* 选择每个被.
2021-05-06 15:46:36
218
2
原创 Flex布局及属性
felx布局是css3中新增的一种布局方式，它大多用于移动端中，在PC端中用的比较少。在PC端中会存在一些兼容性的问题，因为flex是css3新增的一种布局方式，旧版本浏览器可能不支持，所以有时候需要添加浏览器兼容的前缀来解决。flex布局，可以简便.完整.响应式地实现各种页面布局，任何一个容器都可以指定为flex布局，行内元素也可以使用flex布局。！！！注意：设为flex布局以后，子元素的float clear和vertical-align属性将失效。flex的属性：flex-dire.
2021-05-06 14:49:59
204
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人