Vue

稍稍学了一丢丢Vue.

组合式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css"/>
    <title>Vue.js Basics</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body id="app">
    <span>{{cfff}}</span>
    <h1>{{dfff}}</h1>
    <p>lorem ipsum .......{{efff}}</p>
    <a href="https://www.scrimba.com" target="_blank">{{ffff}}</a>
</body>
<script>
    const {createApp,ref} = Vue
    createApp({
        setup(){
            const cfff=ref("😡")
            const dfff=ref("CodeForces")
            const efff=ref("12345679")
            const ffff=ref("#@$%#$%^")
            return {cfff,dfff,efff,ffff}
        }
    }).mount("#app")
</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
<script setup>
  import {ref} from 'vue'
  const emoji = ref('✌🏻')
</script>

<template>
  <header>
    <span>{{emoji}}</span>
  </header>
</template>

<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script setup>
import {ref} from 'vue'
const facts = ref([
  {
    "adjective": "Lightweight",
    "description": "I am incredibly small and fast! My core library is only around 30KB, so I won't slow you down."
  },
  {
    "adjective": "Approachable",
    "description": "Easy to learn and use, even for beginners. I have a gentle learning curve, clear documentation, and a supportive community."
  },
  {
    "adjective": "Versatile",
    "description": "I can handle everything from simple interactive elements to complex single-page applications. I'm great for small projects and large-scale applications alike."
  },
])
/*
CHALLENGE: Bind the data from the `facts` Ref to elements in the template
*/
</script>

<template>
  <main>
      <section>
          <h2>
              I'm <span class="highlight">{{facts[0].adjective}}</span>
          </h2>
          <p>{{facts[0].description}}</p>
      </section>
  </main>
</template>

<style scoped>
  main {
    margin-top: 15px;
  }

  section {
    margin-top: 25px;
  }

  h2 {
    font-size: 1.3rem;
    color: #34495e;
    margin-bottom: 3px;
  }

  p {
    font-size: 0.9rem;
    color: #555;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script setup>
import { ref } from 'vue';

//data
const name = ref('Rachel');
const href = ref('https://www.scrimba.com');
const disabled = ref(true);
const attributes = {
  id: 'big_emoji',
  class: 'waving',
};
const coding_years = ref(5);
const getFormattedDate = (date) => {
  const options = { year: 'numeric', month: 'long', day: 'numeric' };
  return date.toLocaleDateString('en-UK', options);
};
const username = ref('rachelktyjohnson');
const event = ref('click');
const blockLeave = () => {
  alert("You can't leave!");
};
</script>

<template>
  <span v-bind="attributes">👋🏻</span>
  <h1>Hi, my name is 
    <!--
    CHALLENGE: Using the v-on directive, make it so that when our name is clicked, the blockLeave() function is called 
    SYNTAX: v-on:[event]="call the function"
    -->
    <a v-on:click.prevent="blockLeave()" v-bind:href="href + '/@' + username" target="_blank">{{ name }}</a>
  </h1>
  <a :href target="_blank">
    <button :disabled>Click to visit my favourite website! If you can...</button>
  </a>
  <h2 v-on:[event]="coding_years++">
    {{
        coding_years > 0
          ? `I have been coding for ${coding_years} years`
          : "I am a newbie!"
    }}
  </h2>
  <h3>Today is {{ getFormattedDate(new Date()) }}</h3>
</template>