helloworld

<!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>

　　

原文地址：http://www.cnblogs.com/caroline2016/p/16905694.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性