一个小码虫-CSDN博客

原创 vue之watch侦听器

watch侦听refwatch侦听器，具有一定惰性参数可以拿到当前值和原始值 const app = Vue.createApp({ setup(){ const {ref,watch} = Vue; const name = ref(''); watch(name,(current,preValue)=>{ console

2021-07-25 00:11:45 136

原创 vue之ref、reactive响应式引用

ref const app = Vue.createApp({ setup(){ const {ref} = Vue; const name = ref('zhong') setTimeout(()=>{ name.value = 'john' },2000) re

2021-07-24 23:18:23 425

原创 vue之插件plugin

plugin插件，就是把通用性的功能封装起来 const myPlugin = { install(app,options){ app.provide('name','john') } } const app = Vue.createApp({ data(){ return{ messa

2021-07-24 08:14:12 297

原创 vue之自定义指令

比如需要定义一个input框，当页面加载完成自动聚焦可以通过 ref属性 const app = Vue.createApp({ data(){ return{ message:'hello world' } }, mounted(){ this.$refs.input.focus()

2021-07-24 08:13:32 113

原创 vue之mixin混入

定义一个mixin对象 const mymixin = { data(){ return { count:2, number:666, childs:12 } }, created(){ console.lo

2021-07-23 23:20:24 134

原创 vue之组件补充ref/provide/inject

ref实际上是获取dom节点、组件引用的用的一个语法const app = Vue.createApp({ data(){ return{ count:1 } }, mounted(){ this.$refs.count.innerHTML=666 }, template:` <div> <div ref="count">{{count}}<

2021-07-22 12:17:35 167

原创 vue之组件动态、异步组件

动态组件根据数据变化，结合component标签，随时动态切换组件根据data的内容决定显示哪个组件还使用了<keep-alive></keep-alive> 缓存输入框的数据const app = Vue.createApp({ data(){ return{ currentitem:'myinput' } }, methods:{ click(){ th

2021-07-22 11:47:28 119

原创 vue之组件插槽slot、作用域插槽

父组件决定子组件显示子组件数据const app = Vue.createApp({ template:` <div> <mylist v-slot="slotProps"> <ul> <li>{{ slotProps.item }}</li> </ul> </mylist> </

2021-07-22 11:21:57 247

原创 vue之组件插槽slot、具名插槽

利用slot传div标签、dom传递const app = Vue.createApp({ data(){ return{ message:'hello world', num: 1235 } }, template:` <div> <myform> <div>提交</div> </my

2021-07-22 11:11:22 278

原创 vue之父子组件通信

const app = Vue.createApp({ data(){ return{ message:'hello world', num: 1 } }, methods:{ handleAddOne(){ this.num+=1 } }, template:'<div>{{message}} <test :num

2021-07-22 10:37:19 99

原创 vue之父子组件Non-props属性

Non-props属性指的是父组件给子组件传值，子组件不去接收const app = Vue.createApp({ data(){ return{ message:'hello world', } }, template:'<div>{{message}} <test num="123"></test></div>',});app.component('test',{

2021-07-22 00:29:17 165

原创 vue之单向数据流

const app = Vue.createApp({ data(){ return{ message:'hello world', num:1 } }, template:'<div>{{message}} <test :num="num"></test></div>',});app.component('test',{ props:['num

2021-07-22 00:11:10 2292

原创 vue之父子组件传大量值params

const app = Vue.createApp({ data(){ return{ message:'hello world', params:{ a:1, b:2, c:3, d:4 } } }, template:'<div>{{mes

2021-07-22 00:04:22 402

原创 vue之父子组件传值验证

普通父子组件传值const app = Vue.createApp({ data(){ return{ message:'hello world', num:110 } }, template:'<div>{{message}} <test :num="num"></test></div>',});app.component('test',{

2021-07-21 23:44:29 332

原创 vue之监听器watch

const app = Vue.createApp({ data(){ return{ message:'hello world', count:3, price:6, } }, watch:{ price(){...

2021-07-21 11:05:29 124

原创 vue之computed和methods差别

例一 const app = Vue.createApp({ data(){ return{ message:'hello world', count:3, price:6, } }, computed:{

2021-07-21 10:50:00 163

原创 CSS-盒子模型

box-sizing属性盒子的width、height数字就表示盒子的实际占有宽度（不含margin）即padding、border变成“内缩”、不再“外扩”

2021-07-14 08:20:53 139

text-indent 属性定义首行文本内容之前的缩进量text-indent: 2em; 首行缩进2字符line-height 属性定义行高line-height 属性的单位可以是以px为单位数值line-height:30px;line-height属性也可以是没有单位的数值，表示字号的倍数line-height:1.5line-height属性也可以是百分比，表示字号的倍数line-height:150%单行文本垂直居中设置行高=盒子高度，即可实现单行文本垂直居

2021-07-14 07:45:27 129

john的博客