<!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. day5_递归调用

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

  2. Oracle shrink table

    shrink必须开启行迁移功能. alter table table_name enable row movement ; 在oracle中可以使用alter table table_name shr ...

  3. SQL DATE_FORMAT() 函数

    参照原文:https://blog.csdn.net/moakun/article/details/82290387 DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据 MySQL 使 ...

  4. shell脚本中sqlite3命令查询数据库失败返回空，并将错误信息打印到标准错误输出

    shell脚本中sqlite3命令查询数据库失败返回空,并将错误信息打印到标准错误输出 如: #/bin/sh local ret='sqlite3 test.db "select test ...

  5. 洛谷P5234 越狱老虎桥 [JSOI2012] tarjan

    正解:tarjan+贪心(?并不会总结是什么方法QAQ,,, 解题报告: 传送门! 这题是真的题意杀,,,我我我要不是之前知道题目大意了我怕是怎么看都看不懂这是个什么意思昂QAQ 所以先说下题目大意好 ...

  6. 【数据可视化-pyecharts】pyecharts快速入门

    pyecharts快速开始 首先开始来绘制你的第一个图表 from pyecharts import Bar bar = Bar("我的第一个图表", "这里是副标题&q ...

  7. 误删除innodb ibdata数据文件

    今天在群里看到有人说不熟悉innodb把ibdata(数据文件)和ib_logfile(事务日志)文件误删除了.不知道怎么解决.当时我也不知道怎么办.后来查阅相关资料.终找到解决方法.其实恢复也挺简单 ...

  8. 林兴爆料小程序很快可以支持各个 App 直接打开小程序

    在微信开放平台基础高级产品经理林兴演讲的当场,他爆料了微信小程序一个轰动性新能力:小程序很快可以支持各个 App 直接打开小程序!没错,你没有听错,简单来说,在不久以后,所有的 App 里面都可以看到 ...

  9. docker+mysql基本搭建过程

    查询镜像 [root@bms-e4e3 ~]# docker search mysql INDEX NAME DESCRIPTION STARS OFFICIAL AUTOMATED docker.i ...

  10. redis实现消息队列(七)

    1. 介绍 redis有一个数据类型叫list(列表),它的每个子元素都是 string 类型的双向链表.我们可以通过 push,pop 操作从链表的头部或者尾部添加删除元素.这使得 list 既可以 ...