title: script标签引入vue方式开发如何写组件

date: 2020-05-08

sidebarDepth: 2

tags:

  • vue
  • 组件
  • script
  • 标签

    categories:
  • vue

转载自：https://www.cnblogs.com/xingxingclassroom/p/9140115.html

很多人知道.vue结构的单文件组件形式，不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了，那如果我们又想用vue来写模板，又不想引入vue-cli管理，那该怎么来写组件呢？

很多人知道.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>

5.另一则案例

header.js

var headerTemplate = '<div> header HTML 代码</div>'

Vue.component('my-header', {

    template: headerTemplate,

    data: xxx,

    methods: {}

    // ...

})

通过 script标签引入 header.js, 然后在 header.html 内就可以使用了, 比如:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="vue.min.js"></script>

    <script src="header.js"></script>

</head>

<body>

    <div id="main">

        <my-header></my-header>

    </div>

    <script>

        new Vue({

            el: '#main'

        })

    </script>

</body>

</html>

script标签引入vue方式开发如何写组件的更多相关文章

  1. vue如何写组件（script标签引入的方式）

    很多人知道.vue结构的单文件组件形式,不过这种单文件组件的结构如果要加入到现有的jquery项目中就比较麻烦了,那如果我们又想用vue来写模板,又不想引入vue-cli管理,那该怎么来写组件呢?别着 ...

  2. 彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题

    彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题 2018年12月08日 21:58:26 Kevin395 阅读数 1753   背景不多介绍了,直接上代码. ...

  3. script标签引入脚本的引入位置与效果

    用script标签引入脚本的引入位置大致有两种情况: 1,在head中引入: 2,在body末尾引入: 浏览器由上到下解析代码,正常情况下,先解析head中的代码,在解析body中的代码:放在head ...

  4. vue渐进式开发的理解和指令

    1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...

  5. Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发

    ===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...

  6. 直接引入vue.js和使用vue脚手架的区别？

    脚手架工具搭建的项目是把Vue作为一个模块(如CommonJS规范的模块)对待,在源码中引入vue模块,最终需要用构建工具(如webpack)载入模块,编写代码需要require('vue'). 而直 ...

  7. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

  8. 关于import引入的方式

    引入第三方插件 import vue from 'vue' 按需求引入 import { myaxios } from './util'; 下面是写法,需要export导出 export functi ...

  9. kendo-ui的使用和开发自己的组件

    摘要: 前面介绍了一款非常不错的前端框架kendo-ui,如果你想阅读,请点这里.通过使用它一段时间,感觉是非常好用.下面就介绍一下如何使用它和开发自己的组件 引入: 只需要引进下面三个文件即可 ke ...

随机推荐

  1. 好久没发文了，一篇Vue3的Composition API使用奉上

    Composition API Composition API是Vue3中推荐的组件代码书写方式,相较于传统的Options API来说,它能让业务逻辑处理和后期代码维护变的更加简单. 首先我们来看O ...

  2. 前端快闪四： 拦截axios请求和响应

    马甲哥继续在同程艺龙写一点大前端: 今天我们来了解一下 如何拦截axios请求/响应? axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js, promise 类似于C ...

  3. keystore password was incorrect

    一.问题由来 最近在部署后台系统项目的时候,希望给项目增加一些安全措施,在项目中添加了SSL证书,可是在自己添加完该证书后,测试启动项目立马报错. 报错信息如下: org.springframewor ...

  4. 2020.11.14-pta天梯练习赛补题

    7-7 矩阵A乘以B 给定两个矩阵A和B,要求你计算它们的乘积矩阵AB.需要注意的是,只有规模匹配的矩阵才可以相乘.即若A有R​a​​行.C​a​​列,B有R​b​​行.C​b​​列,则只有C​a​​ ...

  5. Redis大集群扩容性能优化实践

    一.背景 在现网环境,一些使用Redis集群的业务随着业务量的上涨,往往需要进行节点扩容操作. 之前有了解到运维同学对一些节点数比较大的Redis集群进行扩容操作后,业务侧反映集群性能下降,具体表现在 ...

  6. 使用vue-cli+webpack搭建vue开发环境

    在这里我真的很开心,好久没有用过博客,今天突然看到了我的博客有不少人看过,虽然没有留下脚印,但是还是激起了我重新拿起博客的信心,感谢大家. 在这里我们需要首先下载node,因为我们要用到npm包下载, ...

  7. JVM：内存溢出OOM

    JVM:内存溢出OOM 本笔记是根据bilibili上 尚硅谷 的课程 Java大厂面试题第二季 而做的笔记 经典错误 JVM 中常见的两个 OOM 错误 StackoverflowError:栈溢出 ...

  8. JVM：类加载与字节码技术-1

    JVM:类加载与字节码技术-1 说明:这是看了 bilibili 上 黑马程序员 的课程 JVM完整教程 后做的笔记 内容 类文件结构 字节码指令 下面的内容在后续笔记中: 编译期处理 类加载阶段 类 ...

  9. OO面向对象第三次作业总结

    面向对象第三次作业总结 一.JML基础梳理及工具链 注释结构 行注释://@annotation 块注释:/*@ annotation @*/ 两种注释都是放在被注释部分上面. 常见表达式 原子表达式 ...

  10. rabbitmq死信队列和延时队列的使用

    死信队列&死信交换器:DLX 全称(Dead-Letter-Exchange),称之为死信交换器,当消息变成一个死信之后,如果这个消息所在的队列存在x-dead-letter-exchange ...