<!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. laravel安装laravel-ide-helper扩展进行代码提示(二)

    一.扩展的地址 https://github.com/barryvdh/laravel-ide-helper 二.安装扩展 1.引入库: composer require barryvdh/larav ...

  2. hbase-数据恢复流程

    引用<https://blog.csdn.net/nigeaoaojiao/article/details/54909921> hlog介绍: hlog构建: 从图中可以看出,对于一个hl ...

  3. js如何实现重载

    所谓重载,就是一组相同的函数名,有不同个数的参数,在使用时调用一个函数名,传入不同参数,根据你的参数个数,来决定使用不同的函数!但是我们知道js中是没有重载的,因为后定义的函数会覆盖前面的同名函数,但 ...

  4. VNF网络性能提升解决方案及实践

    VNF网络性能提升解决方案及实践 2016年7月 作者:    王智民 贡献者:     创建时间:    2016-7-20 稳定程度:    初稿 修改历史 版本 日期 修订人 说明 1.0 20 ...

  5. SQL Server数据库的兼容级别

    SQL Server 是Microsoft 公司推出的关系型数据库管理系统.具有使用方便可伸缩性好与相关软件集成程度高等优点,可跨越从运行Microsoft Windows 98 的膝上型电脑到运行M ...

  6. vue2.0项目创建之环境变量配置

    安装node 传送门 <node安装步骤>关于环境的配置,百度一大把 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm. ...

  7. centos服务器监控 服务器虚拟机里面的客户端zabbix-agent安装

    开启zabbix要用的端口, 也可以关闭服务器的防火 [html] view plain copy #vim /etc/sysconfig/iptables -A INPUT -m state --s ...

  8. 文件操作命令(del)

    del 命令: // 描述: 删除一个或多个文件.同等于 erase 命令. 相比较 rd 命令来说,del 命令只能删除文件,不能删除文件夹. // 语法: del [/p] [/f] [/s] [ ...

  9. 使用kbmmw 的REST 服务实现上传大文件

    我们在使用kbmmw的REST 服务时,经常会下载和上传大文件.例如100M以上的.kbmmw的rest服务中 提供标准的文件下载,上传功能,基本上就是打开文件,发送,接收,没有做特殊处理.这些对于文 ...

  10. 2019.03.12 codeforces739E. Gosha is hunting（dp凸优化）

    传送门 题意:nnn个物品,有aaa个XXX道具和bbb个YYY道具,XXX道具移走第iii个物品概率为pip_ipi​,YYY道具移走第iii个道具概率为uiu_iui​. 对于每个物品每种道具最多 ...