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. Stream之高级函数

    上回文说到了有关Stream一些数学函数的用法.今天来说下Stream一些高级的函数用法,这些函数在日常工作中也是必不可少的,测试数据还是引用上一篇的数据. Map 这个方法我个人称之为转换函数,把一 ...

  2. MySQL8.0允许外部访问

    MySQL8.0允许外部访问     版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/h99 ...

  3. Java String的探讨

    关于String相关内容的学习,历来都是Java学习必不可少的一个经历. 以前一直想要好好总结一下String的相关的知识点,苦于没有时间,终于在今天有一个闲暇的时间来好好总结一下,也希望这文章能够加 ...

  4. 题解 P6454 麻将 加强版

    题目传送门 题目大意 不想写了,直接看题面吧. 思路 被这个题搞自闭了,因为读错题目想一个非常恶心的东西想了一场考试,然后就删代码,然后就被骂了.哎. 需要注意的是:我们只能选一次雀头 于是,不难看出 ...

  5. 题解 GRE Words Revenge

    题目传送门 题目大意 给出 \(m\) 次操作,分别为以下两种操作: 学习一个单词 给出一个段落,查询里面有多少个学过的单词.注意,如果学习过 \(\text{ab,bc}\) ,当前查询段落为 \( ...

  6. 更好的 java 重试框架 sisyphus 入门简介

    What is Sisyphus sisyphus 综合了 spring-retry 和 gauva-retrying 的优势,使用起来也非常灵活. 为什么选择这个名字 我觉得重试做的事情和西西弗斯很 ...

  7. javascript-jquery-文档处理

    一.移动元素 1.append():向每个匹配元素的内部追加内容.例如:$("选择器1").qppend("选择器2"):将会匹配选择器2的元素,移动到匹配选择 ...

  8. WPF实现雷达图(仿英雄联盟)

    WPF开发者QQ群: 340500857  | 微信群 -> 进入公众号主页 加入组织 前言 有小伙伴提出需要实现雷达图. 由于在WPF中没有现成的雷达图控件,所以我们自己实现一个. PS:有更 ...

  9. 前端大牛带你了解JavaScript 函数式编程

    前言 函数式编程在前端已经成为了一个非常热门的话题.在最近几年里,我们看到非常多的应用程序代码库里大量使用着函数式编程思想. 本文将略去那些晦涩难懂的概念介绍,重点展示在 JavaScript 中到底 ...

  10. 看动画学算法之:双向队列dequeue

    目录 简介 双向队列的实现 双向队列的数组实现 双向队列的动态数组实现 双向队列的链表实现 双向链表的时间复杂度 简介 dequeue指的是双向队列,可以分别从队列的头部插入和获取数据,也可以从队列的 ...