将组件定义成一个js和css，然后供其他页面进行调用

demo.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<link type="text/css" rel="stylesheet" href="./module1.css">

</head>

<body>

    <!-- 引入的组件，每个组件拥有一个自己的样式文件和一个js文件  -->

    <div id="demoContainer">

        <module1 :select-index="selectedIndex[0]"></module1>

        <br/>

        <module1 :select-index="selectedIndex[1]"></module1>

        <br/>

        <module1 :select-index="selectedIndex[2]"></module1>

    </div>

</body>

<script type="text/javascript" src="./module1.js"></script>

<script type="text/javascript">

var vvv = new Vue({

    el: '#demoContainer',

    data: {

        selectedIndex: [1,2,0]

    },

    components: {

        Module1

    }

})

</script>

</html>

module1.css

.module1 .item-select{background-color: green;color: red;}

module1.js

var module1Content = `

        <div class="module1">

            <ul>

                <li v-for="(language, index) in languageList" :key="language" :class="selectBg(index)">{{ language }}</li>

            </ul>

        </div>

`

var Module1 = {

    data: function(){

        return {

            languageList: ['Java','JavaScript','C++','Python','Php']

        }

    },

    props: {

        selectIndex: Number

    },

    methods:{

        selectBg: function(num){

            if(this.selectIndex == num){

                return 'item-select'

            }

        }

    },

    template: module1Content

}

效果图如下：

Vue组件化开发（原有项目的改造）的更多相关文章

  1. 二、vue组件化开发（轻松入门vue）

    轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...

  2. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  3. Vue组件化开发

    Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...

  4. Vue 组件化开发

    组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...

  5. day69:Vue:组件化开发&Vue-Router&Vue-client

    目录 组件化开发 1.什么是组件? 2.局部组件 3.全局组件 4.父组件向子组件传值 5.子组件往父组件传值 6.平行组件传值 Vue-Router的使用 Vue自动化工具:Vue-Client 组 ...

  6. Vue 组件化开发之插槽

    插槽的作用 相信看过前一篇组件化开发后,你对组件化开发有了新的认识. 插槽是干什么的呢?它其实是配合组件一起使用的,让一个组件能够更加的灵活多变,如下图所示,你可以将组件当作一块电脑主板,将插槽当作主 ...

  7. 06Vue.js快速入门-Vue组件化开发

    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...

  8. webpack（8）vue组件化开发的演变过程

    前言 真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发,所以项目中只会有一个inde ...

  9. Vue 组件化开发的思想体现

    现实中的组件化思想化思想体现 标准(同一的标准) 分治(多人同时开发) 重用(重复利用) 组合(可以组合使用) 编程中的组件化思想 组件化规范:Web Components 我们希望尽可能多的重用代码 ...

随机推荐

  1. 剑指offer刷题（栈、堆、 队列、 图）

    Stack & Queue 005-用两个栈实现队列 题目描述 用两个栈实现一个队列.队列的声明如下,请实现它的两个函数 push 和 pop ,分别完成在队列尾部插入整数和在队列头部删除整数 ...

  2. TCP/IP模型简介和/etc/hosts文件说明

    软件=协议的实现. IP决定了主机的位置.端口号决定了进程的位置. 两台主机上的通讯实际是两台主机上两个具体进程的通讯. TCP/IP模型分四层: TCP/IP模型:应用层---传输层----网络层- ...

  3. ceph客户端服务端属性匹配关系

    ceph的server是定期会发布版本,而它的客户端是放到linux 内核当中的,一些属性的支持是依赖于内核版本的,这样就存在一些问题,一些功能后端支持,而客户端旧了:还有可能是客户端用的很新的内核, ...

  4. xpth定位元素

  5. if __name__ == "__main__"的疑惑

    Python中if __name__ == "__main__"详细解释: 想必很多初次接触python都会见到这样一个语句,if __name__ == "__main ...

  6. Nginx实例

    一.反向代理 反向代理实例一 1.实现效果 打开浏览器,在浏览器地址栏输入地址www.pluto.com,跳转到 liunx 系统 tomcat 主页面中 2.准备工作 [1].安装tomcat [r ...

  7. spring boot和spring cloud的区别

    Java中说到微服务肯定离不开Spring Boot和Spring Cloud,这两者到底有什么关系,什么是微服务,如果单纯的说SpringBoot,SpringCloud,都是不准确的,那应该怎么回 ...

  8. 02python开发之基本运算符

    02 python开发之基本运算符 目录 02 python开发之基本运算符 2 基本运算符 2.1 算数运算符 2.1.1 种类 2.1.2 用法 2.2 比较运算符 2.2.1 种类 2.2.2 ...

  9. Mac如何像Windows一样在文件系统中查看文件?

    许多Windows系统用户刚转向Mac的时候,肯定非常不适应Mac系统独特的文件系统,就像安卓转iOS系统一样,那么Mac电脑如何像Windows系统一样,能够查看电脑上的各个盘,如C盘D盘等等,然后 ...

  10. guitar pro 系列教程（十八）：Guitar Pro怎么设置吉他谱的局部速度？

    关于Guitar Pro的使用功能我们在前面的文章也有讲了不少,对于新手的小伙伴,就小编个人而言,在吉他编曲,演绎方面遇到的困难不是一点两点,我们只有通过学习了解他的全部,才能在以后的吉他创作中得心印 ...