20-基础-自定义指令-局部自定义指令


<!DOCTYPE html>
<html>

<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>
</head>

<body>
    <div id='app'>
        <input type="text" v-focus>
    </div>
    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {},
            // // 局部自定义指令
            // // 1. 定义 (通过选项)
            // // 2. 功能
            // // 3. 使用
            directives: {
                // 指令名字:{inserted:function(el){}}
                focus: {
                    inserted: function (el) {
                        el.focus();
                    }
                }
            },
            methods: {}
        });
    </script>
</body>

</html>

原文地址:https://www.cnblogs.com/divtab/p/10940539.html

时间: 2024-09-28 14:12:24

20-基础-自定义指令-局部自定义指令的相关文章

Vue组件--局部过滤器 和 局部自定义指令

注意:     局部过滤器 和 局部自定义指令 需要在组件内部定义,并且只有当前组件才可以使用,组件外无效 1.  定义局部过滤器 使用filters来定义,他是一个对象,里面是以过滤器名称为名的一个函数,它time是默认的参数,即需要过滤的数据.示例如下 1 <body> 2 <div id="app"> 3 <one></one> <!--应用组件 --> 4 <two></two> 5 </

vue内置指令与自定义指令

一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例如:v-on:click  v-on:keyup 3.v-model:数据双向绑定:用于表单输入等:例如:<input v-model="message"> 4.v-show:条件渲染指令,为DOM设置css的style属性 5.v-if:条件渲染指令,动态在DOM内添加或删除

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些

jsp基础知识二(jsp编译指令)

JSP的编译指令是通知JSP引擎的消息. 常见的编译指令有三个: page:该指令是针对当前页面的指令. include:用于指定如何包含另一个页面. tablib:用于定义和访问自定义标签. 编译指令格式如下: <%@   编译指令名   属性名=“属性值” ...%> 1.page指令 通常位于JSP页面的顶端,对同一个页面可以有多个page指令.page指令语法格式如下: <%@page [language="Java"]                    

iOS开发UI基础—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

ios开发UI基础-使用纯代码自定义UItableviewcell实现一个简单的微博界面布局 一.实现效果 二.使用纯代码自定义一个tableview的步骤 1.新建一个继承自UITableViewCell的类 2.重写initWithStyle:reuseIdentifier:方法 添加所有需要显示的子控件(不需要设置子控件的数据和frame,  子控件要添加到contentView中) 进行子控件一次性的属性设置(有些属性只需要设置一次, 比如字体\固定的图片) 3.提供2个模型 数据模型:

谢烟客---------Linux之Bash基础特性条件测试&&自定义退出状态码(6)

条件测试 判断某需求是否满足,需要由测试机制来实现. 根据命令的执行状态结果,表达不同的测试条件 1.根据id命令的执行状态结果,判断用户是否存在 [[email protected] ~]# id root uid=0(root) gid=0(root) groups=0(root) [[email protected] ~]# echo $? 0 [[email protected] ~]# id help id: help: no such user [[email protected] 

自定义View基础 - 最易懂的自定义View原理系列(1)

前言 自定义View原理是Android开发者必须了解的基础: 在了解自定义View之前,你需要有一定的知识储备: 本文将全面解析关于自定义View中的所有知识基础. 目录 1. View的分类 视图View主要分为两类: 类别 解释 特点 单一视图 即一个View,如TextView 不包含子View 视图组 即多个View组成的ViewGroup,如LinearLayout 包含子View 2. View类简介 View类是Android中各种组件的基类,如View是ViewGroup基类

PowerShell_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念

PowerShell_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念 据我个人所知,windows下的cmd shell除了能够通过修改系统参数来对其中的环境变量进行改变外,其环境的可自定义性相对来说很困难,而在Linux环境中,可以通过修改/etc目录下的某些配置文件来达到配置shell环境的目的.也许这也是某些人诟病cmd shell功能不强的原因之一. 而目前这种状况在windows powershell中得到了改善,可以说PS中提供的自定义环境的功能

jsp基础知识二(jsp动作指令)

动作指令与编译指令不同,编译指令是通知servlet引擎的处理消息,而动作指令只是运行时的动作.编译指令在将JSP编译成Servlet时起作用,而动作指令通常可替换成JSP脚本,它只是JSP脚本的标准化写法. (1)JSP:forward  执行页面转向,将请求的处理转发到下一个页面. (2)JSP:param  用于传递参数,必须与其他支持参数的标签一起使用 (3)JSP:include  用于动态引入一个JSP页面 (4)JSP:plugin 用于下载JavaBean或者Applet到客户端