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. 关于Windows操作系统重定向

    在用C++做一个文件遍历的时候发现,当我遍历C:\Windows\system32文件夹时,获取到的文件数目和实际总是对不上.在通过他人帮助后了解到了重定向这个概念,我百度了一下,下面为粘贴内容. S ...

  2. GKCTF 2021 Reverse Writeup

    前言 GKCTF 2021所以题目均以开源,下面所说的一切思路可以自行通过源码对比IDA进行验证. Github项目地址:https://github.com/w4nd3r-0/GKCTF2021 出 ...

  3. 如何发现 Kubernetes 中服务和工作负载的异常

    大家好,我是来自阿里云的李煌东,今天由我为大家分享 Kubernetes 监控公开课的第二节内容:如何发现 Kubernetes 中服务和工作负载的异常. 本次分享由三个部分组成: 一.Kuberne ...

  4. 基于Hexo+Github Pages搭建的博客

    概念 Github Pages可以被认为是用户编写的.托管在github上的静态网页.使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.此外还可以绑定自己 ...

  5. CVE-2017-11882 漏洞分析总结 新手漏洞分析详细教程

    CVE-2017-11882分析总结 注: 这篇随笔记录了CVE-2017-11882漏洞分析的整个过程,并介绍了相关调试软件的使用 漏洞信息 CVE-2017-11882属于缓冲区溢出类型漏洞,产生 ...

  6. Java（40）网络编程

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201659.html 博客主页:https://www.cnblogs.com/testero ...

  7. JavaScript 数组 常用方法(二)

    写在前面:续接上篇 JavaScript 数组 常用方法 数组常用方法第二弹来了: some && every 描述: every()与some()方法都是JS中数组的迭代方法. so ...

  8. Visual Studio 安装 C++

    Visual Studio 安装 C++

  9. django 1.11.16之环境搭建

    django版本:django1.11.16  windows环境 python 3.6.3    !!!可先安装虚拟环境在进行环境搭建  1.安装django:pip install django= ...

  10. 类图示例-订单系统 / Class Diagram - Order System

    类图示例-订单系统 / Class Diagram - Order System 什么是类图? 类图通过显示它的类和它们之间的关系来概述系统.类图是静态的 - 它们显示交互的内容,但不显示交互时会发生 ...