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. 项目实战 Prometheus环境搭建

    项目摘要: 本文是搭建一套prometheus环境的教程. 前期准备:准备三台虚拟机,本文以centos7为例. 项目具体实施:分别进入每台虚拟机设置hostname:# hostnamectl se ...

  2. appium+Andriod环境搭建遇到问题

    报错:Caused by: org.openqa.selenium.WebDriverException: An unknown server-side error occurred while pr ...

  3. 【UE4 材质】一些小功能

    利用材质实现物体自转 物体外轮廓高亮 使用postprocess+custom depth(防遮挡) https://www.tomlooman.com/soft-outlines-in-ue4/ h ...

  4. 【二食堂】Beta - Scrum Meeting 3

    Scrum Meeting 3 例会时间:5.15 18:30~18:50 进度情况 组员 当前进度 今日任务 李健 1. 继续完成文本区域划词添加的功能 issue 1. 划词功能已经实现,继续开发 ...

  5. [敏捷软工团队博客]项目介绍 & 需求分析 & 发布预测

    项目 内容 2020春季计算机学院软件工程(罗杰 任健) 博客园班级博客 作业要求 团队项目选择 我们在这个课程的目标是 在团队合作中锻炼自己 这个作业在哪个具体方面帮助我们实现目标 了解项目整体情况 ...

  6. elasticsearch嵌套对象的映射

    在es中,我们有时候可能需要映射,{ "field" : "xx" , "field01" : [] }这样格式的嵌套对象,默认情况下es会 ...

  7. 这一篇 K8S(Kubernetes)我觉得可以了解一下!!!

    点赞再看,养成习惯,微信搜索[牧小农]关注我获取更多资讯,风里雨里,小农等你,很高兴能够成为你的朋友. 什么是Kubernetes? Kubernetes 是Google开源的分布式容器管理平台,是为 ...

  8. 震惊,hzoi的考试竟然折磨简单,活到爆!

    众所周知,hzoi的考试题非常"简单",那么究竟有多简单呢?最近,一位外国小哥开发出了hzoi的考试竟然折磨简单,活到爆!的方法,这究竟是怎么一回事呢?快和小编一起来看看吧- 满分 ...

  9. [经验] 电源抑制比(PSRR)的测量原理及解决方法

    PSRR(Power supply rejection ratio)又称电源抑制比,是衡量电路对于输入电源中纹波抑制大小的重要参数,表示为输出纹波和输入纹波的对数比,单位为分贝(dB)[1],其计算公 ...

  10. 海思 core 电压动态调整

    http://www.eda365.com/forum.php?mod=viewthread&tid=108620&_dsign=5bee4dcb http://www.eda365. ...