<!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="./lib//Vue2.5.17.js"></script>

     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

     <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">

 </head>

 <body>

     <div id="app">

         <div class="panel panel-primary">

             <div class="panel-heading">

                 <h3 class="panel-title">Panel title</h3>

             </div>

             <div class="panel-body table-inline">

                 <label for="id">id:

                     <input type="text" class="form-control">

                 </label>

                 <label for="name">name:

                     <!-- 指定传参要加引号，不然就会被当成变量，也可以以变量形式放在data中 -->

                     <input type="text" class="form-control" id="name" v-focus="'blue'">

                 </label>

             </div>

         </div>

     </div>

     <script>

         //定义全局指定,focus为自定义指令名称，调用时必须加 v-

         Vue.directive("focus", {

             //如果focus绑定到哪个元素，el就代表被绑定的那个元素。

             //注意：在每个函数中，第一个参数，永远是el，el是一个原和一的js对象。

             //el 和 binding 都是形参名可以自已定义

             bind: function (el, binding) { //当指定一绑定到元素上的时候就会立即执行这个bind函数，只触发一次

                 // el.style.color = "red";

                 el.style.color = binding.value;

                 // console.log(binding.name); //focus

                 // console.log(binding.value); //blue

                 // console.log(binding.expression); // 'blue' 输出原始值

             },

             inserted: function (el) { //inserted表示元素插入到DOM中的时候，会执行inserted函数，只触发一次

                 el.focus();

             },

             updated: function () { //当VNode更新的时候会执行updated，可能会触发多次

             }

         })

         var vm = new Vue({

             el: "#app",

             // directives: { //定义私有指令,跟全局指令一样

             //     "focus": {

             //         bind: function (el, binding) { //当指定一绑定到元素上的时候就会立即执行这个bind函数，只触发一次

             //             el.style.color = binding.value;

             //         },

             //         inserted: function (el) { //inserted表示元素插入到DOM中的时候，会执行inserted函数，只触发一次

             //             el.focus();

             //         },

             //         updated: function () { //当VNode更新的时候会执行updated，可能会触发多次

             //         }

             //     }

             // }

         })

     </script>

 </body>

 </html>

Vue系列之 => 使用钩子函数的第二个参数传参的更多相关文章

  1. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  2. Vue基础进阶 之 Vue生命周期与钩子函数

    Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

  3. vue教程2-01 vue生命周期、钩子函数

    vue教程2-01 vue生命周期.钩子函数 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

    1.vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave):http://www.menvscode.com/detail/ ...

  5. vue之生命周期钩子函数之运用

    一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...

  6. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  7. vue生命周期、钩子函数

    https://segmentfault.com/a/1190000011381906    详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...

  8. vue的生命周期钩子函数

    一.vue生命周期图示 二.钩子函数执行时间 beforeCreate      在创建实例之前,data只声明但没有赋值  在实例初始化之后,数据观测 (data observer) 和 event ...

  9. vue动画使用javascript钩子函数

    钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期 <transition   v-on:before-enter= ...

随机推荐

  1. python3反转字符串的3种方法

    前段时间看到letcode上的元音字母字符串反转的题目,今天来研究一下字符串反转的内容.主要有三种方法: 1.切片法(最简洁的一种) #切片法 def reverse1(): s=input(&quo ...

  2. day5_递归调用

    #递归的意思,函数自己调用自己#递归最多递归999次#递归的效率没有循环高 实例1-递归调用: count = 0 def say(): global count count += 1 print(' ...

  3. 机器学习:K-Means/K-Means++

  4. RequireJs的理解

    什么是RequireJs RequireJS 是一个JavaScript模块加载器. 在ES6出现之前,JS不像其他语言同样拥有“模块”这一概念,于是为了支持JS模块化,出现了各种各样的语言工具,如w ...

  5. java 集合（一）ArrayList的继承树

    这是ArrayList的继承树,它继承了AbstractCollection抽象类,AbstractCollection类实现了Collection接口,Collection接口继承Iterable接 ...

  6. Oracle内置函数SQLCODE和SQLERRM的使用

    在我们写proc程序中经常要有错误处理,在错误处理中我们经常要输出错误信息来给帮助我们分析和解决错误原因,从而更正数据.这时候就会用到SQLCODE和SQLERRM. SQLCode:数据库操作的返回 ...

  7. SpringBoot-区分不同环境配置文件

    spring.profiles.active=pre application-dev.properties:开发环境 application-test.properties:测试环境 applicat ...

  8. .NET Core 使用 Kestrel

    Kestrel介绍 Kestrel是一个基于libuv的跨平台web服务器 在.net core项目中就可以不一定要发布在iis下面了 Kestrel体验 可以使用useUrls来设置一个请求的地址 ...

  9. finecms如何调用自定义内容

    我们建站的时间经常会有一些固定的元素,比如电话.地址等,这种相对比较简单的东西可以让编辑人员直接在后台就可以定义,那么finecms有没有这个功能呢?怎么定义?如何调用? finecms后台有一个自定 ...

  10. Jmeter测试实践：文件下载接口

    一 Jmeter步骤 1.打开jmeter4.0,新建测试计划,添加线程组.根据实际情况配置线程属性. 2.添加HTTP请求.根据接口文档进行配置. Basic部分修改如下,Advanced部分保持默 ...