<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="./vuev2.5.21.js"></script>

</head>

<body>

    <div id="app">

            <input type="text" v-model="inputValue">

            <button @click="BtnClick">提交</button>

            <ul>

                <!-- <li v-for="item in list">{{item}}</li> -->

                <todo-item v-bind:content="item"  v-for="item in list"></todo-item>

            </ul>

    </div>

    <script>

        // Vue.component("TodoItem",{

        //     props:["content"],

        //     template:"<li>{{content}}</li>"

        // });

        var todoItem={

            props:["content"],

            template:"<li>{{content}}</li>"

        };

        var app= new Vue({

            el:"#app",

            components:{

                TodoItem:todoItem

            },

            data:{

                inputValue:"",

                list:[],

            },

            methods:{

                BtnClick:function(){

                //   console.log(this.list);

                this.list.push(this.inputValue);

                this.inputValue="";

                }

            }

        })

    </script>

</body>

</html>

vue局部组件的更多相关文章

  1. Vue 局部组件和全局组件的使用

    <template> <div id="app"> <!--<img alt="Vue logo" src="./ ...

  2. Vue局部组件和全局组件

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. VUE注册局部组件

    // 局部组件命名规范 /* 1文件夹名大驼峰 MyLocalBtn.vue 2 使用的时候 将驼峰转化为横杠 <my-local-btn></my-local-btn> */ ...

  4. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  5. vue（3）—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  6. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  7. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  8. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  9. vue全局组件和局部组件

    1.全局注册组件 Vue.componet('name',{ template:'<div></div>', data(){ retrun {} } }) 使用了以上这种方式注 ...

随机推荐

  1. Django 的认识，面试题

    Django 的认识,面试题 1. 对Django的认识? #1.Django是走大而全的方向,它最出名的是其全自动化的管理后台:只需要使用起ORM,做简单的对象定义,它就能自动生成数据库结构.以及全 ...

  2. gooflow学习笔记

    前端jqury脚本实现流程设计,兼容目前主流浏览器 gooflow 默认属性节点只有:id,name,top,left,width,height,type (各个版本不同,属性节点有所增加),但是这些 ...

  3. Samtools在Linux上非root权限的安装

    第一次在Linux上不用root权限安装软件,查看了很多博客,并实践安装成功.大致总结了一下samtools的安装过程,仅供大家参考,如有不对的地方,欢迎指正~ samtools安装过程中依赖于lzm ...

  4. UVa540

    //先输入队伍的个数 //用map建立数组将队伍序号和个人序号相互对应 //三条命令 #include <bits/stdc++.h> using namespace std; ; int ...

  5. HTML 中使用 JavaScript

    在 HTML 中插入 JavaScript 的主要方法,就是使用 <script> 元素, 浏览器会解释并执行其中的 JavaScript 代码. <script>  元素的属 ...

  6. zabbix3.0监控Windows服务器

    我们下载后,解压开始有多个文件: conf目录存放是agent配置文件bin文件存放windows下32位和64位安装程序 找到conf下的配置文件 zabbix_agentd.win.conf ,修 ...

  7. Java程序简介

    ---恢复内容开始--- java程序的基本构成: HelloDate.java package 语句 import 语句 类定义 -class 一个文件只能有一个public 类 (与文件同名) 类 ...

  8. union: redis config

    # how to save to disk # warning: how to disable, just comment this config save $second $changes

  9. ubuntu18.04静态ip设置

    1.配置文件 vi /etc/netplan/-cloud-init.yaml network: ethernets: enp129s0f0: addresses: [] dhcp4: true op ...

  10. LOJ-10095（缩点的特殊使用）

    题目链接:传送门 思路: 缩点求最值,但是有一点行不通,如果被选中的点才能缩点,否则缩点没有意义: 所以就先缩选中的点,然后从小到大统计没有缩点的点,就是NO: 如果找最小值,就是一个环里的最小值,然 ...