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进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- dotnet core on Linux 环境搭建及入门demo
首先感谢张善友大大提供的腾讯云实验室链接(https://www.qcloud.com/developer/labs/list). 以下是整个搭建过程及简单demo实例 1.搭建 .NET Core ...
- 51nod 1189
题目 神犇题解 表示自己数论渣成狗...膜拜神犇. n!*(x+y)=x*y n!^2=(x-n!)*(y-n!) 那么求出n!^2的因数个数就可以了.
- vue-awesome-swiper的使用以及API整理
一.先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4&q ...
- unix下面是常用命令及简单说明
摘自:http://blog.sina.com.cn/s/blog_629b80af01018k7x.html 命令 功能简述 acctcom 等于进程记帐文件 accton 启动或中止记帐进程 ad ...
- 实现远程连接MySQL
首先登录远程服务器,然后登录mysql:mysql -u用户 -p密码; 创建允许远程登录的用户并赋权:grant all privileges on 数据库.表名 to 用户名@'IP地址' ide ...
- (转)C++经典面试题（最全，面中率最高）
1.new.delete.malloc.free关系 delete会调用对象的析构函数,和new对应free只会释放内存,new调用构造函数.malloc与free是C++/C语言的标准库函数,new ...
- C++中两个类相互包含引用问题
在构造自己的类时,有可能会碰到两个类之间的相互引用问题,例如:定义了类A类B,A中使用了B定义的类型,B中也使用了A定义的类型 class A { int i; B b; } class B { in ...
- MAC OS Sierra 10.12.6 下对固态硬盘SSD 开启TRIM功能
这个是对于不是mac原装SSD的情况下才做的操作... 大家都知道,苹果店卖的SSD硬盘那怕就是一个256G的也要1000多人民币,而市场上的也就400-500左右人民币,整整少了一半还要多,可见JS ...
- CodeForces 547E：Mike and Friends（AC自动机+DFS序+主席树）
What-The-Fatherland is a strange country! All phone numbers there are strings consisting of lowercas ...
- Spring笔记02（3种加载配置文件的方式）
1.不使用Spring的实例: 01.Animal接口对应的代码: package cn.pb.dao; /** * 动物接口 */ public interface Animal { //吃饭 St ...