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基础语 ...
随机推荐
- json中定义数组
我们经常会看到在js中定义普通函数: function f1(a,b){ console.log(a+b); } f1(); 今天我们看一下如何在json里边定义函数并调用: var json = { ...
- webstorm 配置Vue.js 语法提示
标签属性 v-text v-html v-once v-if v-show v-else v-for v-on v-bind v-model v-ref v-el v-pre v-cloak v-on ...
- Java 重写hashCode() 时为什么要用 31 来计算
在OSChina 中看到了一篇文章<Java 中正确使用 hashCode 和 equals 方法>,看到 hashCode 的方法体内的31比较有意思. 在Stackoverflow上找 ...
- 从软件工程师的角度看MacBook Air的几个设计亮点
我多年从事软件开发和运营工作,从未跟“设计”间断过.现在在设计一个全新saas产品:超级表格(www.domypp.com).最近买了台苹果最新款的笔记本电脑MacBook Air,从该产品功能设计和 ...
- 18_Condition条件
[简述] wait()和notify()方法是和synchronized关键字合作使用的. Condition是和重入锁相关联的,通过ReentrantLock.newCondition()生成一个与 ...
- Steps of source code change to executable application
程序运行的整个过程,学习一下 源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 汇编程序 (assembler) → 目标代码 (o ...
- 关于maven包的引入net.sf.json的问题
最开始通过在pom.xml文件中加入 <dependency> <groupId>net.sf.json-lib</groupId> <artifactId& ...
- Java环境路径配置--转载
windows环境中JDK环境变量配置 一.环境准备 Windows10 jdk-9.0.1 二.下载并安装JDK 到Java的官网下载JDK安装包,地址:http://www.oracle.co ...
- python大数据
http://blog.csdn.net/xnby/article/details/50782913 一句话总结:spark是一个基于内存的大数据计算框架, 上层包括了:Spark SQL类似Hive ...
- February 24 2017 Week 8 Friday
If you fail, don't forget to learn your lesson. 如果你失败了,千万别忘了汲取教训. Frankly speaking, it is easy to ta ...