全局 组件、局部组件

// 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. selenium 常见事件操作

    1.文本框输入内容 from selenium import webdriverdriver = webdriver.Chrome(r"C:\Users\Administrator\Desk ...

  2. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-4.微信授权一键登录开发之授权URL获取

    笔记 4.微信授权一键登录开发之授权URL获取     简介:获取微信开放平台扫码连url地址 1.增加结果工具类,JsonData;  增加application.properties配置      ...

  3. Dozer映射

    1.为什么要映射 一个映射的框架在一个分层的体系架构中非常有用,特别是你在创建一个抽象的分层去包装一些特殊数据的变化 vs 这些数据传输到其它层(外部服务的数据对象.领域的数据对象.数据传输对象.内部 ...

  4. R语言与概率统计(四) 判别分析(分类)

    Fisher就是找一个线L使得组内方差小,组间距离大.即找一个直线使得d最大. ####################################1.判别分析,线性判别:2.分层抽样 #inst ...

  5. JavaScript（6）—— 返回特征数字

    案例要求 根据业务情况,要把核心的东西变成一个模块便于复用,慢慢沉淀后,能够更快更高效地编程. 业务核心算法: /* 数字检测 @return 返回2,能被3和7整除 返回1,能够被3整除 返回0,不 ...

  6. k-means聚类分析范例程序

    K-Means聚类算法原理参考以下链接: https://www.cnblogs.com/pinard/p/6164214.html 2. 传统K-Means算法流程 在上一节我们对K-Means的原 ...

  7. 写linux脚本你怎么能不知道位置参数！？

    在写shell脚本的时候,我们经常会手动设置参数,然后对我们的输入的这些参数进行处理和分析,那么这个东东到底值怎么使用的呢? 1.$n $0代表命令本身,$1-9代表接受的第1-9个参数,10以上需要 ...

  8. 【Abode Air程序开发】iOS证书(.p12)和描述文件(.mobileprovision)申请

    iOS证书(.p12)和描述文件(.mobileprovision)申请 5+App开发 Apple证书 iOS证书 iOS有两种证书和描述文件: 证书类型 使用场景 开发(Development)证 ...

  9. 12.Flume的安装

    先把flume包上传并解压 给flume创建一个软链接 给flume配置环境变量 #flume export FLUME_HOME=/opt/modules/flume export PATH=$PA ...

  10. oracle：archiver error. Connect internal only, until freed 原因以及错误的处理方法

    今天小编遇到这个数据原因,通过查找资料解决了,问题原因就是数据默认存储日志的文件夹满了 1.首先通过cmd命令窗口连接超级管理员,sqlplus / as sysdba; 2.查询db_recover ...