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. P4480-[BJWC2018]餐巾计划问题【三分,贪心】

    正题 题目链接:https://www.luogu.com.cn/problem/P4480 题目大意 \(n\)天,第\(i\)天需要\(a_i\)个餐巾. 每个餐巾价格为\(p\),使用完后有两种 ...

  2. Stream聚合函数

    Stream班介绍 幼稚园开学的第一天,各们家长把小朋友送到了园里,各位小朋友都你看看我,我看看你.有的嚎啕大哭,有的呆若木鸡....这里时候园长安排我拿来小本本记录入园的小朋友.... 记录小朋友 ...

  3. Batch Normalization和Layer Normalization

    Batch Normalization:对一个mini batch的样本,经过一个nueron(或filter)后生成的feature map中的所有point进行归一化.(纵向归一化) Layer ...

  4. nsq topic

    与Topic相关的代码主要位于nsqd/topic.go中. 上一篇文字我们讲解了下nsq的启动流程.对nsq的整体框架有了一个大概的了解.本篇文章就是由大到小.对于topic这一部分进行详尽的讲解. ...

  5. SQL 居然还能在 Apache ShardingSphere 上实现这些功能？

    在去年 10 月 5.0.0-alpha 版本发布之后,Apache ShardingSphere 经历了长达 8 个多月的持续开发与优化,终于在 6 月 25 日正式迎来了 5.0.0-beta 版 ...

  6. The type name or alias SqlServer could not be resolved.Please check your configuration

    The type name or alias SqlServer could not be resolved.Please check your configuration file.... 检查一下 ...

  7. 题解 ABC216H Random Robots

    link Solution 考虑一个不合法方案,它一定最后位置的逆序对数不为 \(0\),而且可以发现的是,存在对称方案使得最后逆序对数奇偶性不同,所以我们如果加上 \((-1)\)^{\sigma( ...

  8. 题解「雅礼集训 2017 Day7」事情的相似度

    题目传送门 Description 给出一个长度为 \(n\) 的 \(01\) 串为 \(s\),设 \(t_i\) 为 \(s_{1,2,..,i}\),有 \(m\) 次查询,每次查询给出 \( ...

  9. C# 提取PDF中的表格

    本文介绍在C#程序中(附VB.NET代码)提取PDF中的表格的方法,调用Spire.PDF for .NET提供的提取表格的类以及方法等来获取表格单元格中的文本内容:代码内容中涉及到的主要类及方法归纳 ...

  10. 【数据结构与算法Python版学习笔记】树——树的遍历 Tree Traversals

    遍历方式 前序遍历 在前序遍历中,先访问根节点,然后递归地前序遍历左子树,最后递归地前序遍历右子树. 中序遍历 在中序遍历中,先递归地中序遍历左子树,然后访问根节点,最后递归地中序遍历右子树. 后序遍 ...