vue组件注册及注意事项

最新推荐文章于 2023-06-19 16:39:23 发布

爬楼梯的小新

最新推荐文章于 2023-06-19 16:39:23 发布

阅读量146

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_57607714/article/details/119673278

版权

vue 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

一：在.html文件中

先引入vue.js

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

先创建组件再把app挂载到vm实例上

注：vm实例放在组件上面页面不显示任何效果！

组件里的data 必须是个函数 vm实例的data则是对象

<body>
    <div id="app">
        这是点击事件
        <btn></btn>
        <hello></hello>
        <h3>{{msg}}</h3>
    </div>
</body>

<script>
    //组件一 data必须是函数
    Vue.component('hello', {
        data: function() {
            return {
                mesg: 'hello模版'
            }
        },
        template: `<div>{{mesg}}</div>`
    })


    //组件二   
    Vue.component('btn', {
        data: function() {
            return {
                count: 0,
            }
        },
        // template: '<button @click="count++">点击了{{count}}次</button>'  方法一 自增加一
        template: '<button @click="handle">点击了{{count}}次</button>', //方法二 给个点击事件
        methods: {
            handle() {
                this.count++;
            }
        }
    })

    //vue实例中 data是个对象
    var vm = new Vue({ //放在组件Vue.component上面会不起作用！
        el: "#app",
        data: {
            msg: 'hello world对象'
        }
    })
</script>

二：在.vue文件中

<template>
  <div id="app">
      <button @click="count++">点击了{{count}}次</button>
  </div>
</template>


<script type="text/javascript">
export default {
    data:function(){
        return{
            count:0
        }
    }
}

</script>
<style>
</style>

爬楼梯的小新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件注册及注意事项

一：在.html文件中先引入vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>先创建组件再把app挂载到vm实例上注：vm实例放在组件上面页面不显示任何效果！组件里的data 必须是个函数 vm实例的data则是对象<body> <div id="app"> 这是点击...
复制链接

扫一扫

专栏目录