vue如何写组件(script标签引入的方式)
很多人知道.vue结构的单文件组件形式,不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了,那如果我们又想用vue来写模板,又不想引入vue-cli管理,那该怎么来写组件呢?别着急往下看!
1.首先在正常使用cdn引入jquery的项目中,也用script标签引入Vue.js文件。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
2.为了方便测试我们在页面中写个按钮,这个按钮的作用就是要展示jquery和vue同时正确使用并不互相冲突。
<input id="btn" type="button" value="jquery操作">
3.下面进入正题,我们来定义我们的vue组件。
Vue.component("card",{
props:{//这里是组件可以接受的参数,也就是相当于面向原型写组件时的配置参数,用户可以传递不同参数,自己定义组件
cardTitle:{//卡片标题
type:String,
default:'这是一个卡片'
},
list:{//列表内容
type:Array,
default:[]
}
},
template:`
<div class="modal">
<div class="modal-header">
<h4>{{cardTitle}}</h4>
</div>
<div class="modal-content">
<div>
<slot name="modal-content">可以扩展的卡片内容</slot>
<ul>
<li v-for="(item,index) in list">{{item}}</li>
</ul>
</div>
</div>
<div class="modal-footer">
<slot name="modal-footer">
<input class="btn blue" type="button" value="ok" @click="okHandle" />
<input class="btn" type="button" value="cancel" @click="cancelHandle" />
</slot> </div>
</div>
`,
methods:{//这里定义的组件的方法,利用$emit()进行父子组件通信,子组件通过点击事件告诉父组件触发一个自定义事件,$emit()方法第二个参数也可以用来传递数据
okHandle(){
this.$emit("ok");
},
cancelHandle(){
this.$emit('cancel')
}
}
});
ps:代码中有slot的地方是分发内容的定制模板,slot为modal-content 定制提醒信息模板,slot为modal-footer 定制底部模板。你可以在父页面进行卡片样式的更改和功能的增减。定义好的这个组件在父页面中也要以script标签的形式引入进来,当然你也可以直接定义在父页面中,这个按照你自己的需求和逻辑来写。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="./modal.js"></script>
4.父页面调用这个组件,最外层必须是vue的实例id为app的div元素包裹才行。
<div id="app">
<div>
<card :list="list" @ok="okMethods" @cancel="cancelMethods"></card>
</div>
</div>
ps:使用jquery点击按钮触发一个dom操作的事件与vue实例对象中的组件之间并没有任何冲突,不过这里要注意的是,jquery的代码尽量不要写在vue实例的方法methods中,防止出现Bug,另外在htm的书写过程中,所有关于jquey的dom操作都最好也应该写在id为app的vue实例区域的外面,这样才能避免其他bug。
<script>
$('#btn').on('click',function(){
console.log('jquery操作');
})
new Vue({
el:'#app',
data:{
list:[1,2,3,4]
},
methods:{
okMethods:function (){
console.log("ok")
},
cancelMethods:function (){
console.log("cancel")
}
}
});
</script>
有问题欢迎留言,如果你觉得这个文章对你有帮助,就请点个赞吧!
vue如何写组件(script标签引入的方式)的更多相关文章
- script标签引入vue方式开发如何写组件
title: script标签引入vue方式开发如何写组件 date: 2020-05-08 sidebarDepth: 2 tags: vue 组件 script 标签 categories: vu ...
- script标签引入脚本的引入位置与效果
用script标签引入脚本的引入位置大致有两种情况: 1,在head中引入: 2,在body末尾引入: 浏览器由上到下解析代码,正常情况下,先解析head中的代码,在解析body中的代码:放在head ...
- 彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题
彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题 2018年12月08日 21:58:26 Kevin395 阅读数 1753 背景不多介绍了,直接上代码. ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue.js学习笔记-script标签在head和body的区别
初学JavaScript,项目需要没有系统学习,只能边查资料边码代码,埋下的坑不知道有多少,还是建议时间充足的情况下系统的将Javascript学习一遍 ,涉及的HTML知识也务必了解. 问题 最开始 ...
- Vue自己写组件——Demo详细步骤
公司近期发力,同时开了四五个大项目,并且都是用Vue来做的,我很荣幸的被分到了写项目公用模块的组,所以需要将公用的部分提取成组件的形式,供几个项目共同使用,下面详细讲一下写Vue组件的具体步骤. 一. ...
- vue 自己写组件。
最近在网上看到很多大神都有写博客的习惯,坚持写博客不但可以为自己的平时的学习做好记录积累 无意之中也学还能帮助到一些其他的朋友所以今天我也注册一个账号记录一下学习的点滴!当然本人能力实在有限写出的文章 ...
- vue 手写组件 集合
Num.1 : 链接 向右滑动, 显示删除按钮, 根据touchStart touchEnd 的 clientX 差距 > 30; 说明是向左滑动, 显示; 改变 e.currentTarg ...
- Vue.js之组件嵌套
Vue.js中组件嵌套有两种方式 第一种:注册全局组件 例如在components文件夹下新建一个User.vue组件,然后在main.js文件中注册全局组件 //注册全局组件 Vue.compone ...
随机推荐
- Redis之品鉴之旅(四)
发布订阅,简单场景下的发布订阅完全可以使用. 可以简单的理解,将一个公众号视为发布者,关注公众号的人视作订阅者,公众号发布一条文章或者消息,凡事订阅公众号的都可以收到消息.一个人可以订阅多个公众号,一 ...
- Cookbook:pandas的学习之路——10 Minutes to pandas
按照pandas官网上10 Minutes to pandas的快速练习: 一 .对象创建: 导入练习所需要的工具包: 通过列表中的值创建序列Series,pandas在创建序列的同时会默认为列表中值 ...
- Django整理(五) - 请求与响应 - request对象
请求对象 一.客户端传参的几种方式 1. 通过URL路径(path)传递,例如:http://127.0.0.1:8000/news/1/2,两个参数:id和page 2. 通过 query stri ...
- 2020.1.30--vj补题
C - C CodeForces - 991C 题目内容: After passing a test, Vasya got himself a box of n candies. He decided ...
- Java多线程编程实战指南 核心篇 读书笔记
锁 volatile CAS final static 原子性保障 具备 具备 具备 不涉及 不涉及 可见性保障 具备 具备 不具备 不具备 具备① 有序性保证 具备 具备 不涉及 具备 具备② 上下 ...
- [源码解析]PyTorch如何实现前向传播(2) --- 基础类(下)
[源码解析]PyTorch如何实现前向传播(2) --- 基础类(下) 目录 [源码解析]PyTorch如何实现前向传播(2) --- 基础类(下) 0x00 摘要 0x01 前文回顾 0x02 Te ...
- TCC分布式事务的实现原理
目录 一.写在前面 二.业务场景介绍 三.进一步思考 四.落地实现TCC分布式事务 (1)TCC实现阶段一:Try (2)TCC实现阶段二:Confirm (3)TCC实现阶段三:Cancel 五.总 ...
- FastAPI 学习之路(三十八)Static Files
如果使用前后台不分离的开发方式,那么模板文件中使用的静态文件,比如css/js等文件的目录需要在后台进行配置,以便模板渲染是能正确读到这些静态文件.那么我们应该如何处理呢. 首先安装依赖 pip in ...
- 【UE4 C++】关卡切换、流关卡加载卸载
切换关卡 基于 UGameplayStatics:: OenLevel UGameplayStatics::OpenLevel(GetWorld(), TEXT("NewMap") ...
- vue3.x移动端页面基于vue-router的路由切换动画
移动端页面切换一般都具有动画,我们既然要做混合开发,做完之后还是不能看起来就像一个网页,所以我们基于vue-router扩展了一个页面切换push和pop的动画.这是一篇比较硬核的帖子,作者花了不少精 ...