全局 组件、局部组件

// 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. js图片预览带进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JSTL优点

    1. 在应用程序服务器之间提供了一致的接口,最大程序地提高了WEB应用在各应用服务器之间的移植. 2. 简化了JSP和WEB应用程序的开发.3. 以一种统一的方式减少了JSP中的scriptlet代码 ...

  3. powerdesigner通过er图生成mysql执行文件

    PowerDesigner是一款功能非常强大的建模工具软件,足以与Rose比肩,同样是当今最著名的建模软件之一.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesign ...

  4. [PySpark] RDD programming on a large file

    重难点 一.parallelize 方法 一般来说,Spark会尝试根据集群的状况,来自动设定slices的数目.然而,你也可以通过传递给parallelize的第二个参数来进行手动设置. data_ ...

  5. Python-sympy科学计算与数据处理(方程，微分，微分方程，积分)

    方程 a,b,c,x = symbols("a b c x") my_eq = Eq(a*x**2+b*x+c,0) solve(my_eq,x) Out[12]: [(-b + ...

  6. Js 监听器

    在Ajax取数据时,采用$("#id").click(function(){})的方式不能正确设置监听,需要用$("#parent").on("cli ...

  7. 手写web框架之实现依赖注入功能

    我们在Controller中定义了Service成员变量,然后在Controller的Action方法中调用Service成员变量的方法,那么如果实现Service的成员变量? 之前定义了@Injec ...

  8. confilicts

    confilicts 矛盾; 冲突 安装软件提升这个表示安装软件之间的冲突,需要卸载冲突的软件再安装

  9. Python C/S架构,网络通信相关名词,socket编程

    主要内容: 一.  C/S架构 二. 网络通信的相关名词 三. socket编程 一. C/S架构和B\S架构概述 1. C/S架构: Client/Server(客户端/服务端)架构 描述: C/S ...

  10. 【VS开发】【C/C++开发】printf缓冲区刷新

    printf之缓冲区小结: 今天调试程序,发现了一个有趣的现象,printf函数没有按照预期的结果输出重复的字符串,单步调试显示代码的确走到了打印屏幕的分支,没有显示不由得想到了是不是缓冲区去刷新的问 ...