Vue--由自动获取焦点引出的DOM、mounted、自定义指令
一.自动获取焦点的DOM实现
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head> <body>
<div id="app">
<div class="add">
编号: <input id="id" type="text" v-model="id">品牌名称: <input v-model="name" type="text">
<button @click="add">添加</button>
</div>
<div class="add">品牌名称：<input type="text"></div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!--加入: key="index" 时候必须把所有参数写完整 -->
<tr v-for="(item,key,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div> </div>
</body> </html>
<script src="vue2.4.4.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
id: 0,
name: '',
list: [
{ "id": 1, "name": "itcast", "ctime": Date() },
{ "id": 2, "name": "黑马", "ctime": Date() }
]
},
mounted(){
this.myFocus()
},
methods: {
add: function () {
//将id和namepush到list数组中
this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
},
del:function(id) { // 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，
var index = this.list.findIndex(function(item){
//根据item中的id属性来判断这个item是否是上面id中
//对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
});
// 根据下标在list集合中将对应的数据删除
// splice(开始删除的下标，删除的长度)
this.list.splice(index,1);
},
// 得到元素的焦点
//这个事件没人触发
// 解决方案：在vue中有一个事件叫做mounted，这个事件当vue中的代码加载完成后会自动触发
myFocus:function(){
// 通过js得到的id对象
var idObj = document.getElementById('id');
idObj.focus();
}
}
}); </script>
二.自动获取焦点vue中ref属性实现
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head> <body>
<div id="app">
<div class="add">
编号: <input id="id" ref="id" type="text" v-model="id">品牌名称: <input v-model="name" type="text">
<button @click="add">添加</button>
</div>
<div class="add">品牌名称：<input type="text"></div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!--加入: key="index" 时候必须把所有参数写完整 -->
<tr v-for="(item,key,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div> </div>
</body> </html>
<script src="vue2.4.4.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
id: 0,
name: '',
list: [
{ "id": 1, "name": "itcast", "ctime": Date() },
{ "id": 2, "name": "黑马", "ctime": Date() }
]
},
mounted(){
this.myFocus()
},
methods: {
add: function () {
//将id和name push到list数组中
this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
},
del:function(id) { // 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，
var index = this.list.findIndex(function(item){
//根据item中的id属性来判断这个item是否是上面id中
//对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
});
// 根据下标在list集合中将对应的数据删除
// splice(开始删除的下标，删除的长度)
this.list.splice(index,1);
},
// 得到元素的焦点
//这个事件没人触发
// 解决方案：在vue中有一个事件叫做mounted，这个事件当vue中的代码叫做完成后会自动触发
myFocus:function(){
// 通过js得到的id对象
// var idObj = document.getElementById('id'); //方法一： dom操作view与model又耦合在一起了
// 方法二:通过 设置ref="'id" 通过$refs.id设置事件
this.$refs.id.focus();
}
}
}); </script>
三.自动获取焦点用Vue中使用自定义指令实现
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head> <body>
<div id="app">
<div class="add">
编号: <input id="id" v-color="color" v-focus type="text" v-model="id">品牌名称: <input v-model="name" type="text">
<button @click="add">添加</button>
</div>
<div class="add">品牌名称：<input type="text"></div>
<div>
<table class="tb">
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
<tr v-if="list.length <= 0">
<td colspan="4">没有品牌数据</td>
</tr>
<!--加入: key="index" 时候必须把所有参数写完整 -->
<tr v-for="(item,key,index) in list" :key="index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<!-- 使用vue来注册事件时，我们在dom元素中是看不到的 -->
<td><a href="javascript:void(0)" @click="del(item.id)">删除</a></td>
</tr>
</table>
</div> </div>
</body> </html>
<script src="vue2.4.4.js"></script>
<script>
// 先将自定义指令定义好
// directives有两个参数
//参数一： 自定义指令 v-focus
//参数二： 对象，对象中可以添加很多方法
// 添加一个inserted方法:而这个方法中又有两个参数：
//参数一:el 当前使用自定义指令的对象
//参数二：obj 是指它(v-color="color" )后面设置的表达式
//{expression:"color",value:"red",}
Vue.directive("focus",{
inserted:function(el,obj){
// console.log(el);
el.focus();
}
});
Vue.directive("color",{
inserted:function(el,obj){
// obj.style.color = "red";
obj.style.color = obj.value;
console.log(obj.value);
}
}); var vm = new Vue({
el: "#app",
data: {
color:"green",
id: 0,
name: '',
list: [
{ "id": 1, "name": "itcast", "ctime": Date() },
{ "id": 2, "name": "黑马", "ctime": Date() }
]
},
// mounted(){
// this.getFocus()
// },
methods: {
add: function () {
//将id和namepush到list数组中
this.list.push({ "id": this.id, "name": this.name, "ctime": Date() });
},
del:function(id) { // 根据id得到下标
// 默认去遍历list集合，将集合中的每个元素传入到function的item里，
var index = this.list.findIndex(function(item){
//根据item中的id属性来判断这个item是否是上面id中
//对应的数据，如果是返回一个true ,否返回false,继续下面的一条数据的遍历，以此类推
return item.id ==id; //如果返回true，那么findIndex方法会将这个item对应的id返回到外面接受
});
// 根据下标在list集合中将对应的数据删除
// splice(开始删除的下标，删除的长度)
this.list.splice(index,1);
}
}
}); </script>
Vue--由自动获取焦点引出的DOM、mounted、自定义指令的更多相关文章
- Vue.js学习使用心得（二）——自定义指令
自定义指令 除了核心功能默认内置的指令,Vue 也允许注册自定义指令. 自定义指令可以定义全局指令,也可以定义局部指令. 使用 directives 选项来自定义指令. 定义全局指令: <div ...
- Vue 学习笔记 — 无法避免的dom操作
简书 使用Vue了一段时间,感觉确实不错,"数据驱动视图"非常好用,大部分情况下都不需要关心dom,但是凡事都有例外,总有一些时候我们必须要直接对dom进行操作,比如下面这个例子: ...
- 从零开始学 Web 之 Vue.js（二）过滤器，按键修饰符，自定义指令
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue.js：自定义指令
ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...
- Vue自定义指令和路由
一.自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一个全局指令 v-focus,该指令的功能是在页面加载时,元素获得焦点: ...
- vue组件、自定义指令、路由
1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- Vue指令及自定义指令的使用
导航列表: 一.vue指令 二.自定义指令 一.vue指令 回到顶部 1. v-text v-text主要用来更新textContent,可以等同于JS的text属性,不会解析标签,会把标签解析 ...
- Vue.js学习 Item13 – 指令系统与自定义指令
基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自 ...
- Vue.directive 自定义指令
一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在 ...
随机推荐
- 数据交互 axios 的使用
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. ##Axios npm version build status code coverage npm ...
- <input> type 属性
单行文本域 语法格式:<input type = “text” 属性 = “值” /> 常用属性 1 name:文本框的名字.命名规则是:可以包含字母.数字.下划线,只能以字母开头. ...
- 《DSP using MATLAB》Problem 8.11
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- Activiti流程实例管理
1.启动流程 在完成了流程定义部署后,就要启动流程实例了. /** * 1 启动流程 * 当流程到达一个节点时,会在act_ru_execution表中产生1条数据 * 如果当前节点是用户任务节点,这 ...
- JS倒计时两种种实现方式 很不错
最近做浏览器界面倒计时,用js就实现,两种方式: 一:设置时长,进行倒计时.比如考试时间等等 代码如下: <html> <head> <meta charset=&quo ...
- mybatis的Example的使用
MyBatis的Mapper接口以及Example的实例函数及详解 一.mapper接口中的方法解析 mapper接口中的函数及方法 方法 功能说明 int countByExample(UserEx ...
- 【论文翻译】NIN层论文中英对照翻译--（Network In Network）
[论文翻译]NIN层论文中英对照翻译--(Network In Network) [开始时间]2018.09.27 [完成时间]2018.10.03 [论文翻译]NIN层论文中英对照翻译--(Netw ...
- 01.Hibernate快速入门
第一步:下载Hibernate5的运行环境 https://sourceforge.net/projects/hibernate/files/hibernate-orm/ 第二步:在数据库创建表 Cr ...
- E: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用) E: 无法对目录 /var/lib/apt/lists/ 加锁 问题解决方法
使用Ubuntu16.04安装软件执行apt-get update时出现如下错误: E: 无法获得锁 /var/lib/apt/lists/lock - open (11: 资源暂时不可用) E: 无 ...
- 图像复原MATLAB实现
前言:本篇博客先介绍滤波器滤除噪声,再介绍滤波器复原,侧重于程序的实现. 一:三种常见的噪声 二:空间域滤波 空间域滤波复原是在已知噪声模型的基础上,对噪声的空间域进行滤波.空间域滤波复原方法主要包括 ...