https://www.bootcdn.cn/ 前端资源库

　　

<!--

常用内置指令

  v:text : 更新元素的 textContent

  v-html : 更新元素的 innerHTML

  v-if : 如果为true, 当前标签才会输出到页面

  v-else: 如果为false, 当前标签才会输出到页面

  v-show : 通过控制display样式来控制显示/隐藏

  v-for : 遍历数组/对象

  v-on : 绑定事件监听, 一般简写为@

  v-bind : 强制绑定解析表达式, 可以省略v-bind

  v-model : 双向数据绑定

  ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象

  v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

-->

　　<js>

vue-myPlugin.js

　　

/*

vue插件库

 */

(function (window) {

    //需要向外部暴露插件对象

    const MyPlugin={}

    //插件必须有install

    MyPlugin.install = function (Vue, options) {

        // 1. 添加全局方法或属性

        Vue.myGlobalMethod = function () {

            // 逻辑...

            console.log("vue函数对象的方法myGlobalMethod执行了")

        }

        // 2. 添加全局资源 自定义指令

        Vue.directive('my-directive', function (el,binding) {

            el.textContent=binding.value.toUpperCase()

        })

        // 4. 添加实例方法 实例方法放在原型上

        Vue.prototype.$myMethod = function (methodOptions) {

            // 逻辑...

            console.log("vue实例对象$myMethod执行了")

        }

    }

    //向外暴露插件

    window.MyPlugin=MyPlugin

})(window)

　　测试页面

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>自定义插件</title>

</head>

<body>

<div id="test">

  <p v-my-directive="msg"></p>

</div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript" src="../js/vue-myPlugin.js"></script>

<script>

//声明使用插件

  Vue.use(MyPlugin)

 const vm=new Vue({

    el: '#test',

    data: {

        msg: "I like You"

    }

})

  vm.$myMethod();

</script>

</body>

</html>

　　

vue的常用指令的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  4. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  5. 新人成长之入门Vue.js常用指令介绍（一）

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  6. Vue的常用指令v-if， v-for， v-show，v-else， v-bind， v-on

    Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribu ...

  7. vue入门-常用指令操作

    指令:v-xx组成的特殊指令,如果一个标签中有指令会默认替换原有的书 v-model:实现数据和视图的双向绑定 v-text:在元素中插入值 v-html:在元素中插入标签或者插入文本 v-if:根据 ...

  8. vue之常用指令

    事件缩写 v-on:click= 简写方式 @click= 事件对象$event <!DOCTYPE html> <html lang="en"> < ...

  9. Vue.js常用指令总结

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind ...

随机推荐

  1. Kotlin/Native KMM项目架构

    一.什么是KMM? Kotlin Multiplatform Mobile ( KMM ) 是一个 SDK,旨在简化跨平台移动应用程序的创建.在 KMM 的帮助下,您可以在 iOS 和 Android ...

  2. NXOpen.BlockStyler的一些用法

    关于BLOCK UI的一些控件的用法,本人曾经使用的代码,拿出来共享: Option Strict Off Imports NXOpen Imports NXOpen.BlockStyler Impo ...

  3. 设置elementUI的table组件滚动条位置

    1.设置table的ref为tableList 2.设置滚动至顶部 this.$refs.tableList.bodyWrapper.scrollTop =0; 3.设置滚动至底部 this.$ref ...

  4. Go语言核心36讲（Go语言进阶技术五）--学习笔记

    11 | 通道的高级玩法 我们已经讨论过了通道的基本操作以及背后的规则.今天,我再来讲讲通道的高级玩法. 首先来说说单向通道.我们在说"通道"的时候指的都是双向通道,即:既可以发也 ...

  5. noj->电子老鼠走迷宫

    00 问题 描述: 有一只电子老鼠被困在如下图所示的迷宫中.这是一个12*12单元的正方形迷宫,黑色部分表示建筑物,白色部分是路.电子老鼠可以在路上向上.下.左.右行走,每一步走一个格子.现给定一个起 ...

  6. [火星补锅] siano 神奇的线段树

    前言: 本来以为很难打的,没想到主干一次就打对了,然而把输入的b和d弄混了,这sb错误调了两个小时... 解析: 神奇的线段树.注意到有一个性质,无论怎么割草,生长速度快的一定不会比生长速度慢的矮.因 ...

  7. NB-IoT的DRX、eDRX、PSM三个模式怎么用？通俗解释，看完就懂！

    面我们讲了不少NB-IOT的应用.软件和硬件设计的变动. (链接在文章末尾). 今天讲讲NB-IoT的三大模式,在各种物联网和智能硬件场景中的使用方法 DRX.eDRx.PSM是什么? DRX虽然叫做 ...

  8. 有了 HTTP 协议，为什么还需要 Websocket？

    WebSocket 是一种基于 TCP 连接上进行全双工通信的协议,相对于 HTTP 这种非持久的协议来说,WebSocket 是一个持久化网络通信的协议. 它不仅可以实现客户端请求服务器,同时可以允 ...

  9. RocketMQ源码详解 | Broker篇 · 其一：线程模型与接收链路

    概述 在上一节 RocketMQ源码详解 | Producer篇 · 其二:消息组成.发送链路 中,我们终于将消息发送出了 Producer,在短暂的 tcp 握手后,很快它就会进入目的 Broker ...

  10. /etc/hosts 详解

    /etc/hosts:主机名查询静态表,是ip地址与域名快速解析的文件.ip地址与主机名之间的映射,包括主机的别名. 通常将常用的域名和ip地址映射加入到hosts文件中,实现快速方便的访问. 如果没 ...