vue.js 简单使用（cdn 方式非vue-cli 用）

最新推荐文章于 2024-09-06 11:39:22 发布

itcastldh

最新推荐文章于 2024-09-06 11:39:22 发布

阅读量537

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/itcastldh/article/details/103383887

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

官网

https://cn.vuejs.org/

教程

组件作为单独.js 引入使用

文件结构如下

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

html 界面使用

说明： <script src="button-counter.js"></script>

引入组件

<button-counter></button-counter>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="button-counter.js"></script>
</head>
<body>
<div id="vue-app">

    <div id="app">
        {{ message }}


        <ol>
            <!-- 创建一个 todo-item 组件的实例 -->
            <todo-item></todo-item>

            <button-counter></button-counter>
        </ol>
    </div>

</div>
 <script>
     Vue.component('todo-item', {
         template: '<li>这是个待办项</li>'
     })
     var app = new Vue({
         el: '#app',
         data: {
             message: 'Hello Vue!'
         }
     })

 </script>


</body>
</html>

每次都要登录好麻烦准备转移了

https://www.linlsyf.cn/