<!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. jq实现前端文件上传

    FormData FormData是XMLHttpRequest Level 2 新增的一个接口. 使用FormData可以实现各种文件上传. 使用 // 创建FormData的实例 var form ...

  2. python使用requests库爬取网页的小实例：爬取京东网页

    爬取京东网页的全代码: #爬取京东页面的全代码 import requests url="https://item.jd.com/2967929.html" try: r=requ ...

  3. idea配置git，查看git代码&拉取git项目至本地

    1.点击file,右键选择setting 选择本地git安装路径 Ps:从git上导入一个全新的maven项目 点击clone按钮后,会弹出如下截图弹窗,点击 NO 项目已经拉取到本地,然后点击ope ...

  4. 自学elastic search

    工作也有一段时间了,虽然来这个公司之后学会了几门不同的语言,但想拨尖还是任重道远. 想往高级程序员甚至是架构师方向发展.他仍然是我的学习对象.我现在做着的,无非是他玩剩下的罢了. luncene之前有 ...

  5. 安卓学习 intent

    其实学习了好几个星期了,是看老罗的视频,但进度太慢 今天 换了一本书 Intent 切换页面 啊啊啊啊 CompentName comp=new CompentName(MainActivity.th ...

  6. asp.net WebService如何去掉asmx后缀

    现在有一个发布好的WebService,地址是http://hovertree.com:2706/UploadExpenseToConstract.asmx能不能把最后面的asmx去掉呢?变成http ...

  7. Biopython 安装使用

    Biopython 官网:https://biopython.org/ 安装 Biopython  https://biopython.org/wiki/Download 可以使用 pip 进行安装, ...

  8. linux 图形化界面 && 谷歌浏览器 安装

    一.图形化界面安装 yum groupinstall "Desktop" 如果运行显示 则 yum groupinstall "X Window System" ...

  9. springcolud文章收藏

    https://blog.csdn.net/dyc87112/column/info/14412https://blog.csdn.net/dyc87112/article/details/79357 ...

  10. 从信息论的角度分析DNN的工作原理

    在前面的文章里,使用神经网络的任意函数拟合性结合了一点黎曼几何的坐标系变化的知识,解释了神经网络是怎样根据输入x,计算出每个分类下的能量Ei(x)的,再之后使用能量模型推算出了概率,从而展示了理论上可 ...