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

谁践踏了优雅 2023-06-04 11:59 119阅读 0赞

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

效果图如下：

![797349-20190829110339059-584947684.png][]

转载于:https://www.cnblogs.com/TheoryDance/p/11428540.html

[797349-20190829110339059-584947684.png]: /images/20230601/824bafc31f5541d294145c42b4b3956f.png