iT邦幫忙

0

第一次用VUE， 如何將html改成Javascript

vue.js
yonghaow88 2023-11-13 15:28:39 ‧ 2135 瀏覽

  • 分享至 

  • xImage

完全沒用過javascript，不知道要如何開始

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="styles.css">
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
        /*position: relative;*/
    }

    header {
        background-color: white;
        height: 140px;
        position: relative;
    }

    header .dropbtn {
        font-size: 18px;
    }

    .sticky-header {
        padding: 10px;
        text-align: center;
        position: fixed;
        width: 85%;
        top: 0;
        z-index: 1;
        /* 确保标题在内容之上 */
    }

    .scrolling-content {
        padding: 20px;
        margin-top: 50px;
        /* 为内容留出标题的空间 */
        overflow-y: scroll;
        /* 让内容区域可以滚动 */
        height: calc(100vh - 50px);
        /* 设置内容区域高度，确保内容在标题下面 */
    }

    header img {
        border: white;
        width: 100px;
        height: 100px;
    }

    header .dropdown {
        /*background-color: rgb(242, 255 ,0);*/
        right: -245px;
        bottom: -80px;
    }

    /*header nav a{
            background-color: darkblue;
            color: #fff;
            font-size: 18px;
            letter-spacing: 1px;
            padding: 10px 20px;
            display: block;
            float: left;
            text-decoration: none;
            border-radius: 8px 8px 0 0;
            border: 1px solid red;
            margin: 0 3px;
            margin-top: 20px; 
        }*/

    header .dropdown-content a {
        background-color: white;
        color: black;
        font-size: 12px;
        letter-spacing: 2px;
        padding: 10px 12px;
        border-radius: 8px 8px 0 0;
        margin-left: 5px;
        transition: .2s;
    }

    header .dropdown-content a:hover {
        padding-bottom: 30px;
    }

    body>nav {
        background-color: white;
        color: #fff;
        height: 60px;
        position: sticky;
        top: 0;
    }

    main {
        background-color: white;
        overflow: hidden;
        display: flex;
        justify-content: center;
        margin-top: 400px;
    }

    aside {
        display: flex;
        justify-content: space-between;
    }

    aside a {
        text-align: right;
    }

    main aside {
        background-color: white;
        float: right;
        width: 20%;
        padding: 10px;
    }

    main video {
        width: 80%;
        display: block;
        margin: 0 auto;
    }

    .content {
        background-color: white;
        width: 80%;
        padding: 20px;
        margin: 4%;
    }

    .content img {
        display: block;
        margin-bottom: 20px;
    }

    .content h1 {
        font-size: 2em;
        margin: 0 0 20px;
        margin-top: 20px;
    }

    .content figure {
        letter-spacing: 1px;
        line-height: 1.5;
        text-align: justify;
        margin-top: 3px;
    }

    .gomore {
        background-color: white;
        color: black;
        padding: 8px;
        border: none;
        font-size: 18px;
        letter-spacing: 2px;
        padding: 10px 12px;
        border-radius: 8px 8px 0 0;
    }

    footer {
        background-color: darkblue;
        color:#fff;
        text-align: center;
        padding: 1em;
    }

    .footer-content{
        margin-left: 20px;
    }

    img {
        width: 25%;
        height: 300px;
        margin-top: auto;
        margin-bottom: auto;
        float: left;
    }

    /* 按鈕樣式 */
    .dropbtn {
        background-color: white;
        color: black;
        padding: 10px 10px;
        border: none;
    }

    .dropbtn img {
        width: 15px;
        height: 15px;
        float: right;
        margin-top: auto;
        margin-bottom: auto;
    }

    /* 下拉菜單容器 */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* 下拉菜單內容（隱藏起來） */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    /* 下拉菜單內容中的選項 */
    .dropdown-content a {
        padding: 12px 16px;
        text-align: left;
        text-decoration: none;
        display: block;
    }

    /* 滑鼠懸停時，顯示下拉菜單內容 */
    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>

        <!-- 左右方向鍵 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#sec1Slider" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#sec1Slider" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>

        <!-- 換頁控制器 -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#sec1Slider" data-bs-slide-to="0" class="active"
                aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#sec1Slider" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#sec1Slider" data-bs-slide-to="2" aria-label="Slide 3"></button>
            <button type="button" data-bs-target="#sec1Slider" data-bs-slide-to="3" aria-label="Slide 3"></button>
        </div>
    </div>
</section>

<header class="sticky-header">
    <div class="header">
        <img src="./images/02.png" alt="./images/02.png">
    </div>
    <div class="dropdown">
        <button class="dropbtn">
            <a class="gomore" href="https://www.itsesg.com/" target="_blank">首頁</a>
        </button>
    </div>
    <div class="dropdown">
        <button class="dropbtn">
            產品介紹
        </button>
        <div class="dropdown-content">
            <a href="test003.html">BAS建築自動化系統</a>
            <a href="test004.html">雲管家物管系統</a>
            <a href="text005.html">AI智能影像辨識系統</a>
            <a href="text006.html">智慧綠建築顧問</a>
            <a href="text007.html">健康建築顧問</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">
            專案
        </button>
        <div class="dropdown-content">
            <a href="text008.html">成功案例</a>
            <a href="text008.html">團隊證照</a>
            <a href="text008.html">專業顧問群</a>
        </div>
    </div>
    <div class="dropdown">
        <button class="dropbtn">
            聯絡我們
        </button>
        <div class="dropdown-content">
            <a class="gomore" href="test002.html" target="_blank">聯絡我們</a>
        </div>
    </div>

</header>

<main class="scrol-+ling-content">
    <div class="content">
        <hr class="my-4">
        <div class="row">
            <div class="col-lg-4 col-sm-6 mb-3">
                <div class="card">
                    <img class="card-img-top" src="images/01.jpg" alt="./images/01.jpg">
                    <div class="card-body">
                        <h5 class="card-title text_limit2">BAS建築自動化系統</h5>
                        <a href="test003.html" class="btn btn-primary">More...</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 mb-3">
                <div class="card">
                    <img class="card-img-top" src="images/07.jpg" alt="./images/07.jpg">
                    <div class="card-body">
                        <h5 class="card-title text_limit2">雲管家物管系統</h5>
                        <a href="test004.html" class="btn btn-primary">More...</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 mb-3">
                <div class="card">
                    <img class="card-img-top" src="images/08.jpg" alt="./images/08.jpg">
                    <div class="card-body">
                        <h5 class="card-title text_limit2">AI智能影像辨識系統</h5>
                        <a href="text005.html" class="btn btn-primary">More...</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 mb-3">
                <div class="card">
                    <img class="card-img-top" src="images/09.jpg" alt="./images/09.jpg">
                    <div class="card-body">
                        <h5 class="card-title text_limit2">智慧綠建築顧問</h5>
                        <a href="text006.html" class="btn btn-primary">More...</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-sm-6 mb-3">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title text_limit2">健康建築顧問</h5>
                        <a href="text007.html" class="btn btn-primary">More...</a>
                    </div>
                </div>
            </div>
        </div>

        <h1>ITsESG 官網影片</h1>
        <video id="test" controls width="640" height="360">
            <source src="001.mp4" type="video/mp4">
        </video>
</main>

<script src="script.js"></script>

<footer>
    <p>Copyright ©2023 ITsESG Corporation 版權所有</p>
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-10 col-lg-10">
                    <div class="footer-content">
                        <ul>
                            <li><a href="text009.html">About Us</a></li>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
看更多先前的討論...收起先前的討論...
greenriver iT邦研究生 4 級 ‧ 2023-11-13 16:31:39 檢舉
首先你要先將html改成
<body>
<div id='app'></div>
</body>
剩下的寫在JS裡
knvbhk iT邦新手 5 級 ‧ 2023-11-13 16:40:16 檢舉
那麼你應該去學一下javascript syntax, 另外你應該將你網頁分拆成不同的部件,然後逐個部件撰寫程式
knvbhk iT邦新手 5 級 ‧ 2023-11-13 16:45:05 檢舉
還有如果用VUE, 應該不需要用jquery 了
F iT邦新手 2 級 ‧ 2023-11-13 17:40:34 檢舉
完全沒有js和vue基礎會有點難度喔...
淺水員 iT邦大師 6 級 ‧ 2023-11-13 18:10:50 檢舉
其實我有點懷疑在偷渡廣告
不然都用過 jquery 了會不知道怎麼引入 javascript？
yonghaow88 iT邦新手 4 級 ‧ 2023-11-14 18:36:57 檢舉
我也只不過是在外面上了html+css的課程，不到30天而已，完全沒碰到javacrpt，實習的公司要幫忙寫網頁，我也只會寫html+css，因為要刻框架，不會用，只好從React改成Vue，可我還是不回用。
rian1995 iT邦新手 5 級 ‧ 2023-11-15 11:01:41 檢舉
ChatGPT可以輔助你轉換嗎?
yonghaow88 iT邦新手 4 級 ‧ 2023-11-15 13:15:49 檢舉
chatGPT幫我轉成Vue
1.Create a Vue instance:
Create a new Vue instance and specify the root element where your application will be mounted. In this example, I'm using the #app element:
<body>
<div id="app">
<!-- Your existing HTML code goes here -->
</div>

<!-- Include Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!-- Your other scripts go here -->
</body>

2.Vue Component for Header:
Create a Vue component for the header. This will include the navigation links.
<!-- Add this within the <script> tag after including Vue.js -->
Vue.component('app-header', {
template: `
<header class="sticky-header">
<!-- Your header content goes here -->
</header>
`,
});

3.Vue Component for Main Content:
Create a Vue component for the main content section.
<!-- Add this within the <script> tag after including Vue.js -->
Vue.component('app-main', {
template: `
<main class="scrolling-content">
<!-- Your main content goes here -->
</main>
`,
});

4.Vue Component for Footer:
Create a Vue component for the footer.
<!-- Add this within the <script> tag after including Vue.js -->
Vue.component('app-footer', {
template: `
<footer>
<!-- Your footer content goes here -->
</footer>
`,
});

5.Vue Instance and Mounting:
Finally, create a Vue instance and mount it to the root element.
<!-- Add this within the <script> tag after including Vue.js -->
new Vue({
el: '#app',
});
Now, you can use these components within your HTML. Replace the existing HTML code inside the #app element with the following:
<div id="app">
<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>
</div>

This is a basic structure, and you may need to adapt it based on your specific requirements and interactions within the application. Additionally, you might want to explore using Vue Router for handling navigation between different pages in a single-page application.
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

5
Ray
iT邦大神 1 級 ‧ 2023-11-14 07:42:48
最佳解答

學任何語言, 一定都先從 Hello World 開始:
https://v1.vuejs.org/guide/

下一個挑戰通常是九九乘法表:
用 Vue 寫出九九乘法表

至少有個工具書在手上:
Vue 入門

或許也要去了解一下, 它的前世今生:
重新認識 Vue.js

以上都熟練了之後, 才來開始寫你自己的專案....

登入發表回應
1
呆呆小將
iT邦新手 2 級 ‧ 2023-11-14 11:47:52

看起來臨時要套框架應該不是你自己決定的，那就從最基本的開始說起吧
在 Vue 裡面第一步是會把你所指定的內容轉換成 Vurtual DOM 來執行，因此你需要的是將 html 的元件內容包覆進去，若是用 CDN 導入的建議去看一下 #app 跟 el/mount() 的關係

那至於使用 jQuery 與 bootstrap 的專案臨時要轉到 Vue 會因為生命週期的問題改一點寫法，這可能要跟你們家大頭詢問必要性了，若是個人學習建議先搞懂 Vue 在做什麼以及什麼時候需要用它再開始吧

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙