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. JDBC实现动态查询

    一 概述 1.什么是动态查询? 从多个查询条件中随机选择若干个组合成一个DQL语句进行查询,这一过程叫做动态查询. 2.动态查询的难点 可供选择的查询条件多,组合情况多,难以一一列举. 3.最终查询语 ...

  2. Homebrew 的使用

    安装 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/ins ...

  3. [转]chrome developer tool 调试技巧

    这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. ...

  4. git本地分支重命名

    1. 本地分支重命名 git branch -m oldbranchname newbranchname 2. 远程分支重命名 (假设本地分支和远程对应分支名称相同) a. 重命名远程分支对应的本地分 ...

  5. ubuntu 18 环境下使用 @vue-cli 3.2 新建 vue 项目

    ubuntu 18 环境下使用 @vue-cli 3.2 新建 vue 项目 标签(空格分隔): Vue 首先安装全局@vue-cli工具: npm install -g @vue/cli 然后创建项 ...

  6. SQL专题

    1. 值为null的字段,假如update table set a=a+1,则会报sql错误 2. //todo

  7. websocket常见错误

    当websockt连接是open的时候send()方法传送数据,当连接关闭或获取不到的时候回抛出异常. 一个通常的错误是人们喜欢在连接open之前发送消息.如下所示: // 这将不会工作 var ws ...

  8. c++基础知识_c++11 类默认函数的控制："=default" 和 "=delete"函数

    #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <string> #include <vecto ...

  9. 从零开始Vue项目实战（二）-搭建环境

    1.下载node.js并安装 下载地址:https://nodejs.org/en/download/. 下载.msi 格式的直接连续下一步就可以了.安装完成后可以用 node -v 和 npm -v ...

  10. Type Syntax error, insert ")" to complete Expression

      今天倒持了 几个小时!    愣是 没有明确 ,为什么我的JSP的第一行没有代码?  还是报错!   错误是: Description Resource Path Location Type Sy ...