<!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. Eclipse + ndk+ cocos2dx 调试Cocos2dx 程序

    本文是我自己尝试通过eclipse来在windows平台下搭建cocos2dx的过程,期间遇到了一些问题,都是通过网上借鉴别人的博文来解决的,下面也列出来这些参考文献.写下来的目的主要是自己以后要用的 ...

  2. js字符串方法汇总

    1.length方法 var stringObject=new String("hellow world"); console.log(stringObject.length);/ ...

  3. 使用Redis 计数器防止刷接口

    业务需求中经常有需要用到计数器的场景:为了防止恶意刷接口,需要设置一个接口每个IP一分钟.一天等的调用次数阈值:为了降低费用,限制发送短信的次数等.使用Redis的Incr自增命令可以轻松实现以上需求 ...

  4. php获取数据库结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery 学习笔记（2）（jQuery静态方法）

    jQuery静态方法 1.$.each() 和 $.map()  既可以遍历数组也可以遍历伪数组 $.each(arr, function(value, index) { ... } ) $.map( ...

  6. awk 和 sed (Stream Editor)

    1.sed pattern space(模式空间)相当于车间sed把流内容在这里处理: hold space(保留空间)相当于仓库,加工的半成品在这里临时储存(当然加工完的成品也在这里存储). h/H ...

  7. centos7.6 安装与配置 MongoDB yum方式

    1 创建yum源文件,添加以下内容 vim /etc/yum.repos.d/mongodb-org-4.0.repo [mongodb-org-4.0] name=MongoDB Repositor ...

  8. 注意:WordPress栏目别名slug不要设为p

    这几天ytkah接了一个WordPress项目,没用多少时间就搞定了,交付给甲方使用,刚开始还算顺利,突然有一天其中一个栏目及栏目下是文章都无法访问了,出现404页面,其他页面都可以.询问他们最近改动 ...

  9. RN animated缩放动画

    效果图: 代码: import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, Animated, T ...

  10. 报错解决——Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX AVX2

    在导入tensorflow后,进行运算时,出现了报错Your CPU supports instructions that this TensorFlow binary was not compile ...