vue局部组件使用自定义指令directives 获取焦点

Myth丶恋晨 2021-12-19 04:57 326阅读 0赞

<!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>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/animate.css/3.7.1/animate.css" rel="stylesheet">

<style>

</style>

</head>

<body>

<div id="app">

<index></index>

<index-Component></index-Component>

<login></login>

</div>

<script>

Vue.component('index', \{

template: '<button @click="change">按钮</button>',

data: function () \{

return \{

msg: '全局组件中使用data的方式'

\}

\},

methods: \{

change() \{

console.log('组件中methods方法');

\}

\},

\})

Vue.component('indexComponent', \{

template: '<h1>这是一个全局的组件</h1>'

\})

var vm = new Vue(\{

el: '\#app',

data: \{

flag: true

\},

methods: \{

\},

components: \{

login: \{

template: \`

<div>

<button @click="change" s>按钮2</button>

<input type='text' v-focus ></div>

\`,

data: function () \{

return \{

msg: '全局组件中使用data的方式'

\}

\},

methods: \{

change() \{

console.log('局部组件中methods方法');

\}

\},

directives: \{

focus: \{

inserted: function (el) \{

el.focus()

\}

\}

\}

\},

\}

\});

</script>

</body>

</html>

转载于:https://www.cnblogs.com/xiannv/p/10994863.html

发表评论取消回复

表情：

评论列表（有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue高级API - directives 自定义指令

背景除了核心功能默认内置的指令 (`v-model` 和 `v-show`)，Vue 也允许注册自定义指令。注意，在 `Vue2.0` 中，代码复用和抽象的主要形式...

ゞ浴缸里的玫瑰/ 2024年04月17日 15:38/ 0 赞/ 68 阅读

相关 vue 初学2 （自定义全局指令让文本框获取焦点）

调用的时候使用v-focus ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNz

客官°小女子只卖身不卖艺/ 2023年06月08日 10:55/ 0 赞/ 5 阅读

相关 Vue中directive自定义指令

![format_png][] 想必大家在使用`Vue`的时候，会经常用的`Vue`的一些指令。比如`v-model`、`v-on`、`v-bind`、`v-

朱雀/ 2023年02月16日 12:22/ 0 赞/ 211 阅读

相关 vue 指令自定义-局部

<body> <div id="app"> <input type="text" v-color='msg'> <input

妖狐艹你老母/ 2023年01月07日 08:51/ 0 赞/ 216 阅读

相关 vue自定义指令 v-directives

vue自定义指令 v-directives (来源网络) 基于 vue 的自定义指令集合，包含复制粘贴指令 v-copy 长按指令 v-longpress

川长思鸟来/ 2022年12月29日 06:47/ 0 赞/ 223 阅读

相关十一、Vue.directive自定义指令

Vue.directive自定义指令 1、什么是全局API？全局API并不在构造器里，而是先

深藏阁楼爱情的钟/ 2022年05月03日 06:28/ 0 赞/ 266 阅读

相关深入解析Vue.directive 自定义指令

这篇文章主要介绍了Vue.directive 自定义指令，文中通过示例代码介绍的非常详细，写的十分的全面细致，具有一定的参考价值，对此有需要的朋友可以参考学习下。如有不足之处，

「爱情、让人受尽委屈。」/ 2022年01月19日 02:49/ 0 赞/ 272 阅读

相关 vue局部组件使用自定义指令directives 获取焦点

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

Myth丶恋晨/ 2021年12月19日 04:57/ 0 赞/ 327 阅读

相关 VUE自定义指令获取焦点

<input type="text" name="" id="input" class="form-control" value="" required="required"

叁歲伎倆/ 2021年12月19日 04:57/ 0 赞/ 390 阅读

相关 Angular：使用 [@Directive] 自定义指令

指令介绍在 Angular 中有三种类型的指令：组件，有模板的指令，组件是继承于指令的，只是扩展类与 UI 相关的属性。属性型指令，改变 DOM 元素

矫情吗；*/ 2021年09月21日 04:06/ 0 赞/ 375 阅读