Vue-38、Vue中插件使用

1、新建plugins.js文件

在这里插入图片描述
2、可以在plugins.js 定义全局过滤器 定义全局指令 定义混入 给vue原型上添加一个方法

export  default {install(Vue){console.log("install",Vue);//全局过滤器Vue.filter('mySlice',function (value) {return value.slice(0,4)});//定义全局指令Vue.directive('fbind',{//指令与元素成功绑定时(一上来)bind(element, binding) {element.value  = binding.value;},//指令所在元素被插入页面时inserted(element, binding){element.focus();},//指令所在的模板被重新解析时update(element, binding){element.value  = binding.value;}});//定义混入Vue.mixin({data(){return{x:100,y:200}}});//给VUE原型上添加一个方法   (vm和原型都能用)Vue.prototype.hello = ()=>{alert('你好啊')}}
};

3、在mian.js引入插件

//该文件是整个项目的入口文件
//引入Vue
import Vue from 'vue'
//引入APP组件,他是所有组件的父组件
import App from './App.vue'
import plugins from './plugins'
//关闭Vue是生产提示
Vue.config.productionTip = false;
//应用插件
Vue.use(plugins);
//创建Vue实例对象---vm
new Vue({render: h => h(App),
}).$mount('#app');

4、在shool 和student组件中可以使用

school.vue

<template><div class="school"><h1>学校名称:{{name | mySlice}}</h1><h2>学校地址:{{address}}</h2><button @click="test" >点我测hello方法</button></div>
</template>
<!---->
<script>//引入一个混合export default {name: "School",data(){return{name:'清华大学光华学院',address:'北京',}},methods:{test(){this.hello();}}}
</script><style scoped>.school{background-color: bisque;}
</style>

student.vue

<template><div><h2 >学生姓名:{{name}}</h2><h2 >学生年龄:{{age}}</h2><input v-fbind:value="name"></div>
</template>
<script>export default {name: "Student",data(){return{name:'张三',age:19}},}
</script><style scoped></style>```App.vue```javascript
<template><div id="app">
<!--    <img alt="Vue logo" src="./assets/logo.png">--><student></student><School></School><hr></div>
</template>
<script>
import  Student from './components/Student.vue'
import School from './components/School.vue'
export default {name: 'App',components: {Student,School},
}
</script>
<style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #500012;margin-top: 60px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

遇到这3种接口测试问题,其实,你可以这么办~

作为整个软件项目的必经环节&#xff0c;软件测试是不可缺少的“查漏补缺”环节。而作为软件测试中的重要一环——接口测试&#xff0c;几乎串联了整个项目所有的输入和输出环节。 前几年&#xff0c;我在做后端测试时&#xff0c;接触最多的正是接口测试。基于此&#xff0c;…

操作系统-进程通信(共享存储 消息传递 管道通信 读写管道的条件)

文章目录 什么是进程通信为什么进程通信需要操作系统支持共享存储消息传递直接通信方式间接通信方式 管道通信小结注意 什么是进程通信 分享吃瓜文涉及到了进程通信 进程通信需要操作系统支持 为什么进程通信需要操作系统支持 进程不能访问非本进程的空间 当进程P和Q需要…

美易平台:芯片生产商Cerebras Systems考虑最快今年IPO

据知情人士透露&#xff0c;硅谷芯片制造初创公司Cerebras Systems Inc.正考虑在今年下半年进行首次公开募股&#xff08;IPO&#xff09;。如果成功上市&#xff0c;这家人工智能&#xff08;AI&#xff09;超级计算机生产商的估值将超过其2021年融资时的40亿美元估值。目前&a…

【DeepLearning-3】前馈(feed-forward)神经网络层

类定义 class FeedForward(nn.Module): FeedForward 类继承自 nn.Module&#xff0c;nn.Module是PyTorch中所有神经网络模块的基类。nn.Module允许您创建自己的神经网络层。 nn.Module 是构建所有神经网络层和模型的基类。当创建一个类继承自 nn.Module时&#xff0c;意味着你…

JavaScript中有哪些函数类型

JavaScript中的函数类型有很多种&#xff0c;下面列出了一些常见的函数类型及其示例&#xff1a; 一元函数&#xff08;Unary Functions&#xff09;&#xff1a;只接收一个参数的函数。 一元函数是指函数方程中只包含一个自变量的函数。例如&#xff0c;函数yF(x)是一元函数&…

幻兽帕鲁服务器数据备份

搭建幻兽帕鲁个人服务器&#xff0c;最近不少用户碰到内存不足、游戏坏档之类的问题。做好定时备份&#xff0c;才能轻松快速恢复游戏进度 这里讲一下如何定时将服务器数据备份到腾讯云轻量对象存储服务&#xff0c;以及如何在有需要的时候进行数据恢复。服务器中间的数据迁移…

数据结构(顺序表)

文章目录 一、线性表1、线性表1.1、线性表的定义1.2、线性表的操作 2、顺序表2.1、顺序表的实现--静态分配2.2、顺序表的实现--动态分配2.2、顺序表的特点 3、顺序表的基本操作3.1、插入操作3.2、删除操作3.3、查找操作3.2、按位查找3.2、按值查找 一、线性表 1、线性表 1.1、…

Git 删除已经 Push 到远程多余的文件

例如要删除 data/log 文件 1. 在当前项目下打开终端 2. 查看有哪些文件夹 dir 3. 预览将要删除的文件&#xff08;如果不清楚该目录下是否存在不应该删除的文件&#xff09; git rm -r -n --cached 文件/文件夹名称 加上 -n 这个参数&#xff0c;执行命令时&#xff0c;是不会…

Numpy应用-股价分析实战

股价统计分析 数据样本 股价常用指标 极差 越高说明波动越明显 股价近期最高价的最大值和最小值的差价 成交量加权平均价格 英文名VWAP&#xff08;Volume-Weighted Average Price&#xff0c;成交量加权平均价格&#xff09;是一个非常重要的经济学量&#xff0c;代表着金融…

考研机试 糖果分享游戏

糖果分享游戏 一些学生围坐一圈&#xff0c;中间站着他们的老师&#xff0c;所有人都面向老师。 他们要玩一个有关糖果分享的游戏。每个学生最开始都有一定数量的糖果&#xff08;保证一定是偶数&#xff09;。 每轮游戏的进程为&#xff1a; 老师吹起哨声&#xff0c;所有学…

苹果Find My市场需求火爆,伦茨科技ST17H6x芯片助力客户量产

苹果发布AirTag发布以来&#xff0c;大家都更加注重物品的防丢&#xff0c;苹果的 Find My 就可以查找 iPhone、Mac、AirPods、Apple Watch&#xff0c;如今的Find My已经不单单可以查找苹果的设备&#xff0c;随着第三方设备的加入&#xff0c;将丰富Find My Network的版图。产…

2024年华为OD机试真题-寻找最富裕的小家庭-Java-OD统一考试(C卷)

题目描述: 在一棵树中,每个节点代表一个家庭成员,节点的数字表示其个人的财富值,一个节点及其直接相连的子节点被定义为一个小家庭。 现给你一棵树,请计算出最富裕的小家庭的财富和。 输入描述:第一行为一个数N,表示成员总数,成员编号1-N,1<=N<=1000 第二行为N个…

Unity 中的接口和继承

在Unity的游戏开发中&#xff0c;理解面向对象编程的概念&#xff0c;如类、接口、继承和多态性&#xff0c;是非常重要的。本文旨在帮助理解和掌握Unity中接口和继承的概念&#xff0c;以及如何在实际项目中应用这些知识。 类和继承 在C#和Unity中&#xff0c;类是构建应用程序…

WSL中遇到CondaHTTPError: HTTP 000 CONNECTION FAILED for url解决方法

文章目录 遇到问题解决方法参考 遇到问题 之前用WSL使用conda都是正常的&#xff0c;今天用的时候遇到CondaSSLError: Encountered an SSL error. Most likely a certificate verification issue. (base) lishizhengDESKTOP-8SJ6087:~$ conda update -n base -c defaults con…

Google Chrome RCE漏洞 CVE-2020-6507 和 CVE-2024-0517 流程分析

本文深入研究了两个在 Google Chrome 的 V8 JavaScript 引擎中发现的漏洞&#xff0c;分别是 CVE-2020-6507 和 CVE-2024-0517。这两个漏洞都涉及 V8 引擎的堆损坏问题&#xff0c;允许远程代码执行。通过EXP HTML部分的内存操作、垃圾回收等流程方式实施利用攻击。 CVE-2020-…

操作符详解(上)

目录 操作符的分类 二进制和进制转换 2进制转10进制 10进制转2进制数字 2进制转8进制 2进制转16进制 原码、反码、补码 移位操作符 左移操作符 右移操作符 位操作符&#xff1a;&、|、^、~ 单目操作符 逗号表达式 操作符的分类 • 算术操作符&#xff1a; …

【C++干货铺】 RAII实现智能指针

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 为什么需要智能指针&#xff1f; 内存泄漏 什么是内存泄漏&#xff0c;内存泄露的危害 内存泄漏的分类 堆内存泄漏&#xff08;Heap leak&#xff09; 系统资…

CMG GPP 0.05°全球区域2000~2019年月数据分享

各位同学们好&#xff0c;今天分享的是CMG GPP 0.05全球区域2000~2019年月数据。您可以私信或评论。 一、数据简介 准确估算陆地植被的初级生产总值&#xff08;GPP&#xff09;对于了解全球碳循环和预测未来气候变化至关重要。目前有多种基于不同方法的 GPP 产品&#xff0c…

ORM-08-EclipseLink 入门介绍

拓展阅读 The jdbc pool for java.(java 手写 jdbc 数据库连接池实现) The simple mybatis.&#xff08;手写简易版 mybatis&#xff09; 1. EclipseLink概述 本章介绍了EclipseLink及其关键特性&#xff1a;包括在EclipseLink中的组件、元数据、应用程序架构、映射和API。 本…

Leetcode—29. 两数相除【中等】

2023每日刷题&#xff08;九十四&#xff09; Leetcode—29. 两数相除 叛逆期实现代码 class Solution { public:int divide(int dividend, int divisor) {if(dividend INT_MIN && divisor -1) {return INT_MAX;} return dividend / divisor;} };运行结果 倍增算法…