第12组件基础

最新推荐文章于 2024-08-28 14:58:40 发布

anfuye3276

最新推荐文章于 2024-08-28 14:58:40 发布

阅读量141

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/FlyingLiao/p/11575573.html

版权

第12组件基础

1. 全局组件创建

效果图： 1、创建新组件， 2. 实例化对象， 3.调用组件

代码：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="one">
    <!-- 3. 最后调用组件 -->
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>
<script type="text/javascript">
    // 1.先在vue中定义一个名为 button-counter 的新组件
    Vue.component('button-counter',{
        // 定义数据函数  =》 每个实例返回独立的数据
        data:function(){
            return {
                count: 0
            }
        },
        // 定义组件模板内容
        template:'<button v-on:click="++count">You clicked me {{ count }} times</button>'
    });
    // 2.再将含有添加新组件的vue实例化给变量 vm
    var vm=new Vue({
        el:'#one',
        data:{ }
    });
</script>
</body>
</html>

2. 局部组件创建

代码：

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href=" "/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 局部注册组件 -->
<div id="two">
    <button_local></button_local>
</div>
<script type="text/javascript">
    var vm_local = new Vue({
        el:'#two',
        data:{
            info1: 'ha'
        },
        components:{
            button_local:{
                template: '<h1 @click="add">哈哈</h1>',
                methods:{
                    add:function(){
                        alert('你好！')
                    }
                }
            }
        }
    })
</script>
</body>
</html>