vuejs组件
<div id='root'>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
template:'<li>item</li>'
})
</script>
<div id='root'>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
var todoItem = {
template:'<li>item</li>'
}
new Vue({
el:'#root',
components:{
'todo-item':todoItem
}
})
</script>
<div id='root'>
<input v-model='inputValue'/>
<button @click='handleSubmit'>提交</button>
<ul>
<todo-item
v-for='(item,index) of list'
:key='index'
:content='item'
:index='index'
@delete='handleDelete'
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(index){
this.$emit('delete',index)
}
}
}) new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
console.log(this.inputValue);
this.list.push(this.inputValue);
this.inputValue = '';
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>
vuejs组件的更多相关文章
- 深入理解 Vuejs 组件
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 组件的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 深入理解 Vue ...
- Vuejs——(8)Vuejs组件的定义
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- vuejs组件库pk介绍
vuejs可以说是近2年多以来最火的前端框架,随之而来就产生了非常多的组件库,我们来看看其中比较著名和人气旺盛的几个 1. Vuetify-符合material design设计理念, star数量7 ...
- vuejs 组件通讯
在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA(single-page application 简称为 SPA)中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时 ...
- vuejs组件交互 - 01 - 父子组件之间的数据交互
父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit ...
- Vuejs - 组件式开发
初识组件 组件(Component)绝对是 Vue 最强大的功能之一.它可以扩展HTML元素,封装可复用代码.从较高层面讲,可以理解组件为自定义的HTML元素,Vue 的编译器为它添加了特殊强大的功能 ...
- VueJs组件prop验证简单理解
今天看了vuejs的组件,看到了prop组件,主要作用是在传入数据的时候对传入的值做判断,写了个小例子. <div id="app"> <my-child :nu ...
- 给定制的vuejs组件添加v-model双向绑定支持
用过vuejs的前端工程师,对于v-model一定印象深刻.它向类似textarea,input等原生html原生添加双向数据绑定的能力非常方便.但是对于你的定制vue组件并不是能够直接应用v-mod ...
- [Vuejs] 组件 v-if 和 v-show 切换时生命周期钩子的执行
v-if 初始渲染 初始值为 false 组件不会渲染,生命周期钩子不会执行,v-if 的渲染是惰性的. 初始值为 true 时,组件会进行渲染,并依次执行 beforeCreate,created, ...
- vuejs组件交互 - 03 - vuex状态管理实现组件交互
组件交互模式的使用场景 简单应用直接使用props down,event up的模式就可以了 小型应用使用事件中心模式即可 中大型应用使用vuex的状态管理模式 vuex 包含要管理的应用数据和更新数 ...
随机推荐
- CF 979D Kuro and GCD and XOR and SUM(异或 Trie)
CF 979D Kuro and GCD and XOR and SUM(异或 Trie) 给出q(<=1e5)个操作.操作分两种,一种是插入一个数u(<=1e5),另一种是给出三个数x, ...
- PostGIS安装 pgis3.4.2 postgresql 10.1
https://yq.aliyun.com/articles/228258http://download.osgeo.org/postgis/source/http://blog.51cto.com/ ...
- Javascript专题(三)b.各种轮播和细节分析--上下滚动轮播
这一次,我们用原生JS实现上下滚动方式的轮播.顺带学习一下用JS来创建HTML元素. 上一次写的轮播是淡入淡出效果的,相对来说其实是比较简单的. github源码: 上下轮播源码-github A. ...
- Oracle 11g安装报错Environment variable: "PATH"
Environment variable: "PATH" - This test checks whether the length of the environment vari ...
- UVALive - 6440
题目链接:https://vjudge.net/contest/241341#problem/G Indonesia, as well as some neighboring Southeast As ...
- 【Java密码学】Java SE 6中XML数字签名的实现
package test.xml.signature; import java.io.File; import java.io.FileInputStream; import java.io.File ...
- Python 配置文件加载且自动更新(watchdog)
安装依赖:pip install watchdog #!/usr/bin/env python3 # -*- coding: utf-8 -*- import logging import os im ...
- opencv——IplImage结构
一.作业要求: 采用MATLAB或opencv+C编程实现.每一题写明题目,给出试验程序代码,实验结果图片命名区分并作出效果比对,最后实验总结说明每一题蕴含的图像处理方法的效果以及应用场合等. 采用M ...
- [知乎作答]·关于在Keras中多标签分类器训练准确率问题
[知乎作答]·关于在Keras中多标签分类器训练准确率问题 本文来自知乎问题 关于在CNN中文本预测sigmoid分类器训练准确率的问题?中笔者的作答,来作为Keras中多标签分类器的使用解析教程. ...
- 八个cmd 命令
一,ping 它是用来检查网络是否通畅或者网络连接速度的命令.作为一个生活在网络上的管理员或者黑客来说,ping命令是第一个必须掌握的DOS命令,它所利用的原理是这样的:网络上的机器都有唯一确定的IP ...