<!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. Checked Uncheckd异常

    Checked : 你可以在写代码的时候就throw 或者try catch 的 Unchecked :  Error   + RuntimeException .提前无法预测的 http://www ...

  2. C#smtp邮件消息提醒的一些bug总结

    软件通过检测公众号的某些链接是否异常发邮件提醒.. 1:网上找了些方法有说ssl  system.net.mail 不支持 ,这种说法是有问题的,其方法内设置的验证账号写成了邮箱的地址而不是账号也就是 ...

  3. View操作 swift

    //创建View let view1 =UIView() let view2 =UIView(frame: CGRectMake(,, ,)) let view3 =UIView(frame: CGR ...

  4. [精华][推荐]CAS SSO单点登录服务端客户端学习

    1.通过下载稳定版本的方式下载cas的相关源码包,如下: 直接选择4.2.1的稳定代码即可 2.我们项目中的版本版本使用maven apereo远程库去下载 通过远程maven库下载cas-serve ...

  5. selenium+java定位163/126邮箱元素显示定位失败解决

    开始在没有进入iframe时,用任何方法定位163/126邮箱登录页面的元素都不可能定位到,eclipse工作台会显示Unable to locate element:…… 这种情况我遇到了两种原因: ...

  6. Firefox 调试 JavaScript 代码

    第一步  新建 html 或者 jsp 文件 文件内容 <!DOCTYPE html> <html> <head> <meta charset="u ...

  7. 服务管理之NFS

    目录 NFS简介 1.1 nfs特点 1.4 nfs的应用场景 4. nfs管理 NFS简介 1.1 nfs特点 NFS(Network File System)即网络文件系统,是FreeBSD支持的 ...

  8. System.Web.Caching.Cache缓存帮助类

    /// <summary> /// 缓存帮助类 /// </summary> public class CacheHelper { /// <summary> // ...

  9. fiddler不能抓某些的包的原因

    用fiddler抓某app的包时,死活抓不到,确定自己设置的没有错,并且让小A同事也看了一遍我的设置,确认没错后,又在小A同事那儿试了下还是抓不到 后来在网上找了很多资料,才发现是因为一些app使用了 ...

  10. C语言闰年问题程序框图

    判定2000-2500年中的每一年是否为闰年,并将结果输出. 先分析闰年成立条件: 1)能被4整除,但不能被100整除的年份都是闰年: (2)能被400整除的年份是闰年: #include<st ...