v-model语法糖

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)

官方文档：https://v2.cn.vuejs.org/v2/api/#vm-refs

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>

1.v-model语法糖

02-组件使用v-model

03-ref和$refs(vue操作dom)

猜你喜欢