全局 组件、局部组件

// 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. eclipse创建项目（步骤加图片）

    前言: 我曾经大学的专业是计算机科学与技术,但不曾想着走入计算机的世界,看着代码就眼晕. 为了自动化测试,不得被迫认识一下java. 1)       打开Eclipse,界面是这样的: 2)     ...

  2. Golang的goroutine协程和channel通道

    一:简介 因为并发程序要考虑很多的细节,以保证对共享变量的正确访问,使得并发编程在很多情况下变得很复杂.但是Go语言在开发并发时,是比较简洁的.它通过channel来传递数据.数据竞争这个问题在gol ...

  3. 软件缺陷5C标准

    Correct(准确) :每个组成部分的描述准确,不会引起误解 Clear(清晰): 每个组成部分描述清晰,易于理解 Concise(简洁): 只包含必不可少的信息,不包括任何多余的内容 Comple ...

  4. 当你使用Pycharm编译程序的时候，遇到了这个问题，该怎么办？please select a valid interpreter

    1.打开settings(CTRL + ALT + S)或者 file---setting 2.搜索 Interpreter 3.安装一个python的解释器,自行去官网下载,安装的时候,记得勾选配置 ...

  5. 产品之我见（3）-ZEN在产品上的延伸

    ZEN 在WIKIPEDIA上的解释是这样的: 禅,禅宗强调严格的自我控制能力,冥想实践,洞察到的事物性质,而这种洞察力在日常生活中的个人表达,尤其是为了别人的利益. 因此,它不再强调对经典和学说的了 ...

  6. 使用Python执行dos命令并获取输出的结果

    import os import subprocess # 第一种 result1 = subprocess.check_output('dir').decode('GBK') print(resul ...

  7. python手撸桌面计算器

    网上有一些许多关于计算器的源码,但我似乎不太care 一直寻思着自己手撸一个才有意思,于是这就开始了 实现功能: 1.基本的两个数 +-x÷ 运算以及取反,百分之,平方等 2.支持连续运算 3.暂不支 ...

  8. mysq的慢查询日志

    MySQL 慢查询日志是排查问题 SQL 语句,以及检查当前 MySQL 性能的一个重要功能. 查看是否开启慢查询功能: mysql> show variables like 'slow_que ...

  9. SecureCRT设置 log file

    SecureCRT设置 log filelog file name:D:\1-SecureCRT-log\com-6\%S_%Y%M%D_%h.log on each line:[%Y%M%D_%h: ...

  10. 浅析C语言中printf(),sprintf(),scanf(),sscanf()的用法和区别

    printf语法: #include <stdio.h>int printf( const char *format, ... ); printf()函数根据format(格式)给出的格式 ...