第12组件基础

第12组件基础

1. 全局组件创建

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

第12组件基础_第1张图片

 

 代码:

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">
    
    <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:''
    });
    // 2.再将含有添加新组件的vue实例化给变量 vm
    var vm=new Vue({
        el:'#one',
        data:{ }
    });
script>
body>
html>

 2. 局部组件创建

第12组件基础_第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: '

哈哈

', methods:{ add:function(){ alert('你好!') } } } } }) script> body> html>

 

posted on 2019-09-23 23:09  人生与戏 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/FlyingLiao/p/11575573.html

你可能感兴趣的:(第12组件基础)