全局 组件、局部组件

// Vue.component('todo-list',{
// template:'<li >item</li>'
// }); //全局

// var todoitem={
// template:'<li >item</li>'
// } //局部

<!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="/vuejs/vue.js"></script>

</head>

<body>

    <div id="app">

        <input v-model="inputvalue"/>

        <button @click='handlesubmit'>提交</button>

       <!-- <ul>

           <li v-for="(item, index) of list" :key="index">{{item}}</li>

       </ul> -->

       <ul>

        <!-- <li >{{item}}</li> -->

        <todo-list v-for="(item, index) of list" :key="index"

        :content='item'>

        </todo-list>

    </ul>

    </div>

    <script>

        // Vue.component('todo-list',{

        //     template:'<li >item</li>'

        // });  //全局

    // var todoitem={

    //     template:'<li >item</li>'

    // }  //局部

Vue.component(
'todo-list',{
props:['content'],
template:'<li @click="handleclick" >{{content}}</li>',
methods: {
handleclick:function(){
alert(12)
}
},
},

new Vue({

          el:'#app',

        //   components:{

        //       'todo-list':todoitem

        //   },

          data:{

              inputvalue:'123',

              list:[]

          },

          methods: {

              handlesubmit:function()

              {

                  this.list.push(this.inputvalue);

                  this.inputvalue=''

              }

          },

     });

    </script>

</body>

</html>

vue 入门1 组件管理的更多相关文章

  1. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  2. vue入门(一)----组件

    由于工作需要,最近在写一些前端的东西.经过向开发经验丰富的前端工程师的请教之后,得出一个结论----2016年前端被玩坏了,其实对于我来说我并不是太了解这句话的深刻含义,只是觉得是不是因为前端技术突飞 ...

  3. vue入门：用户管理demo

    该demo纯前端实现 使用到vue技术点: 1.在该demo中使用到的vue指令:{{}}. v-if. v-model. @click v-for 2.在该demo中使用到的事件修饰符: .prev ...

  4. vue入门：用户管理demo1

    该demo由前端请求后台服务器获取数据进行渲染 使用到的技术点 1.使用到的vue指令:{{}} v-if v-for v-model 2.使用到的事件:@click 点击事件, @keyup.ent ...

  5. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  6. 基于Vue全家桶开发的前端组件管理平台

    项目背景 项目背景是外包类建站公司里,设计环节沉淀了大量可复用组件,设计师往往只需要微调组件就拼凑出页面,交付给前端,理论上这些组件在前端也可以复用,但实际上前端每次都要重新实现整个页面,浪费很多人力 ...

  7. vue入门：（组件）

    模板:(template)模板声明了数据和最终展现给用户的DOM之间的映射关系. 初始数据:(data)一个组件的初始数据状态.对于可复用的组件来说,通常是私有的状态. 接收外部参数:(props)组 ...

  8. vue入门——组件基础todolist

    1. 以下是 todolist 的例子,没有用到组件:下面的3 会通过组件拆分todolist <!DOCTYPE html> <html lang="en"&g ...

  9. webpack入坑之旅（五）加载vue单文件组件

    这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不 ...

随机推荐

  1. Java线程池（Callable+Future模式）

    转: Java线程池(Callable+Future模式) Java线程池(Callable+Future模式) Java通过Executors提供四种线程池 1)newCachedThreadPoo ...

  2. Selenium 2自动化测试实战33（带unittest的脚本分析）

    带unittest的脚本分析 #test.py #coding:utf-8 from selenium import webdriver from selenium.webdriver.common. ...

  3. swagger-注解

    常用注解 @Api(value = "xxx"):用于类,表示标识这个类是swagger的资源. tags–表示说明,如果有多个值,会生成多个list value–也是说明,可以使 ...

  4. python基础知识（集合）

    集合 可变集合set()/不可变集合frozenset() {}  大写的拉丁字母 用于保存不重复元素.无序不能通过索引来获取 集合的创建 空集合 使用set()函数 变量名 = set() 集合的添 ...

  5. 论文阅读 | Tackling Adversarial Examples in QA via Answer Sentence Selection

    核心思想 基于阅读理解中QA系统的样本中可能混有对抗样本的情况,在寻找答案时,首先筛选出可能包含答案的句子,再做进一步推断. 方法 Part 1 given: 段落C   query Q 段落切分成句 ...

  6. [转帖]nginx配置ssl证书实现https访问

    https://www.cnblogs.com/tianhei/p/7726505.html 今天就是如此处理的 感觉挺不错的. 一,环境说明 服务器系统:ubuntu16.04LTS 服务器IP地址 ...

  7. stalstack

    Saltstack 是干什么的 saltstack 是一个开源异构平台基础设置管理工具 Saltstack 能干什么 如果是一个管理成千上百服务器的管理员,你会遇到场景 需要在每台服务器上面部署age ...

  8. GTID复制

    什么是GTID呢, 简而言之,就是全局事务ID(global transaction identifier ),最初由google实现,官方MySQL在5.6才加入该功能.GTID是事务提交时创建分配 ...

  9. Docker——四种网络模式

    docker run创建Docker容器时,可以用–net选项指定容器的网络模式,Docker有以下4种网络模式:  bridge模式:使用–net =bridge指定,默认设置:  host模式 ...

  10. 开发过程遇到的css样式问题记录

    一.移动端 1.部分安卓机圆角border-radius失效,显示为方形状?   background-clip: padding-box; 2.部分安卓机字体图标出现锯齿? 使用iconfont图标 ...