vue入门——组件基础todolist
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的更多相关文章
- 前端框架之Vue(9)-组件基础&vue-cli
组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...
- vue 父子组件 基础应用scrollball v-model sync
# 组件之间通信 可以通过 v-model 子组件可以通过 改变数据来改变父组件的数组 * v-model 子组件需要接受value属性,需要出发this.$emit("input&qu ...
- vue的组件基础
组件分为全局组件和局部组件. 组件的核心是template:所有的数据都为template服务. 父组件子组件传值:因为子组件是父组件的个标签,完全等同于添加动态属性: 然后子组件能够通过props: ...
- vue入门(二)----模板与计算属性
其实这部分内容我也是参考的官网:http://cn.vuejs.org/v2/guide/syntax.html,但是我还是想把自己不懂的知识记录一下,加深印象,也可以帮助自己以后查阅.所谓勤能补拙. ...
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue.js-09：第九章 - 组件基础再探（data、props）
一.前言 在上一章的学习中,我们学习了 Vue 中组件的基础知识,知道了什么是组件,以及如何创建一个全局/局部组件.不知道你是否记得,在上一章中,我们提到组件是一个可以复用的 Vue 实例,它与 Vu ...
- Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- 01慕课网《vue.js2.5入门》——基础知识
前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...
随机推荐
- 【路一直都在】----img标签垂直居中问题
先上代码 .dianshang ul li a { height: 100px; vertical-align:middle; display: table-cell; width: 1 ...
- Web开发——前后台异步调用
做web开发,最头疼的.最核心的部分或许就应该是前后台交互了,之前一直没弄明白,每次都不知道该如何去做.最近由于开发需要,加上有些朋友问起这个问题,不得不再次摸索前后台交互的方法.功夫不负有心人,总算 ...
- 跨平台移动开发_PhoneGap 警告,通知,鸣叫,振动4 种通知类型
创建鸣叫 使用 confirmation.beep 创建鸣叫 function playBeep() { navigator.notification.beep(1); } 创建振动 使用 ...
- HTML 5入门知识（二）
使用HTML 5结构标签 <article> <article>标签可以在网页中定义独立的内容,包括文章.博客和用户评论等.一个article元素通常有它自己的标题,一般放在一 ...
- 【Leetcode】【Easy】Remove Element
Given an array and a value, remove all instances of that value in place and return the new length. T ...
- Eclipse集成Maven（手工安装Maven且手工集成到Eclipse）
1.操作环境 操作系统:win8 64位 IDE:Helios Eclipse 1.8 JDK:1.6 2.资源准备 2.1 maven安装包: apache-maven-3.2.5-bin.zip ...
- python中的 if __name__ == “__main__”: 有什么用
https://stackoverflow.com/questions/419163/what-does-if-name-main-do# 问题: What does if name == " ...
- 一、Python安装下载
下载地址:https://www.python.org/downloads/ 因为Python3.X和2.X有部分不兼容,有些不向下兼容,现在3.5的资料和插件少,故我就学习的2.7.11了; 下载后 ...
- 保存Google、Bing翻译的语音
以Chrome浏览器+google翻译为例,bing的下载步骤也类似 1.打开google翻译页面(translate.google.com),输入一段文本,如下图 2.可以看到,右侧已经翻译好了,这 ...
- Codeforces Round #422 (Div. 2)
Codeforces Round #422 (Div. 2) Table of Contents Codeforces Round #422 (Div. 2)Problem A. I'm bored ...