>[success] # v-model
~~~
1.'非兼容'：用于自定义组件时，v-model prop 和事件默认名称已更改：
1.1.'prop'：value -> modelValue；
1.2.'event'：input -> update:modelValue；
2.'非兼容'：v-bind 的 .sync 修饰符和组件的 model 选项已移除，可用 v-model 作为代替；
3.'新增'：现在可以在同一个组件上使用多个 v-model 进行双向绑定；
4.'新增'：现在可以自定义 v-model 修饰符。
~~~
>[info] ## v-model 非组件基础使用
~~~
1.'v-model' 指令在表单 '<input>、<textarea> 及 <select>' 元素上创建双向数据绑定,但 v-model 本质是语法糖
<input v-model="searchText" /> 这种写法等同于
<input :value="searchText" @input="searchText = $event.target.value" />
~~~
>[info] ## Vue2.x
~~~
1.'v-model' 是语法糖，因此在组件上使用也是同样的，在组件父子值传递往往需要在使用的时候定义事件和
props, '<ChildComponent :value="pageTitle" @input="pageTitle = $event" />'
可以简写 '<ChildComponent v-model="pageTitle" />'
当然Vue 也提供了属性'model' 可以自定义属性不再限制于'value 和 input'
// ChildComponent.vue
export default {
model: {
prop: 'title',
event: 'change'
},
props: {
// 这将允许 `value` 属性用于其他用途
value: String,
// 使用 `title` 代替 `value` 作为 model 的 prop
title: {
type: String,
default: 'Default title'
}
}
}
但是v-model 最大的问题只能作用一次及不会出现以下情况
'<ChildComponent v-model="pageTitle" v-model="pageContent"/>'
这时候出现了'.sync' 修饰符来解决这类问题'<ChildComponent :title.sync="pageTitle" />' 可以绑定多个
目的就是一个语法糖的省略用法，更多的详细案例'https://www.kancloud.cn/cyyspring/vuejs/1108931'
~~~
>[info] ## 3.x
~~~
1.来看'3.x','v-model'在'2.x' 的弊端'v-model' 只能在组件使用一次，并且如果想实现类似效果使用多次需要
'.sync' 来定义使用这个语法糖，本质上'v-model 和sync'在组建上做了类似的语法功能，在'3.x'将'.sync'
移除,为了让组件可以使用多个'v-model' 也从原来'value 和input'变成了'modelValue 和 update:modelValue'
~~~
>[danger] ##### 简版的先消化理解
~~~js
1.在组件使用'<ChildComponent v-model="pageTitle" />' 是下面的简写
<custom-input
:modelValue="searchText"
@update:modelValue="searchText = $event"
/>
来分析组件props 需要有一个'modelValue' ,组件的事件 $emit 需要有一个'update:modelValue'组件写法
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})
2.v-model 可以定义多个写法'<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />'
是一下的简写
<ChildComponent
:title="pageTitle"
@update:title="pageTitle = $event"
:content="pageContent"
@update:content="pageContent = $event"
/>
就是说明你的 props 定义['title','content']，对应的$emits定义['update:title'.'update:content'],事件绑定触发$emits
就看项目需要可以是'input、change、input'
~~~
>[danger] ##### 使用
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--组件疑问 全局注册和局部注册-->
<div id="app">
{{searchText}}
<custom-input v-model="searchText"></custom-input>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const {createApp} = Vue
const app = createApp({
data(){
return {
searchText:'11'
}
},
methods:{
fontSize(){
console.log("1")
}
},
})
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})
app.mount('#app')
</script>
</body>
</html>
~~~
>[danger] ##### 上面的案例官方给的另一种思路
~~~
1.使用计算属性利用get 方法应返回 modelValue property，或用于绑定的任何 property，
set 方法应为该 property 触发相应的 $emit。
~~~
~~~
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input v-model="value">
`,
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
})
~~~
>[info] ## 官方给的迁移策略
我们推荐：
* 检查你的代码库中所有使用`.sync`的部分并将其替换为`v-model`：
~~~
<ChildComponent :title.sync="pageTitle" />
<!-- 替换为 -->
<ChildComponent v-model:title="pageTitle" />
~~~
* 对于所有不带参数的`v-model`，请确保分别将 prop 和 event 命名更改为`modelValue`和`update:modelValue`
~~~
<ChildComponent v-model="pageTitle" />
~~~
~~~
// ChildComponent.vue
export default {
props: {
modelValue: String // 以前是`value：String`
},
emits: ['update:modelValue'],
methods: {
changePageTitle(title) {
this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
}
}
}
~~~
- 官网给的工具
- 声明vue2 和 vue3
- 指令速览
- Mustache -- 语法
- v-once -- 只渲染一次
- v-text -- 插入文本
- v-html -- 渲染html
- v-pre -- 显示原始的Mustache标签
- v-cloak -- 遮盖
- v-memo（新）-- 缓存指定值
- v-if/v-show -- 条件渲染
- v-for -- 循环
- v-bind -- 知识
- v-bind -- 修饰符
- v-on -- 点击事件
- v-model -- 双向绑定
- 其他基础知识速览
- 快速使用
- 常识知识点
- key -- 作用 （后续要更新）
- computed -- 计算属性
- watch -- 侦听
- 防抖和节流
- vue3 -- 生命周期
- vue-cli 和 vite 项目搭建方法
- vite -- 导入动态图片
- 组件
- 单文件组件 -- SFC
- 组件通信 -- porp
- 组件通信 -- $emit
- 组件通信 -- Provide / Inject
- 组件通信 -- 全局事件总线mitt库
- 插槽 -- slot
- 整体使用案例
- 动态组件 -- is
- keep-alive
- 分包 -- 异步组价
- mixin -- 混入
- v-model-- 组件
- 使用计算属性
- v-model -- 自定义修饰符
- Suspense -- 实验属性
- Teleport -- 指定挂载
- 组件实例 -- $ 属性
- Option API VS Composition API
- Setup -- 组合API 入口
- api -- reactive
- api -- ref
- 使用ref 和 reactive 场景
- api -- toRefs 和 toRef
- api -- readonly
- 判断性 -- API
- 功能性 -- API
- api -- computed
- api -- $ref 使用
- api -- 生命周期
- Provide 和 Inject
- watch
- watchEffect
- watch vs. watchEffect
- 简单使用composition Api
- 响应性语法糖
- css -- 功能
- 修改css -- :deep() 和 var
- Vue3.2 -- 语法
- ts -- vscode 配置
- attrs/emit/props/expose/slots -- 使用
- props -- defineProps
- props -- defineProps Ts
- emit -- defineEmits
- emit -- defineEmits Ts
- $ref -- defineExpose
- slots/attrs -- useSlots() 和 useAttrs()
- 自定义指令
- Vue -- 插件
- Vue2.x 和 Vue3.x 不同点
- $children -- 移除
- v-for 和 ref
- attribute 强制行为
- 按键修饰符
- v-if 和 v-for 优先级
- 组件使用 v-model -- 非兼容
- 组件
- h -- 函数
- jsx -- 编写
- Vue -- Router
- 了解路由和vue搭配
- vueRouter -- 简单实现
- 安装即使用
- 路由懒加载
- router-view
- router-link
- 路由匹配规则
- 404 页面配置
- 路由嵌套
- 路由组件传参
- 路由重定向和别名
- 路由跳转方法
- 命名路由
- 命名视图
- Composition API
- 路由守卫
- 路由元信息
- 路由其他方法 -- 添加/删除/获取
- 服务器配置映射
- 其他
- Vuex -- 状态管理
- Option Api -- VUEX
- composition API -- VUEX
- module -- VUEX
- 刷新后vuex 数据同步
- 小技巧
- Pinia -- 状态管理
- 开始使用
- pinia -- state
- pinia -- getter
- pinia -- action
- pinia -- 插件 ？？
- Vue 源码解读
- 开发感悟
- 练手项目