首页手记【九月打卡】第13天 Vue3框架

【九月打卡】第13天 Vue3框架

标签：

Vue.js

课程名称：2022持续升级 Vue3 从入门到实战掌握完整知识体系

课程章节：第3章探索组件的理念

主讲老师：Dell

课程内容：

今天学习的内容包括：

toUpperCase
v-model:name
modelModifier
编程练习

课程收获：

若需要使用多个v-model来传递数据，需要使用 v-model:name 的形式。

// 父组件

<Counter v-model:count1="count" v-model:count2="count2" />、

// 子组件

props: [ 'count1', 'count2' ]

在非form表单元素上使用v-model后传递自定义的修饰符,v-model 仅限在 form 表单里加系统自带的修饰符
template: `
<count v-model.uppercase="count" />
`

this.modelModifiers.uppercase如果存在则为true,进行将所有字符转换成大写,如果不存在就不会转换成
handleClick() {
let newValue = this.modelValue + 'b';
if (this.modelModifiers.uppercase) {
newValue = newValue.toUpperCase();
}
this.$emit('update:modelValue', newValue )
}

// 父组件  v-model 加自定义修饰符 uppercase
    <Counter v-model.uppercase="count" />

// 子组件 modelModifilers ：指的是传递过来的修饰符，名称是默认的不可更改
props: {
    modelValue: String,
    modelModifiers: {
    default: () => {}   // 若没有传递修饰符，则modelModifiers 为空对象
}
},
// 在该示例中 modelModifiers为 { uppercase：true }
methods: {
  handleClick () {
    let newValue = this.modelValue + 'b'
    if (this.modelModifiers.uppercase) { // 可以结合修饰符来将参数做处理
      newValue = newValue.toUpperCase()
    }
    this.$emit('update:modelValue', newValue)
  }
}

<script>
const app = Vue.createApp({
data() {
return {
count: 1,
count1: 2,
}
},
template: `
<count v-model:count="count" v-model:count1="count1" />
`
})

app.component('count', {
props: {
'count': Number,
'count1': Number,
},
methods: {
handleClick() {

this.$emit('update:count', this.count + 1 )
},
handleClick1() {

this.$emit('update:count1', this.count1 + 1 )
}
},
template: `
<div @click="handleClick">{{count}}</div>
<div @click="handleClick1">{{count1}}</div>
`
})

const vm = app.mount('#root');
</script>