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. Web前端面试指导(八)：iframe有那些缺点

    本题的特点 这道题目的特点就是不按照正常的套路来提问,一般都是问优点,这里比较反常问iframe的缺点,很多同学肯定很不习惯这种问答,因为平时只关注有点,这么一问就懵逼了! 本题解答的思路及要点 ① ...

  2. axios 发 post 请求，后端接收不到参数的解决方案

    问题场景 场景很简单,就是一个正常 axios post 请求: axios({ headers: { 'deviceCode': 'A95ZEF1-47B5-AC90BF3' }, method: ...

  3. html学习笔记：基本结构,排列清单,表格

    <html> <head> 基本结构,排列清单,表格 <title></title> <!--文件标题声明--> <base> ...

  4. ASP.NET MVC 音乐商店 - 5 通过支架创建编辑表单 续

    查看 StoreManager 控制器的代码 现在,Store Manager 控制器中已经包含了一定数量的代码,我们从头到尾重新过一下. 首先,在控制器中包含了标准的 MVC 控制器的代码,为了使用 ...

  5. keras 多输出问题

    转自:https://github.com/Xls1994/DeepLearningCode/blob/master/Keras/HedgeScope/multiOutputLSTM.py

  6. 常见HTTP状态200,304,403,404,503

    下面提供 HTTP 状态码的完整列表.您也可以查看 W3C官方HTTP 状态码说明(英文). 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态码. 100(继续) 请求者应当继续提出请求 ...

  7. Android内存泄漏排查利器LeakCanary

    开源地址:https://github.com/square/leakcanary 在 build.gralde 里加上依赖, 然后sync 一下, 添加内容如下 dependencies { ... ...

  8. Microsoft Fluent Design System

    转载自:http://www.ui.cn/detail/131217.html 就在刚刚举办的 Microsoft Build 2017 中,微软对外公布了它们最新的设计语言--"Fluen ...

  9. Win8 Pro 64 Install .net3.5 在线升级会遇到错误0x800F0906。

    很多人安装Win8后都遇到了无法升级.NET Framework 3.5.1的问题,在线升级会遇到错误0x800F0906. Uninstall Windows update kB: KB296682 ...

  10. Java IO 整理总结

    read(byte b[], int off, int len) 方法的作用是从输入流中读取 len 个字节,并把数据写入到字节数组b中,并返回实际读取了多少数据.如果没有读取到任何数据,意味着文件已 ...