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() ...
随机推荐
- Vue-Awesome-Swiper实现缩略图控制循环,循环背景图，显示多图轮播，点击左右滚动一张图
效果图: 本姐只展示关键代码哈 上代码:网站有完整代码,但是数据不是循环的.https://surmon-china.github.io/vue-awesome-swiper/ 循环数据的代码在此: ...
- IDEA unable to find valid certification path to requested target
一.报错 Could not transfer artifact org.apache.maven.plugins:maven-install-plugin:pom:2.4 from/to alima ...
- minilzo使用流程
/* testmini.c -- very simple test program for the miniLZO library This file is part of the LZO real- ...
- luogu 4381 [IOI2008]Island 单调队列 + 基环树直径 + tarjan
Description 你将要游览一个有N个岛屿的公园.从每一个岛i出发,只建造一座桥.桥的长度以Li表示.公园内总共有N座桥.尽管每座桥由一个岛连到另一个岛,但每座桥均可以双向行走.同时,每一对这样 ...
- luogu【P1024 一元三次方程求解】题解
题目描述 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约定该方程存在三个不同实根(根的范围在-100至100之间),且根与根之差 ...
- php开发常用技巧总结
1.[本地开启xdebug导致执行时间超max_execution_time产生的问题处理方法]xdebug开启,会导php执行速度慢,超max_execution_time,这种情况下有必要合理设置 ...
- String、StringBuffer与StringBuilder介绍
关于这三个类在字符串处理中的位置不言而喻,那么他们到底有什么优缺点,到底什么时候该用谁呢?下面我们从以下几点说明一下 1.三者在执行速度方面的比较: StringBuilder > St ...
- [IOI2008] Fish 鱼
https://www.luogu.org/recordnew/lists?uid=56840 题解 首先可以发现我们对于每种颜色的鱼,长一点的能够覆盖的方案已定完全包含短一点的方案. 所以我们可以只 ...
- Build安装版的UE4
在项目中自己编译的引擎分发给团队可以参考以下两个链接 http://jackknobel.com/BuildGraph/Building-an-installed-ue4/ https://docs. ...
- Python发送邮件（常见四种邮件内容）
Python发送邮件(常见四种邮件内容) 转载 2017年03月03日 17:17:04 转自:http://lizhenliang.blog.51cto.com/7876557/1875330 ...