測試src的方式開發vue專案

叱吒少帥（少帥）發表於2020-10-23
Vue

 

index.html 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試引入的方式開發專案</title>
    <script src="http://js.yeyese.top/vue/vue.js"></script>
    <!-- 引入樣式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入元件庫 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>

<div id="app">
    {{ msg }}
    <el-row>
        <el-button type="primary">主要按鈕</el-button>
    </el-row>
</div>

<div id="xx">
        <!-- {{ info }} -->
        <ul>
            <li v-for="item in info">
                {{ item }}
            </li>
        </ul>
</div>


<script>
    new Vue({
        el: '#app',
        data: {
            msg: "hello"
        }
    });

    new Vue({
        el: "#xx",
        data: {
          info : "hi"
            
        },
        mounted (){
            axios
              .get('1.json')
              .then(res => (this.info = res.data.sites) )
            
        }
    });

</script>

</body>
</html>

1.json 如下：

{
    "name": "網站",
    "num": 3,
    "sites": [
    {
    "name": "Google",
    "info": [
    "Android",
    "Google 搜尋",
    "Google 翻譯"
    ]
    },
    {
    "name": "Taobao",
    "info": [
    "淘寶",
    "網購"
    ]
    },
    {
    "name": "Meituan",
    "info": [
    "美食",
    "團購"
    ]
    }
    ]
    }

 

相關文章