1. 以下是 todolist 的例子，没有用到组件：下面的3 会通过组件拆分todolist

 <!DOCTYPE html>

 <html lang="en">

 <head>...</head>

 <body>

     <div id="root">

         <div>

             <input v-model="inputValue"/>

             <button v-on:click="submit">提交</button>

         </div>

         <ul>

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

         </ul>

     </div>

     <script>

         new Vue({

             el: "#root",

             data:{

                 inputValue: ' hello',

                 list:[ ]

             },

             methods:{

                 submit: function(){

                     // var val = this.inputValue;

                     this.list.push(this.inputValue);

                     this.inputValue='';

                 }

             }

         })

     </script>

 </body>

 </html>

2. 全局组件和局部组件怎么写？

全局组件：在js中直接定义 Vue.component('组件名‘,{ 业务逻辑})，然后在body中直接使用组件名，子组件可以传参，组件中使用props去接收参数

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>vue demo</title>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

　　<ul>

      <todo-item  v-for="item in list"

            	  :key="item.id"

                  :content="item.title"

       ></todo-item>

　　</ul>

</div>

</body>

<script>

     Vue.component('todo-item',{

        props: ['content'],

        template: '<li>{{content}}</li>'

     });

	new Vue({

		el: '#app',

		data:{

			list: [

				{id: 1, title: 't1'},

				{id: 2, title: 't2'},

				{id: 3, title: 't3'}

			]}

	});

</script>

</body>

</html>

　　

局部组件：第一步var 定义局部组件，然后在vue中注册局部组件，也就是给局部组件一个名字，html中直接通过名字调用

 html:

 <todo-item></todo-item>

 js:

 //定义局部组件

 var TodoItem = {

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

 }

 //在vue中注册组件

 new Vue({

     el: "#root",

     components:{

     'todo-item': TodoItem

     }

     ...

 }）

3. 将1中的todolist例子拆分成组件模式,用的全局组件，：key是v-bind的缩写

 <!DOCTYPE html>

 <html lang="en">

 <head>...</head>

 <body>

     <div id="root">

         <div>

             <input v-model="inputValue"/>

             <button v-on:click="submit">提交</button>

         </div>

         <ul>

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

         <todo-item

             v-for="(item,index) in list"

             :key="index"

             :content="item"

             >

         </todo-item>

         </ul>

     </div>

     <script>

     //全局组件

     Vue.component('todo-item',{

         props: ['content'],

         template: '<li>{{content}}</li>'

     })

         new Vue({

             el: "#root",

             data:{

                 inputValue: ' hello',

                 list:[ ]

             },

             methods:{

                 submit: function(){

                     this.list.push(this.inputValue);

                     this.inputValue='';

                 }

             }

         })

     </script>

 </body>

 </html>

4：组件和vue实例的关系：

每一个组件都是一个vue实例，就是说组件中也可以包含data、methods、data、计算属性computed....，同时每一个vue实例都是一个组件

5. 带删除功能的todolist组件

　　父子组件通信使用$emit  和v-on，子组件使用$emit触发，父组件在实例中v-on自定义事件监听

 <!DOCTYPE html>

 <html lang="en">

 <head>...</head>

 <body>

     <div id="root">

         <div>

             <input v-model="inputValue"/>

             <button v-on:click="submit">提交</button>

         </div>

         <ul>

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

         <todo-item

             v-for="(item,index) in list"

             :key="index"

             :content="item"

             :index = "index"

             @delete="handDelete"

             >

         </todo-item>

         </ul>

     </div>

     <script>

     //全局组件

     Vue.component('todo-item',{

         props: ['content','index'],

         template: '<li >{{content}}<button @click="handDel">remove</button></li>',

         methods:{

             handDel: function(){

                 this.$emit('delete',this.index)

             }

         }

     })

         new Vue({

             el: "#root",

             data:{

                 inputValue: ' hello',

                 list:[]

             },

             methods:{

                 submit: function(){

                     // var val = this.inputValue;

                     this.list.push(this.inputValue);

                     this.inputValue='';

                 },

                 //删除一条数据

                 handDelete: function(index){

                     this.list.splice(index,1);

                 }

             }

         })

     </script>

 </body>

 </html>

vue入门——组件基础todolist的更多相关文章

  1. 前端框架之Vue(9)-组件基础&vue-cli

    组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...

  2. vue 父子组件 基础应用scrollball v-model sync

    # 组件之间通信 可以通过 v-model 子组件可以通过 改变数据来改变父组件的数组  * v-model  子组件需要接受value属性,需要出发this.$emit("input&qu ...

  3. vue的组件基础

    组件分为全局组件和局部组件. 组件的核心是template:所有的数据都为template服务. 父组件子组件传值:因为子组件是父组件的个标签,完全等同于添加动态属性: 然后子组件能够通过props: ...

  4. vue入门(二)----模板与计算属性

    其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...

  5. Vue 入门之组件化开发

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

  6. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  7. Vue.js-09：第九章 - 组件基础再探（data、props）

    一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vu ...

  8. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  9. 01慕课网《vue.js2.5入门》——基础知识

    前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...

随机推荐

  1. 3、HTML属性

    属性的意义是为HTML提供附加信息. 属性中,名称和值总是成对出现.比如 <img src="1" width="2" /> src="1 ...

  2. OSGi Bundle

    OSGi Framework looks like OS, Bundle looks like program, OS can create a process to run program with ...

  3. 关于ButterKnife 设置全局配置

    先在项目的根目录的build.grade添加:classpath'com.neenbedankt.gradle.plugins:android-apt:1.8'  然后在app build.grade ...

  4. python 多线程效果演示

    多线程演示 不使用多线程的情况 import threading import time def run(n): print("task ",n) time.sleep(2) ru ...

  5. VC简单嵌入汇编

    转自:http://blog.csdn.net/arcsinsin/article/details/8126473 内嵌汇编的使用方法是: __asm {        语句 } 你可以把它插入程序中 ...

  6. ARM 虚拟机使用同一个公共 IP 访问公网的解决方案

    ARM 虚拟机使用同一个公共 IP 访问公网的解决方案 2017-2-21 作者 Azure 目前有两种部署模型:资源管理器 ARM 和经典部署模型 ASM.ASM 的虚拟机默认公用云服务的 VIP ...

  7. jboss安全配置规范

    https://wenku.baidu.com/view/aad157a4f242336c1fb95ed5.html https://wenku.baidu.com/view/ac227281ec3a ...

  8. 【Leetcode】【Easy】String to Integer (atoi)

    Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cases. ...

  9. June 16th 2017 Week 24th Friday

    Progress is the activity of today and the assurance of tomorrow. 进步是今天的活动,明天的保证. The best preparatio ...

  10. March 18 2017 Week 11 Saturday

    When you feel like quitting, think about why you started. 当你想放弃时,想想你为什么开始. When I heard of the messa ...