v-model syntactic sugar

1. v-model syntactic sugar

• v-model is essentially a layer of packaging for value attributes and input events

• The role of v-model: provide two-way binding of data

• If the data has changed, the page will automatically change to v-bind:value

• When the page input changes, the data will automatically change v-on:input

• v-model is syntactic sugar, v-model is equivalent to providing an input box with: value attribute and @input event

Obviously, if you use the input box every time, you need to provide value and input events, which is troublesome, so use 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-Components use v-model

• We often encounter a scenario:

1. The parent component provides a data for the child component to use (parent to child)

2. The child component needs to modify the data passed by the parent component, so it needs to pass the value from the child to the parent to the parent component.

• This scenario can be abbreviated using v-model.

• When defining a component, note that the received value is called value, and the event triggered by the parent is called input

If the props value passed from parent to child is called value, and the event triggered by the parent is called input. Then these two functions can be abbreviated using v-model

03-ref and $refs (vue operation dom)

• Official document: https://v2.cn.vuejs.org/v2/api/#vm-refs

• ref function: operate dom elements or component vm instances in vue

• Vue does not recommend that we directly manipulate dom. If you really want to operate dom in vue, you can use ref syntax

• Speaking human words: Vue can't directly operate dom, if you really want to operate, you must follow the syntax specified by vue. (ref syntax)

• Each vue component instance contains a $refs object, which stores the reference of the corresponding DOM element or component.

The ref syntax uses the process syntax
(1) to add a custom attribute red to the label: <button ref="Attribute Name"></button>
Vue will automatically mount all the ref attributes on the page to the $ref object of the Vue instance
( 2) Obtain the tag through the vm.$refs. attribute name
must pay attention: Vue completes the real DOM rendering of the page in the mounted hook, so the earliest DOM can be obtained is the mounted hook

ref error-prone point
1. When adding: ref
2. When getting: $refs

1 Add a ref attribute to the dom element or component that needs to be obtained

<template>
  <div>
    <h1>根组件App.vue</h1>
    <div ref="box">我是div盒子</div>
    <Goods ref="goods"></Goods>
    <button @click="fn">点我获取ref</button>
  </div>
</template>

2 Obtain through this.$refs.xxx, get the component and call the method of the component

<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>

Subcomponent code Goods.vue

<template>
  <div>
      <h2>我是子组件</h2>
  </div>
</template>

<script>
export default {
    methods: {
        sayHi(){
            console.log('你好我是子组件')
        }
    },
}
</script>

<style>

</style>