vue3嵌入到html中使用 基础（一）

突发奇想要将vue3作为js库嵌入到html中使用，顺便学习下vue3的基础知识

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 方法有用 -->
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <!-- 方法不生效 Vue未定义 -->
    <!-- <script src="./vue.esm-browser.js" type="module"></script> -->
    <!-- 方法有用 -->
    <script src="./vue.global.js"></script>
  </head>
  <body>
    <div id="counter">Counter: {{ counter }}</div>
    <div id="bind-attribute">
      <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>
    <div id="event-handling">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">反转 Message</button>
    </div>
    <div id="two-way-binding">
      <p>{{ message }}</p>
      <input v-model="message" />
    </div>
    <div id="conditional-rendering">
      <span v-if="seen">现在你看到我了</span>
    </div>
    <div id="list-rendering">
      <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
      </ol>
    </div>
    <div id="components-app" class="demo">
      <ol>
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        ></todo-item>
      </ol>
    </div>

    <script>
      const Counter = {
        data() {
          return {
            counter: 0,
          };
        },
        mounted() {
          setInterval(() => {
            this.counter++;
          }, 1000);
        },
      };
      Vue.createApp(Counter).mount("#counter");

      const AttributeBinding = {
        data() {
          return {
            message: "You loaded this page on " + new Date().toLocaleString(),
          };
        },
      };
      Vue.createApp(AttributeBinding).mount("#bind-attribute");

      const EventHandling = {
        data() {
          return {
            message: "Hello Vue.js!",
          };
        },
        methods: {
          reverseMessage() {
            this.message = this.message.split("").reverse().join("");
          },
        },
      };
      Vue.createApp(EventHandling).mount("#event-handling");

      const TwoWayBinding = {
        data() {
          return {
            message: "Hello Vue!",
          };
        },
      };
      Vue.createApp(TwoWayBinding).mount("#two-way-binding");

      const ConditionalRendering = {
        data() {
          return {
            seen: true,
          };
        },
      };
      Vue.createApp(ConditionalRendering).mount("#conditional-rendering");

      const ListRendering = {
        data() {
          return {
            todos: [
              { text: "Learn JavaScript" },
              { text: "Learn Vue" },
              { text: "Build something awesome" },
            ],
          };
        },
      };
      Vue.createApp(ListRendering).mount("#list-rendering");

      const ComponentsApp = {
        data() {
          return {
            groceryList: [
              { id: 0, text: "Vegetables" },
              { id: 1, text: "Cheese" },
              { id: 2, text: "Whatever else humans are supposed to eat" },
            ],
          };
        },
      };
      const app = Vue.createApp(ComponentsApp);
      app.component("todo-item", {
        props: ["todo"],
        template: `<li>{{ todo.text }}</li>`,
      });
      app.mount("#components-app");
    </script>
  </body>
</html>

 

　　

posted @ 2022-11-19 11:13  carol2014  阅读(158)  评论(0)  编辑  收藏  举报