17、前端知识点--Vue中ref的使用

methods里面的方法，需要手动触发才会执行。

如果想让页面一上来就执行的话，就需要写在mounted这个钩子函数中。

<body>
  <div id="app">
    <div class="add">
      <!-- 第一种：使用的原生的js来获取焦点 -->
      <!-- 编号:<input type="text" v-model="newId" id="myInput"> -->
      <!-- 第二种：使用vue的方法获取的焦点:使用ref属性来获取DOM的引用，ref的值可以随便定义 -->
      <!-- 编号:<input type="text" v-model="newId" ref="myInput"> -->
      <!-- 第三种：使用自定义指令来设置 -->
      编号:<input type="text" v-model="newId" v-myfocus="newId">

      品牌名称:<input type="text" v-model="newName" @keyDown.enter="addData">
      <input type="button" value="添加" @click="addData">
    </div>

    <div class="add">
      品牌名称:<input type="text" placeholder="请输入搜索条件">
    </div>

    <div>
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list" :key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.ctime}}</td>
          <td>
            <button @click="delData(index)">删除</button>
          </td>
        </tr>
        <!-- <tr>
          <td colspan="4">没有品牌数据</td>
        </tr> -->
        <!-- 动态生成内容tr -->
      </table>
    </div>
  </div>
</body>
<script>

  // 使用自定义指令，创建全局自定义指令
  // 利用Vue.directive()方法来创建全局自定义指令，给方法有两个参数：一个是自定义指令名称，一个是配置项（这里面主要包含一些和自定义指令执行相关的函数）
  // 假如设置自定义指令为v-myfocus，那么下面写的时候直接写myfocus，去掉v-,而且建议全小写，不然不会被识别。
  Vue.directive("myfocus",{
    // bind表示自定义指令一绑定到DOM上，就自动执行
    bind(el,binding){
      console.log("bind")
    },
    // 表示DOM 插入到页面上时，就开始自动执行。
    // 这三个函数都有两个参数：一个时el（表示使用自定义指令的元素），一个时binding（表记录自定义指令信息的对象），
    inserted(el,binding){
      console.log("inserted")
      console.log(el)
      console.log(binding)
      el.focus()
    },
    // 表示自定义指令后面的值发生变化时，就会自动执行
    update(){
      console.log('update')
    }
  })

  let vm = new Vue({
    el: '#app',
    data: {
      newId: '', // 获取编号框中的值
      newName: '', // 获取品牌名称框中的值
      list: [
        {id: 33, name: 'LV', ctime: new Date()},
        {id: 44, name: 'CC', ctime: new Date()},
        {id: 55, name: 'NIKE', ctime: new Date()},
        {id: 66, name: 'YSL', ctime: new Date()},
      ]
    },
    // 在methods里面的函数，只有手动触发才会执行；如果想要页面一打开就自动执行，就需要用到mounted的函数
    mounted(){
      // 1、用原生js获取焦点的方法
      // document.getElementById("myInput").focus()

      // 2、使用vue的方法来获取DOM
      // 先答应下this
      // console.log(this)
      // 通过答应this，可以找打$ref下的myInput,所以获取定义的ref可以通过this.$refs.ref的值
      // console.log(this.$refs.myInput)
      // this.$refs.myInput.focus()

    },
    methods: {
      delData(idx) {
        this.list.splice(idx, 1)
      },
      addData() {
        this.list.push({id: this.newId, name: this.newName, ctime: new Date()})
        // 添加完之后，给两个框清空
        this.newId = ''
        this.newName = ''
      }
    }
  })
</script>