一、v-model
1、v-model的含义
v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值。
2、v-model的基础用法
(1)v-model 指令在表单 、
3、使用示例
当你在input输入框中输入内容的时候,上面p标签里面的数据实时发生变化(实际上是name和age两个数据发生了响应式变化)。相反改变代码中的name和age值,input输入框中值也会实时变化。
其实现原理如下:
姓名:{{name}}
年龄:{{age}}
实现效果如下:
实现原理:
①首先input输入框通过属性绑定:value="name"&:value="age"得到响应数据name&age.
②定义两个函数,通过e.target得到input框中的value值。
③最后通过input输入框@input事件监听,绑定两个函数(updateName,updateAge),将input框中的value值传给name&age。
vue中的v-model能够实现数据的双向绑定,也是vue的最突出的优势。
v-model实际上是v-bind: 和 v-on:的语法糖。它的实现原理主要包括属性绑定和事件监听两部分。
具体使用如下:
姓名:{{name}}
年龄:{{age}}
实现效果与v-bind: + v-on:相同:
二、sync修饰符
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。但真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。
当我们需要在某个标签中绑定多个属性时,就选择使用.sync修饰符。
.sync修饰符的约定:
① 属性绑定必须是xx.sync
② 自定义事件必须是update:xx格式
③ 采用xx.sync修饰符,可以省略update:xx对应的事件绑定
使用方法如下:
衣服:{{yf}},裤子:{{kz}},鞋子:{{xz}}
三、插槽
插槽的含义
插槽就是子组件中的提供给父组件使用的一个占位符,用
1、匿名插槽
匿名插槽,我们又可以叫它单个插槽或者默认插槽。与具名插槽相对,它不需要设置name属性。(它隐藏的name属性为default。)
示例:
① 在vue子组件中定义一个匿名插槽
② 在页面中使用子组件标签,并写入内容
我是匿名插槽
效果如图:
2、具名插槽
插槽有一个特殊的属性:name,这个属性可以用来定义多个插槽。
在向具名插槽提供内容的时候,我们可以在一个 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称。
v-slot:的简写为#
使用方法如下:
我是插槽1
我是插槽2
我是插槽3
实现效果如下:
3、作用域插槽
作用域插槽其实就是可以传递数据的插槽。子组件中的一些数据想在父组件中使用,必须通过规定的方法来传递。
作用域插槽必须是具名插槽,在作用域插槽上可以通过v-bind:绑定属性,绑定的属性,通过指定的作用域变量是接收 。
绑定在元素上的 属性被称为插槽 prop。现在在父级作用域中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字:
//default可以省略,简写为v-slot=" ",slotProps是自定义的名字,
{{ slotProps.user.firstName }}
具体使用如下:
四、混入
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
1、选项合并
当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。
比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
注意:Vue.extend() 也使用同样的策略进行合并
2、全局混入
当我们存在多个组件中的数据或者功能很相近时,我们就可以利用mixins将公共部分提取出来,在 mixin函数中混入统一的成员。
注意:请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项。推荐将其作为插件发布,以避免重复应用混入。
姓名:
年龄:
性别:
税前工资:税后工资:
汽车信息:{{car}}
{{subjects}}
姓名:
年龄:
性别:
税前工资:税后工资:
效果如图: