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组件学习(一)
1, vue中的 is 的用法,有时候我们需要把一个组件绑定到指定的标签下,比如把tr组件放到table下,直接这样写是不行的, <!DOCTYPE html> <html lang ...
- 对Nuxt的研究
Nuxt就是基于Vue的一个应用框架,采用服务端渲染,让你的SPA应用(Vue)也可以拥有SEO Nuxt的生命周期有些在服务端(Node),客户端,甚至两边都在: 1.其他之前都不存在Window对 ...
- LeetCode--075--颜色分类(python)
给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0. 1 和 2 分别表示红色.白色和蓝色. ...
- Vux的安装使用
1.Vux的安装 1.1.vue-cli的vux模板生成项目 可以直接使用 vue-cli 的模板生成一个 vux 项目 vue init airyland/vux2 projectName 由此可以 ...
- [转]SpeedPHP微信接口扩展
这个扩展实现了SP和微信公众平台的对接,1.0版暂时只实现了最简单的功能:绑定,收信息,回复信息. 扩展配置方法: $spConfig = array( 'mode' => 'debug ...
- ES的副本数量、插入大批量数据前，副本数应该设置为0
多副本可以提升检索的能力,但是如果副本数量太多,插入数据的时候容易出现卡顿现象: 因为主分片要把数据同步给所有的副本,所以建议副本数量最好是1-2个: ---- Es在索引数据的时候,如果存在副本,那 ...
- SpringBoot：配置文件及自动配置原理
西部开源-秦疆老师:基于SpringBoot 2.1.6 的博客教程 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! SpringBoot ...
- glm初试，关于行矩阵列矩阵问题
/*** * glm中矩阵是行优先存储的,这不同于opengl默认的以列优先存储的方式??,以下面矩阵mat为例 * 它是用四个行向量来模拟存储四个行:vec4 value[4],其中 * value ...
- JQuery ajax 滚动底部加载更多
<%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...
- 《HTML5 高级程序设计》
第一章 HTML5 概述 开发 HTML5 的组织 Web Hypertext Application Technology Working Group (WHATWG):开发 HTML 和 Web ...