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() ...
随机推荐
- GDKOI2016总结——被虐之旅
前言 一个被虐的旅程... 这次GDKOI的比赛虽然基本全上暴力,但是居然只有两道题得了分:30+30=60!我感觉整个人都不好了... day0 在去广州的路上,本来心情很好,但是坐在我斜后面的那位 ...
- linux运维、架构之路-redis集群
一.介绍 redis cluster 3.0之后的功能,至少需要3(Master)+3(Slave)才能建立集群,是无中心的分布式存储架构,可以在多个节点之间进行数据共享,解决了 ...
- iOS 指定位置切圆角不生效问题
如果是在VC中操作,需要在viewDidLayoutSubviews方法里 - (void)viewDidLayoutSubviews { [super viewDidLayoutSubviews]; ...
- POJ 3181 Dollar Dayz ( 完全背包 && 大数高精度 )
题意 : 给出目标金额 N ,问你用面额 1~K 拼成 N 的方案有多少种 分析 : 完全背包的裸题,完全背包在 DP 的过程中实际就是列举不同的装填方案数来获取最值的 故状态转移方程为 dp[i] ...
- Numpy基础(数组创建，切片，通用函数）
1.创建ndarray 数组的创建函数: array:将输入的数据(列表,元组,数组,或者其他序列类型)转换为ndarray.要么推断出dtype,要么显式给定dtype asarray:将输入转换为 ...
- CF704D Captain America
http://codeforces.com/problemset/problem/704/D 题解 对于两种颜色的染色,我们可以把它看做选择问题. 比如说红色的代价小,所以我们尽可能多的染红色. 然后 ...
- linux添加新硬盘不需要重启识盘，及查看uuid
添加新物理硬盘 用ssh工具连接到服务器,执行:fdisk -l 查看磁盘,并没有新加的硬盘 fdisk -l查看硬盘及分区状态 查看主机总线号,命令:ls /sys/class/scsi_ ...
- fatal: repository 'xxxx' not found
环境:centOS7 背景:公司代码仓库迁移,因而配置的jenkins自动打包git地址也要跟着变化. 问题描述:git clone http xxxx.git后报错: fatal: reposit ...
- thinkphp5.0学习笔记（一）基础知识与URL访问
1.目录结构: 其中thinkphp子目录是框架核心目录 thinkphp结构: 2.入口文件 默认自带的入口文件位于public/index.php 应用目录为application,其结构: in ...
- 在自定义组件中获取spring底层组件
要想在自定义组件中获取spring底层的各种组件,只需让自定义组件实现一系列接口即可,这些接口都是Aware的子接口.常见的有: 1. ApplicationContextAware——用于获取IOC ...