Vue组件化开发（原有项目的改造）

将组件定义成一个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
}

效果图如下：

原文地址：https://www.cnblogs.com/TheoryDance/p/11428540.html