将组件定义成一个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. 【Redis】利用 Redis 实现分布式锁

    技术背景 首先我们需要先来了解下什么是分布式锁,以及为什么需要分布式锁. 对于这个问题,我们可以简单将锁分为两种--内存级锁以及分布式锁,内存级锁即我们在 Java 中的 synchronized 关 ...

  2. Mysql_笔记2018.1.29

    1.主要数据库 Oracle MySQL Sqlsever 微软 MongoDB (非关系型数据库) 2.MySql 专业词语 1.数据库:一些关联表的集合 2.数据表:表示数据的矩阵 3.列:同ex ...

  3. 贼厉害,手撸的 SpringBoot 缓存系统,性能杠杠的!

    一.通用缓存接口 二.本地缓存 三.分布式缓存 四.缓存"及时"过期问题 五.二级缓存 缓存是最直接有效提升系统性能的手段之一.个人认为用好用对缓存是优秀程序员的必备基本素质. 本 ...

  4. Linux标准输入、标准输出、错误输出

    Linux中的输入文件.输出文件.错误输出 文件名称 文件描述符 标准输入 0 (默认是键盘) 标准输出 1 (默认是屏幕) 标准错误 2 (默认是屏幕) 输出重定向 Linux中&表示后台运 ...

  5. Camtasia中对录制视频进行编辑——音效

    市场上有很多的视频处理软件,形形色色的软件往往会使人眼花缭乱,而对于那些短视频的制作者来说,拥有一款好的视频处理软件会让自己的视频收获更多的点赞.那么今天我便给大家推荐一款同时具有录屏和编辑视频功能的 ...

  6. 使用Camtasia制作我的观影报告

    最近抖音兴起做<我的观影报告>风潮.<我的观影报告>是通过剪辑影片+旁白的方法,将自己观看过的影片安利给观众的方式.如果大家想要制作这类型的观影报告,建议使用Camtasia( ...

  7. 如何在Visio 中插入各种数学公式?

    在Visio 2007老版本中,插入公式可以直接在插入图片中选择,但是在后来的Visio2013中却无法直接通过插入图片的方法插入,那么该如何在visio 2013中插入公式呢? 具体的操作步骤如下: ...

  8. bash反弹shell检测

    1.进程 file descriptor 异常检测 检测 file descriptor 是否指向一个socket 以重定向+/dev/tcp Bash反弹Shell攻击方式为例,这类反弹shell的 ...

  9. 理解go语言的shellcode加载器

    序言 本文假设你知道unsafe包常见函数的用法,若否,请查看 https://books.studygolang.com/gopl-zh/ch13/ch13-01.html  第13章. 例子和代码 ...

  10. thinkphp3.2 添加自定义类似__ROOT__的变量

    1 thinkphp3.2 添加自定义类似__ROOT__的变量 2 3 在config.php文件中 4 return array( 5 '' => '', 6 'TMPL_PARSE_STR ...