Vue 3 基础：“Hello World“

最新推荐文章于 2024-01-20 20:41:59 发布

小公鸡卡哇伊呀~

最新推荐文章于 2024-01-20 20:41:59 发布

阅读量778

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/ftell/article/details/121476702

版权

https://v3.vuejs.org/guide/introduction.html#what-is-vue-js

例子实际比 “Hello World” 复杂一些，写法同 Vue 3 网页说明一致：

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A First App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        <input type="text" id="goal" v-model="enteredValue" />
        <button v-on:click="addGoal">Add Goal</button>
      </div>
      <ul>
        <li v-for="goal in goals">{{ goal }}</li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="app.js"></script>
  </body>
</html>

app.js:

Vue.createApp({
  data() {
    return {
      goals: [],
      enteredValue: "",
    };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredValue);
      this.enteredValue="";
    },
  },
}).mount("#app");

输出：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小公鸡卡哇伊呀~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 3 基础：“Hello World“

https://v3.vuejs.org/guide/introduction.html#what-is-vue-js例子实际比 “Hello World” 复杂一些，写法同 Vue 3 网页介绍一致：index.html:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d
复制链接

扫一扫