012 Creating and Connecting Vue App Instances

黄健华Yeah

于 2024-08-15 20:05:38 发布

阅读量210

点赞数 3

分类专栏： 03 Vue3 - Udemy Top 1 文章标签： Vue3

本文链接：https://blog.csdn.net/KevinHuang2088/article/details/141230669

版权

03 Vue3 - Udemy Top 1 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Basics</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>
    <script src="app.js" defer></script>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
    <header>
        <h1>Vue Course Goals</h1>
    </header>
    <section id="user-goal">
        <h2>My Course Goal</h2>
        <p></p>
    </section>
</body>

</html>

app.js

const app = Vue.createApp({
    data() {
        return {
            courseGoal:'Finish the course and learn Vue!'
        }
    }
});

app.mount('#user-goal');

styles.css

* {
    box-sizing: border-box;
}

html {
    font-family: 'Jost', sans-serif;
}

body {
    margin: 0;
}

header {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    margin: 3rem auto;
    border-radius: 10px;
    padding: 1rem;
    background-color: #4fc08d;
    color: white;
    text-align: center;
    width: 90%;
    max-width: 40rem;
}

#user-goal {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
    margin: 3rem auto;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    width: 90%;
    max-width: 40rem;
}

#user-goal h2 {
    font-size: 2rem;
    border-bottom: 4px solid #ccc;
    color: #4fc08d;
    margin: 0 0 1rem 0;
}

#user-goal p {
    font-size: 1.25rem;
    font-weight: bold;
    border: 1px solid #4fc08d;
    background-color: #4fc08d;
    color: white;
    padding: 0.5rem;
    border-radius: 25px;
}

#user-goal input {
    font: inherit;
    border: 1px solid #ccc;
}

#user-goal input:focus {
    outline: none;
    border-color: #1b995e;
    background-color: #d7fdeb;
}

#user-goal button {
    font: inherit;
    cursor: pointer;
    border: 1px solid #ff0077;
    background-color: #ff0077;
    color: white;
    padding: 0.05 rem 1rem;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
}

#user-goal button:hover,
#user-goal button:active {
    background-color: #ec3169;
    border-color: #ec3169;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}