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. 详解JavaScript UTC时间转换方法

    这篇文章主要介绍了JavaScript UTC时间转换方法,介绍了本地时间到UTC时间的转换.UTC日期到本地日期的转换,感兴趣的小伙伴们可以参考一下 一.前言 1.UTC: Universal Ti ...

  2. std::string, std::wstring, wchar_t*, Platform::String^ 之间的相互转换

    最近做WinRT的项目,涉及到Platform::String^  和 std::string之间的转换,总结一下: (1)先给出源代码: std::wstring stows(std::string ...

  3. spring@Autowired注入为null的问题，2017年9月14日21点41分记录

    这个小问题纠结了三个小时..发出来留个纪念 这是启动项目的时候 这是请求控制器的时候   图1注入的时候是null,图2请求控制器的时候是有的,这是因为图1debug的地方是构造器..autowire ...

  4. Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行，它们有什么区别? 线程的sleep()方法和yield()方法有什么区别？

    Thread类的sleep()方法和对象的wait()方法都可以让线程暂停执行,它们有什么区别? sleep()方法(休眠)是线程类(Thread)的静态方法,调用此方法会让当前线程暂停执行指定的时间 ...

  5. 如何禁用 Azure 虚拟机的日期时间同步

    问题描述 由于 Azure 虚拟机的特殊性,物理主机会实时同步虚拟机的时间和日期.当有特殊需求时,客户想要停止日期时间的同步,但是一些常见的关闭 NTP 服务等操作都会失败. 解决方案 Importa ...

  6. windows下使用VNC进行远程连接

    在 windows 电脑上安装 VNC,包含 VNC server 和 VNC viewer,如果仅需要被操控或操控他人,选择型下载安装 VNC server 或 VNC viewer 即可. 在需要 ...

  7. windows 服务器时间同步失败处理方法

    服务器的时间同步失败,通过命令行的形式进行处理. 1.编写时间命令行代码 w32tm /config /manualpeerlist:time.windows.com /syncfromflags:M ...

  8. 谣言粉碎机 - 极短时间内发送两个Odata request，前一个会自动被cancel掉?

    背景 有时我们能在Chrome开发者工具的Network tab里观察到SAP UI5应用会发出某些状态为"取消"的OData请求.如下图第五个请求. 之前有一种似是而非的说法:极 ...

  9. Asp.net网站优化【转】

    阅读目录 开始 配置OutputCache 启用内容过期 解决资源文件升级问题 启用压缩 删除无用的HttpModule 其它优化选项 本文将介绍一些方法用于优化ASP.NET网站性能,这些方法都是不 ...

  10. 用C#生成不反复的随机数

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/xiebaochun/article/details/28900237 对于随机数,大家都知道,计算机 ...