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进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- BZOJ 3251 树上三角形：LCA【构成三角形的结论】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3251 题意: 给你一棵树,n个节点,每个点的权值为w[i]. 接下来有m个形如(p,a,b ...
- 一个坑：sql中问号(?)传参和 美元符号传参(${})的区别
? 可能会把参数加一对引号,不忽略前后空格? ${}是字符串拼接,好处是字符串前后的空格会被忽略... 但拼接有可能导致SQL注入
- [acm]HDOJ 1200 To and Fro
题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=1200 简单字符串处理,找规律 /* 11509672 2014-08-21 11:32:55 Acc ...
- NO2：设置RedHat Linux下的samba开机启动
安装的samba默认不是开机启动的,这样每次都要进入系统人为启动,很不方便,当然系统肯定可以设置开机启动的. 因为我的是RedHat Linux系统,支持chkconfig命令直接配置,会简单些,其它 ...
- BZOJ_1999_[Noip2007]Core树网的核_单调队列+树形DP
BZOJ_1999_[Noip2007]Core树网的核_单调队列+树形DP Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T ...
- Codeforces 756C Nikita and stack
Codeforces 756C Nikita and stack 题目大意: 给定一个对栈进行操作的操作序列,初始时序列上没有任何操作,每一次将一个本来没有操作的位置变为某一操作(push(x),po ...
- 【Lintcode】159.Find Minimum in Rotated Sorted Array
题目: Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 ...
- BZOJ1018：[SHOI2008]堵塞的交通
浅谈树状数组与线段树:https://www.cnblogs.com/AKMer/p/9946944.html 题目传送门:https://www.lydsy.com/JudgeOnline/prob ...
- bzoj 4319 Suffix reconstruction —— 贪心构造
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4319 思维还是不行...这样的构造都没思路... 首先,我们可以按 rank 的顺序从小到大 ...
- cocos2dx 3.0 用ClippingNode做游戏的新手引导
转自:http://blog.csdn.net/star530/article/details/20851263 本篇介绍的是用ClippingNode 做游戏的新手引导,额,或者说是做新手引导的一种 ...