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>

　　

17、前端知识点--Vue中ref的使用的更多相关文章

  1. Vue.js-11：第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  2. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  3. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  4. Vue中 $ref 的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组 ...

  5. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...

  6. 14、前端知识点--Vue生命周期浅析

    vue生命周期 每个Vue实例或组件从创建到显示再到废弃的过程就是vue的生命周期.很多时候我们希望能在这个过程中执行一些操作,于是就有了生命周期钩子. 生命周期钩子函数允许我们在实例不同阶段执行各种 ...

  7. vue 中ref 的使用注意事项

    最近看别人的项目发现有些语法不能理解,所以百度进行了学习.现在总结一下. ref 有两种用法 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上 ...

  8. 17、在vue中引用移动端框架Vux：

    1:使用vue-cli创建好项目(此处省略步骤)2:在项目中安装vux:npm install vux --save3:​安装vux-loader:npm install vux-loader --s ...

  9. vue中ref的使用（this.$refs获取为undefined）

    如果你获取到的总是空的,你注意一下: 1.你在哪里调用,和你调用的对象 试试在mounted()里面调用有效果没有 调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted() ...

随机推荐

  1. LeetCode--022--括号生成(python)

    给出 n 代表生成括号的对数,请你写出一个函数,使其能够生成所有可能的并且有效的括号组合. 例如,给出 n = 3,生成结果为: class Solution: def generateParenth ...

  2. linux运维、架构之路-tomcat服务

    一.tomcat介绍       Tomcat服务器是一个免费的开放源代码的Web应用服务器,即能处理静态页面,又能处理动态的java页面 二.JDK安装 jdk是java开发工具包,也可以叫java ...

  3. POJ 3280 Cheapest Palindrome ( 区间DP && 经典模型 )

    题意 : 给出一个由 n 中字母组成的长度为 m 的串,给出 n 种字母添加和删除花费的代价,求让给出的串变成回文串的代价. 分析 :  原始模型 ==> 题意和本题差不多,有添和删但是并无代价 ...

  4. 【BZOJ2460】元素（拟阵）

    题意:给定n个物品,每个物品有属性x和价值y,要求从中选出一些使得价值和最大并且其中没有属性xor和为0的非空子集 n<=1000,x<=1e18,y<=1e4 思路:没有xor和为 ...

  5. mysql分组,行转列

    aaarticlea/jpeg;base64,/9j/4QEsRXhpZgAASUkqAAgAAAAPAJqCCgABAAAAwgAAABABAgAQAAAAygAAAAABAwABAAAAQBAAA

  6. CRTMPServer 在CentOS 64-bit下的编译(转)

    CRTMPServer 在CentOS 64-bit下的编译 http://blog.csdn.net/qiuchangyong/article/details/52848942 ========== ...

  7. MySQL主从复制 报错处理

    基于GTID的主从复制: 跳过一个事务: SET @@session.gtid_next = '冲突的GTID号';BEGIN;COMMIT; SET gtid_next = 'AUTOMATIC';

  8. 挣值管理（PV、EV、AC、SV、CV、SPI、CPI）

    挣值管理法中的PV.EV.AC.SV.CV.SPI.CPI这些英文简写相信把大家都搞得晕头转向的.在挣值管理法中,需要记忆理解的有三个参数:PV.AC.EV. PV:计划值,在即定时间点前计划完成活动 ...

  9. 基于Quartz.net 的任务调度平台Weiz.TaskManager

    Weiz.TaskManager https://github.com/weizhong1988/Weiz.TaskManager 任务管理平台 系统简介 Quartz.net是一个开源的任务调度工具 ...

  10. YOLOV3中Darknet中cfg文件说明和理解

    今天将要说明的是Darknet中的cfg文件,废话少说,直接干!(以cfg/yolov3.cfg为例,其它类似) [net]                        ★ [xxx]开始的行表示网 ...