<!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. linux查内存操作：cat /proc/meminfo

    https://www.cnblogs.com/zhuiluoyu/p/6154898.html cat /proc/meminfo

  2. LeetCode 669 Trim a Binary Search Tree 解题报告

    题目要求 Given a binary search tree and the lowest and highest boundaries as L and R, trim the tree so t ...

  3. SQL查询优化:详解SQL Server非聚集索引（转载）

    本文是转载,原文地址 http://tech.it168.com/a2011/1228/1295/000001295176.shtml 在SQL SERVER中,非聚集索引其实可以看作是一个含有聚集索 ...

  4. 安装Vue Devtools

    命令行进入vue-devtools\vue-devtools-master执行 cnpm install (貌似npm不太好使,也可能是我网络代理的原因) (淘宝镜像安装 npm install -- ...

  5. fatal error: vector: No such file or directory

    jni/mac.cpp:28:18: fatal error: vector: No such file or directory jni/mac.cpp:29:18: fatal error: me ...

  6. mysql开发总结

    一.理解MySQL基本概念 1.MySQL软件:MySQL实际上就是一软件,是一工具,是关系型数据库管理系统软件 2.MySQL数据库:就是按照数据结构来组织.存储和管理数据的仓库 3.MySQL数据 ...

  7. 装系统w7、ubuntu、centos等系统(一)

    装w7系统准备 1.从老毛桃u盘启动盘制作工具_老毛桃u盘装系统_老毛桃pe_老毛桃官网下载装机版 2.一个正常使用的U盘,但容量大于4G,并且插入电脑保持连接 3.老毛桃装机版选择U盘启动-> ...

  8. 图片在IE8浏览器多一个有边框问题解决办法

    最后在网上找了一下答案,IE8浏览器图片多一个有色边框,而Chrome浏览器没有边框的解决办法.   指定img的边框样式:   img{border-style:none;}

  9. javaScript刷新页面

    刷新页面有一下几种: 1.直接在页面上: 每两秒刷新页面 <meta http-equiv="refresh" content="2"> 2.每秒刷 ...

  10. [js]js的表单验证onsubmit方法

    http://uule.iteye.com/blog/2183622 表单验证类 <form class="form" method="post" id= ...