Introduction to the

  1. Ref, which can be a native or custom component, is a reference to the environment in which a component is exposed. When a ref is defined, it sets a value that is the ID of the component when it is referenced within the environment. By calling the value of a ref, an environment (for example, a component object, or a Vue object) can retrieve a component object defined in that environment and then operate on that component object (for example, calling methods within that component). —- This explanation is somewhat abstract and can be understood with the following code examples.
  2. When ref and V-for are used together on a component, the ref retrieves an array of component elements (an array of Element objects) that are the elements of the V-for loop.

Official document link

  • English: cn.vuejs.org/v2/guide/co…
  • English: vuejs.org/v2/guide/co…

The code for

The official documentation gives an example of
and , but there is no specific code for the use of ref and V-for together. It’s just a simple introduction, and there’s no use case. I’m going to post all the case codes here.

My code naming style is:

  • Data: All variable names start with D
  • Method: All method names start with m
  • Computed: All computed attribute names start with C
  • Ref: All variable names start with ref

Case 1: Ref is used alone

  1. Code Notes:

    <script SRC =" here set the path where vue2.js is located "></script>The content needs to be changed to your vue2.js path in your project
  2. The code is as follows: 
    <! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue2 ref demo</title>
  <script src="Set the path where vue2.js is located."></script>
</head>
<body>
  <div id="app1"></div>
  <script>
    let baseInput = {
      data: function () {
        return {
          dContent: '',
        };
      },
      methods: {
        mFocus(){
          this.$refs.refInput.focus();
        },
      },
      template:
        `
        <div>
          <div>Please enter:<input ref="refInput" type="text" v-model="dContent"/>
          </div>
          <div>What you type is:{{dContent}}
          </div>
        </div>`}; new Vue({ el: '#app1', components: { 'base-input': baseInput, }, methods: { mSetBaseInputTakeFocus(){ this.$refs.refUsernameInput.mFocus(); } }, template: `<div>
          <base-input ref="refUsernameInput"></base-input>
          <button @click="mSetBaseInputTakeFocus">Focus the baseInput component</button>
        </div>`});</script>
</body>
</html>
Copy the code
  3. Code performance
    • Effect: as shown below
    • Effect description: By default, the text input box is unfocused. When the button is clicked, the text input box is triggered to focus.

Case 2: Ref and V-for are used on the same component

  1. the contents need to be changed to the path of your vue2.js in your project

  2. The code is as follows:

    <! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue2 ref used with v-for demo</title>
  <script src="Set the path where vue2.js is located."></script>
</head>
  <body>
    <div id="app1"></div>
    <script>
      let baseList = {
        data: function () {
          return {
            dContents: [{value: '1'},
              {value: '2'},
              {value: '3'},
              {value: '4'},]}; },methods: {
          mGetLiArrRef() {
            return this.$refs.refLi; }},template:
          '
         
       
          
    •  This is the {{index}} li 
      •  
         
    '    };new Vue({
        el: '#app1'.components: {
          'base-list': baseList,
        },
        data: {
          dColor: ['red'.'green'],},methods: {
          mChangeColors() {
            let vm = this;
            vm.$refs.refList.mGetLiArrRef().forEach((liElem, index) = > {
              liElem.style.setProperty('color', getColor(index));
            });

            function getColor(index) {
              return (index <= vm.dColor.length - 1)? vm.dColor[index] :'blue'; }}},template:
          ` 
         
     
           
           
         
     `    });    </script>
  </body>
</html>
Copy the code

  3. Code performance

    • Effect: as shown below
    • After clicking the button, the text color of each list item will be changed. The color is first used according to the values defined in the dColor array. The default color ‘blue’ is used for those items whose subscripts exceed the dColor array. So when you click the button, the first two lines of text will change to red and green, respectively, and the next lines will change to blue.