<!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. da5_模块

    一.模块.包 什么是模块? 模块实质上就是一个python文件,它是用来组织代码的,意思就是说把python代码写到里面,文件名就是模块的名称,test.py test就是模块名称. 什么是包? 包, ...

  2. pyinstaller-打包python程序为exe文件

    pyinstaller ---转载文章 视频:https://www.bilibili.com/video/av21670971/ PyInstaller可以用来打包python应用程序,打包完的程序 ...

  3. c#中base64编码解码

    //编码: byte[] bytes = Encoding.Default.GetBytes("要转换的字符"); string str = Convert.ToBase64Str ...

  4. 如何调用finecms指定栏目的描述关键词

    有时我们在用finecms建站时需要调用指定栏目的描述和关键词,实现个性化需求,比如id为23的栏目很重要,要让它在首页展示出来,这时我们要如何调用呢?{dr_cat_value(23, 'name' ...

  5. 运维自动化工具ansible

    企业级自动化运维工具应用实战ansible 公司计划在年底做一次大型市场促销活动,全面冲刺下交易额,为明年的上市做准备.公司要求各业务组对年底大促做准备,运维部要求所有业务容量进行三倍的扩容,并搭建出 ...

  6. LVS集群简介及使用

    什么是集群 一组通过高速网络互联的计算组,并以单一系统的模式加以管理 将很多服务器集中在一起,提供一种服务,在客户端看来就象是只有一个服务器 可以在付出较低成本的情况下获得在性能,可靠性,灵活性方面的 ...

  7. 在Ubuntu上实现局域网共享文件夹

    在Ubuntu上实现局域网共享文件夹如果你的系统是Ubuntu 14.04.14.10或12.04,有两个方法可以使你通过局域网在搭载Windows或其他Linux的电脑上共享本地文件.对局域网中的每 ...

  8. 20170811 JQuery基础知识学习记录（一）

    基本写法 $(selector).action() $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 <p> 元素 $(&quo ...

  9. mac-破解2018 webstorm

    参考链接:https://blog.csdn.net/pariese/article/details/77540069 后续待整理

  10. Kinect2.0点云数据获取

    接上一篇:Kinect2.0获取数据 http://blog.csdn.net/jiaojialulu/article/details/53087988 博主好细心,代码基本上帖过来就可以用,注释掉的 ...