Vue.js通过CDN运行的代码框架

最新推荐文章于 2024-12-24 10:02:11 发布

原创最新推荐文章于 2024-12-24 10:02:11 发布 · 284 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #CDN

Web开发同时被 3 个专栏收录

3 篇文章

订阅专栏

Vue.js

1 篇文章

订阅专栏

前端

1 篇文章

订阅专栏

博客介绍了Vue.js通过CDN运行的代码框架，还给出了Vue.js官方入门文档地址，为Vue.js的学习和使用提供了基础指引。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js通过CDN运行的代码框架

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <h1>{{ message }}</h1>
        <h2>Essential Links</h2>
    </div>

    <div id="app-2">
    <span v-bind:title="message1">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
    </div>

    <div id="app-3">
    <p v-if="seen">现在你看到我了</p>
    </div>

    <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
    </div>

      <script>
      var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
      })

      var app2 = new Vue({
      el: '#app-2',
      data: {
        message1: '页面加载于 ' + new Date().toLocaleString()
      }
      })

      var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: false
      }
      })

      var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ]
      }
      })
      </script>
  </body>

  <style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
</html>