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. 关于Activity

    Activity与界面 1.Activity相当于浏览器的标签.相当于空白的网页,界面相当于浏览器内的网页. 2.将Activity与界面绑定就相当于在浏览器内填写了相应的网页. 3.Activity ...

  2. SetupFactory7使用经验

    1.        exe默认产生快捷方式,可以点击去掉. 2.        默认英语,可与选汉语 3.        编码逻辑 安装程序复制完程序文件后,从编辑框中得到数据,并写ini文件 屏幕- ...

  3. 向jsp页面传值时出现乱码

    在一个html页面中用表单向jsp页面传值: 这是html页面 <html> <head> <title>MyBeans.html</title> &l ...

  4. SharePoint2010 HTTP Error 503. The service is unavailable 解决方法

    1.更改系统管理员用户密码前提 因为更改系管理员用户密码会影响到 "SharePoint2010"正常运行,所在尽量不要更改系统管理员用户的密码, 必须更改密码的话,需要注意以两点 ...

  5. nagios外部命令接口

    http://nagios.manubulon.com/traduction/docs14en/extcommands.html https://old.nagios.org/developerinf ...

  6. 关于使用metronic时里modal模拟框使用ueditor时不能全屏的情况

    ueditor里有这么断代码, 1.初始显示状态下(非全屏),修改一下代码的z-index UE.Editor.defaultOptions = function(editor){ var _url ...

  7. 路由 vue-router

    vue-router官方文档 1.router跳转页面 编程式的导航 this.$router.push('/index'); 2.mode Router构造配置 const router = new ...

  8. 玩转web之ligerui(一)---ligerGrid又一次指定url

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u012116457/article/details/27109227 请珍惜小编劳动成果.该文章为小 ...

  9. 2018.12.21 如何在现有的Eclipse（4.9.0版本）中安装STS （Spring Tool Suite ） Mac环境下

    在Eclipse中安装STS正确步骤实现方式 1.简介说明       spring Tool Suite(sts)就是一个基于Eclipse的开发环境, 用于开发Spring应用程序.它提供了一个现 ...

  10. 2018.11.30 zsh: command not found: mysql 的解决办法mac环境下

    系统环境变量的问题.解决办法: 1.打开终端.输入open .zshrc 会出现一个可编辑文档, 2.找到# User configuration部分,在下一行添加source ~/.bash_pro ...