06 2021 档案
摘要：第一个是order order决定了flex items的排布顺序 可以设置任意整数（正整数、负整数、0），值越小就越排在前面 默认值是0 align-self 可以指定某个items的位置 #如果所有flex-grow综合sum超过1，每个flex item扩展的size为 flex-basis可
阅读全文
摘要：align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
阅读全文
摘要：flex-wrap决定了flex container是单行还是多行 · nowrap（默认）：单行 · wrap：多行 · wrap-reverse：多行（对比wrap，cross start与cross end相反 flex-flow是flex-direction||flex-wrap的缩写 ·
阅读全文
摘要：align-items决定了flex items在cross axis上的对齐方式 · normal：弹性布局中，效果和stretch一样 · stretch：当felx items在cross axis方向的size为auto时，会自动拉伸至填充flex container · flex-star
阅读全文
摘要：justify-content决定了flex items在main axis上的对齐方式 ###flex-start(默认值):与main start对齐 ###flex-end：与main end对齐 ###center：居中对齐 ###space-between: flex items之间的距离
阅读全文
摘要：认识flex布局 ###flex布局（Flexible布局，弹性布局） ###目前特别在移动端用的多，目前PC段也使用的越来越多了。 #两个重要的概念 开启了flex布局的元素叫flex container flex container 里面的直接元素叫做flex items #设置display属
阅读全文
摘要：通过commonjs开发和通过es6开发的模块 ##然后通过webpack进行打包 // 使用commonjs的模块化规范 const {add,num} = require('./aaa.js') console.log(add(1,2)) console.log(num(100,200)) 使用
阅读全文
摘要：ES模块的导入 通过exports {num，function} 这个是导出变量或者是函数 ES导入模块 通过import {num,function} from 'aaa.js' 这个是模块的导入 ##这导入导出很固定，导入导出的名字必须一样 还有一种是通过exports default 这种是不
阅读全文
摘要：作用域插槽主要作用是可以替换掉组件中的样式标签，自己定义新的样式，标签 第一步在组件中绑定一个属性，将需要传递的数据进行绑定 第二步在调用组件的时候通过slot-scope=“”来绑定数据 第三部可以进行使用 <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：slot 具名插槽的使用 给slot取上别名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} <
阅读全文
摘要：slot插槽的基本使用。 插槽的默认值 如果有多个值，同时放入到组件进行替换时，一起作为替换元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <d
阅读全文
摘要：父组件直接调用子组件中的某个方法。 父组件访问子组件的方式 $children或者$refs 子组件访问父组件的方式 $parent <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
阅读全文
摘要：父子组件实现数据互通 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} <cpn :cnum1="
阅读全文
摘要：父传子数据 子组件在props里面定义一个数组 父组件通过绑定子组件中props的值，来进行传递数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body>
阅读全文
摘要：组件中用函数的原因 如果不用函数返回就会出现连锁反应。 因为组件会被多次复用，所以每次用的时候用函数返回一个data，那么每次的data都不会相互影响。 每一个组件的实例对象都有一个自己的对象。 <!DOCTYPE html> <html lang="en"> <head> <meta charse
阅读全文
摘要：两种组件抽离方式，写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} <cpn></cpn>
阅读全文
摘要：组件的使用 组件的创建 组件的注册 组件的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}}
阅读全文
摘要：#v-model修饰符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} <!-- 绑定信息，字符
阅读全文
摘要：v-for循环，绑定v-model <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} <label
阅读全文
摘要：v-model绑定checkbox。实现双向绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}}
阅读全文
摘要：使用v-model实现双向绑定radio <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <label for="mal
阅读全文
摘要：v-model实现的原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} <input type
阅读全文
摘要：高阶函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> <script src="../vue.js">
阅读全文
摘要：vue的基础知识 ##购物车案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-if="books.le
阅读全文