vue教程2-组件化开发
全局组件
<div id="app">
<cs1></cs1>
</div> <script> Vue.component('cs1',{
data(){return {count:0}},
template:'<button @click="count++">this is global component {{ count }}</button>'
}
) new Vue({
el: '#app',
}
)
</script>
#在组件开发中，data用data(）{}函数，如果用参数，会在不同组件之间混用。
#组件cs1会把<cs1></cs1>替换掉。
props
<div id="app">
<!-- cs1组件可以复用，每次创建一个vue实例 -->
<cs1 title="jdango入门"></cs1>
<cs1 title="python入门"></cs1>
<cs1 title="vue入门"></cs1>
</div> <script> Vue.component('cs1',{
// 父组件cs1的数据通过props传给子组件
// 子组件声明props
// 将title属性渲染到template中，然后替换父组件cs1
props:['title'],
template:'<h2>{{title}}</h2>'
}
) new Vue({
el: '#app',
}
)
</script>
动态props
<div id="app">
<!-- 在cs1父组件中，便利posts中的每个字典，然后用v-bind动态绑定 -->
<cs1
v-for='post in posts'
v-bind:title='post.title'
></cs1>
</div> <script> Vue.component('cs1',{
props:['title'],
template:'<h2>{{title}}</h2>'
}
) new Vue({
el: '#app',
data:{
posts:[
// 在实际应用中，以下内容可能是从api获取的一个嵌套字典的列表
{id:1,title:'jdango入门'},
{id:2,title:'vue获取api'},
{id:3,title:'python socket原理'},
]
}
}
)
</script>
局部组件
<div id="app">
<cs1
v-for='post in posts'
v-bind:key='post.id'
v-bind:title='post.title'
></cs1>
</div> <script> //创建一个局部组件，在vue中调用，只有这个vue实例可使用
var PostItem = {
props:['title'],
template:'<h2>{{title}}</h2>'
} new Vue({
el: '#app',
data:{
posts:[
{id:1,title:'jdango入门'},
{id:2,title:'vue获取api'},
{id:3,title:'python socket原理'},
]},
components:{'cs1':PostItem}
}
)
</script>
组件通信
props参数使父组件向子组件传递数据，如果要让子组件向父组件传递数据，就要用到emit
<body>
<div id="app">
<div>
<ul>
<!-- 第二步：子组件触发的@remove，然后触发根组件的removeItem方法 -->
<cs1 v-for='post in posts' :key='post.id' :title='post.title' @remove='removeItem'></cs1>
</ul>
</div>
</div> <script> // 创建一个局部组件，每个模板中有一个父组件传递过来的title，和一个触发remove方法的按钮
// 第一步：在remove方法中，会使用emit方法向父组件触发remove方法，并带上本实例的title参数
var PostItem = {
props:['title'],
template:`
<li>
<h2>现在开始学习：{{title}}</h2>
<button @click='remove'>remove</button>
</li>
`,
methods:{
remove(){
this.$emit('remove',this.title)
}
}
} new Vue({
el: '#app',
data:{
posts:[
{id:1,title:'jdango入门'},
{id:2,title:'vue获取api'},
{id:3,title:'python socket原理'},
],
},
components:{'cs1':PostItem},
methods:{
removeItem(titleText){
// 第三步：titleText是传递过来的参数，过滤掉this.posts中这个参数，然后实时同步到html中
this.posts = this.posts.filter(function(post) {
return post.title !== titleText
})
}
}
})
</script>
</body>
vue教程2-组件化开发的更多相关文章
- Vue 入门之组件化开发
Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...
- vue.js原生组件化开发（一）——组件开发基础
前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...
- vue.js原生组件化开发（二）——父子组件
前言 在了解父子组件之前应先掌握组件开发基础.在实际开发过程中,组件之间可以嵌套,也因此生成父子组件. 父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件chi ...
- vue（9）—— 组件化开发 - webpack（3）
前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- vue（8）—— 组件化开发 - webpack（2）
webpack的常用loder和插件 loder和插件是什么,现在暂且不表,看到后面你就懂了 引入css问题 直接用link标签导入css 在前面的 vue(7)—— 组件化开发 — webpack( ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- win10专业版激活（亲测可用）
1.slmgr.vbs /upk 2.slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 3.slmgr /skms zh.us.to 4.slmgr /ato
- 带动画效果的jQuery手风琴
带动画效果的jQuery特效手风琴是一款带动画效果的手风琴作品,非常实用,可以用在新闻列表.FAQ等模块,默认的是打开第一个选项,查看其它的时候直接点击加号按钮就展开. 源码地址:http://www ...
- HTML5 SVG实现过山车动画
HTML5 SVG实现过山车动画是一款jQuery特效很酷的HTML5 SVG动画,这款HTML5动画是过山车效果,主要是利用了SVG的path动画来实现的,效果非常酷. http://www.hui ...
- Python 连接Oracle数据库
连接:python操作oracle数据库 python——连接Oracle数据库 python模块:cx_Oracle, DBUtil 大概步骤: 1. 下载模块 cx_Oracle (注意版本) ...
- HihoCoder1672 : 区间问题（[Offer收割]编程练习赛41）（贪心）
时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定N个区间[Ai, Bi],请你找到包含元素最少的整数集合S,使得每个区间都至少有两个整数在S中. 例如给定三个区间[1 ...
- CF331B Cats Transport[斜率优化dp+贪心]
luogu翻译 一些山距离起点有距离且不同,m只猫要到不同的山上去玩ti时间,有p个铲屎官人要去把所有猫接走,步行速度为1单位每秒,从1走到N座山不停下,必须在猫玩完后才可以把他带走.可以提前出发.问 ...
- ACM学习历程—ZOJ3878 Convert QWERTY to Dvorak（Hash && 模拟）
Description Edward, a poor copy typist, is a user of the Dvorak Layout. But now he has only a QWERTY ...
- RabbitMQ的持久化机制
一.问题的引出 RabbitMQ的一大特色是消息的可靠性,那么它是如何保证消息可靠性的呢?——消息持久化.为了保证RabbitMQ在退出,服务重启或者crash等异常情况下,也不会丢失消息,我们可以将 ...
- javaCV开发详解之8：转封装在rtsp转rtmp流中的应用（无须转码，更低的资源消耗）
javaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG.j ...
- poj2777Count Color——线段树+状压
题目:http://poj.org/problem?id=2777 状压每个颜色的选择情况,取答案时 | 一番: 注意题目中的区间端点可能大小相反,在读入时换一下位置: 注意pushdown()中要l ...