<!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. Tornado创建一个web服务

    import tornado.web import tornado.ioloop import tornado.httpserver import tornado.options import con ...

  2. handsontable 常用 配置项 笔记

    import React, { Component } from 'react'; import HotTable from 'react-handsontable'; import Handsont ...

  3. 聚簇索引(Clustered Index)和非聚簇索引 (Non- Clustered Index)

    本文转自https://my.oschina.net/u/1866821/blog/297673 索引的重要性数据库性能优化中索引绝对是一个重量级的因素,可以说,索引使用不当,其它优化措施将毫无意义. ...

  4. c#跨线程访问的代码和窗体关闭退出死循环的代码

    一:一段跨线程访问,给页面内的控件赋值的代码找了半天没找到,还得找了以前写的程序. 在这记下来吧 .  这是其他程序内可以跨线程访问的代码 . if (gridControl1.InvokeRequi ...

  5. Mysql必知必会 检索数据

    检索数据 SELECT 语句 为了使用SELECT检索表数据,必须至少给出两条信息--想选择什么,以及从什么地方选择 功能 语句 备注 检索单个列 SELECT col_1 FROM table_na ...

  6. go语言基本语法

    一个例子总结go语言基本语法  demo.go   package main   import (     "fmt" )   //结构体 type PersonD struct ...

  7. python3 第二十八章 - 内置函数之List相关

    Python包含以下函数: 序号 函数 实例 1 list.append(obj)在列表末尾添加新的对象   2 list.count(obj)统计某个元素在列表中出现的次数   3 list.ext ...

  8. nginx简介与配置

    nginx简介 nginx(发音同engine x)是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like协议下发行. nginx由俄罗斯的程序 ...

  9. TypeError: 'range' object does not support item assignment处理方法

    vectorsum.py#!/usr/bin/env/pythonimport sysfrom datetime import datetimeimport numpy as np # def num ...

  10. Jenkins构建maven项目跳过测试用例的命令

    在Jenkins构建项目的时候,有时候执行大量的单元测试用例需要浪费很多时间,又或者测试环境与其他dubbo,zookeeper服务器环境不通执行失败, 为了更快速的构建,可在build选项中使用如下 ...