1.v-model语法糖
v-model本质上是 value属性和input事件的一层包装
v-model的作用:提供数据的双向绑定
数据发生了改变,页面会自动变 v-bind:value
页面输入改变 , 数据会自动变化 v-on:input
v-model是语法糖, v-model等价于 给一个input框提供了 :value属性以及 @input事件
很显然如果每次使用input框,都需要提供value和input事件,比较麻烦,所以使用v-model
<template>
<div>
<h1>根组件App.vue</h1>
<!--
1.v-model = "msg"
(1)data中的数据变化,表单的值也会变化 :value="msg"
(2)表单的值发生变化,data中的数据也会变化 @input="msg=$event.target.value"
-->
<input type="text" v-model="msg" />
<hr />
<!-- 这种写法与上面写法功能一致 -->
<input type="text" :value="msg" @input="msg = $event.target.value" />
<hr />
<!-- 这种写法也与上面写法一致 -->
<input type="text" :value="msg" @input="doInput" />
<hr />
</div>
</template>
<script>
export default {
data() {
return {
msg: ""
};
},
methods: {
doInput(e) {
this.msg = e.target.value;
}
}
};
</script>
<style>
</style>
02-组件使用v-model
我们经常遇到一种场景:
父组件提供一个数据给子组件使用(父传子)
子组件又需要修改父组件传过来的这个数据,所以需要子传父把值传给父组件。
这种场景可以使用v-model进行简写。
定义组件的时候,注意接收的值叫value, 子传父触发的事件叫 input
如果父传子的props值叫 value, 且 子传父触发的事件叫 input 。 那么这两个功能就可以使用v-model来简写
03-ref和$refs(vue操作dom)
ref作用:在vue中操作dom元素或组件vm实例
vue不推荐我们直接操作dom。如果真的要在vue中操作dom,可以使用ref语法
说人话 : vue不能直接操作dom,真的要操作也要按vue规定的语法来。(ref语法)
每个 vue 的组件实例上,都包含一个$refs 对象,里面存储着对应的DOM 元素或组件的引用。
ref语法使用流程语法
(1)给标签添加自定义属性red :<button ref="属性名"></button>
vue会自动把页面所有的ref属性,挂载到vue实例的$ref对象中
(2)通过 vm.$refs.属性名 获取该标签
一定要注意 : vue在mounted勾子中完成页面真实DOM渲染,所以最早能获取dom的就是mounted钩子
ref易错点
1.添加的的时候是: ref
2.获取的时候是: $refs
1 给需要获取的 dom 元素或者组件, 添加 ref 属性
<template>
<div>
<h1>根组件App.vue</h1>
<div ref="box">我是div盒子</div>
<Goods ref="goods"></Goods>
<button @click="fn">点我获取ref</button>
</div>
</template>
2 通过 this.$refs.xxx 获取, 拿到组件可以调用组件的方法
<script>
//导入子组件
import Goods from "./components/Goods.vue";
export default {
//注册组件
components: { Goods },
//方法
methods: {
fn() {
// 如果ref给dom元素添加,获取的就是dom对象
console.log(this.$refs.box);//DOM对象
// 如果ref给组件添加,获取的就是组件vm实例
console.log(this.$refs.goods);//组件vue实例
this.$refs.goods.sayHi();
}
}
};
</script>
子组件代码Goods.vue
<template>
<div>
<h2>我是子组件</h2>
</div>
</template>
<script>
export default {
methods: {
sayHi(){
console.log('你好我是子组件')
}
},
}
</script>
<style>
</style>