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>
17、前端知识点--Vue中ref的使用的更多相关文章
- Vue.js-11：第十一章 - Vue 中 ref 的使用
一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...
- 【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
- vue中$ref的基本用法
1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...
- Vue中 $ref 的用法
说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组 ...
- vue中ref在input中详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...
- 14、前端知识点--Vue生命周期浅析
vue生命周期 每个Vue实例或组件从创建到显示再到废弃的过程就是vue的生命周期.很多时候我们希望能在这个过程中执行一些操作,于是就有了生命周期钩子. 生命周期钩子函数允许我们在实例不同阶段执行各种 ...
- vue 中ref 的使用注意事项
最近看别人的项目发现有些语法不能理解,所以百度进行了学习.现在总结一下. ref 有两种用法 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上 ...
- 17、在vue中引用移动端框架Vux：
1:使用vue-cli创建好项目(此处省略步骤)2:在项目中安装vux:npm install vux --save3:安装vux-loader:npm install vux-loader --s ...
- vue中ref的使用（this.$refs获取为undefined）
如果你获取到的总是空的,你注意一下: 1.你在哪里调用,和你调用的对象 试试在mounted()里面调用有效果没有 调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted() ...
随机推荐
- 【SaltStack官方版】—— Events&Reactor系统—EVENT SYSTEM
Events&Reactor系统 EVENT SYSTEM The Salt Event System is used to fire off events enabling third pa ...
- asp.net mvc大文件上传、断点续传功能。
文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...
- php实现大文件上传带进度条
1.使用PHP的创始人 Rasmus Lerdorf 写的APC扩展模块来实现(http://pecl.php.net/package/apc) APC实现方法: 安装APC,参照官方文档安装,可以使 ...
- 解决报错:The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized
Cannot create PoolableConnectionFactory (The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized . ...
- elasticsearch堆内存的配置建议
1.将最小堆大小(Xms)和最大堆大小(Xmx)设置为彼此相等 防止内存抖动 2:给多大的堆内存? 给ES的内存配置不是越大越好,建议不能超过32GB,不同jdk版本最大边界值是不同的,对于32位小于 ...
- POJ 1383 Labyrinth （bfs 树的直径）
Labyrinth 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/E Description The northern part ...
- java 中创建线程有哪几种方式？
Java中创建线程主要有三种方式: 一.继承Thread类创建线程类 (1)定义Thread类的子类,并重写该类的run方法,该run方法的方法体就代表了线程要完成的任务.因此把run()方法称为执行 ...
- 《SQL Server 2012 T-SQL基础》读书笔记 - 1.背景
几个缩写的全称:Data Definition Language (DDL), Data Manipulation Language (DML), and Data Control Language ...
- atom超快替换文件中的tab到space
找到开源的插件代码里缩进全部用的是tab,但公司内部的缩进要求是用space,所以需要将所有的tab替换成space. 在Atom编辑器里,选中所有内容后,点击 Edit - Lines - Auto ...
- 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_03 过滤器_1_FileFilter过滤器的原理和使用
FileFilter 需要先定义接口的实现类.并重写过滤的方法 使用 并没有起作用 过滤器的原理 缺少了a.java和b.java 如果是文件夹,就返回true,那么就会返回到Files[]数组中.然 ...