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进行开发的一些前期需要的技术储备进行简单 ...
随机推荐
- 一.编译nginx
前往nginx.org下载需要的nginx版本,解压之后目录如下: auto : 主要存放辅助configure脚本执行时的文件, 例如判定nginx支持的模块,操作系统可供nginx使用的特性等. ...
- python列表推导式的if-else
a=[i for i in range(10) if i%2==0]print(a)a=[i if i%2==0 else 'qi' for i in range(10)]print(a) 结果:[0 ...
- CSS3悬停特效合集Hover.css
CSS3悬停特效合集Hover.css是一款特效丰富,支持2D变化特效.边框特效.阴影特效等: 使用简单,可直接复制相关特效代码,快速应用到元素上. 源码地址:http://www.huiyi8.co ...
- hdu 4704 sum（费马小定理+快速幂）
题意: 这题意看了很久.. s(k)表示的是把n分成k个正整数的和,有多少种分法. 例如: n=4时, s(1)=1 4 s(2)=3 1,3 3,1 2,2 s ...
- tensorflow knn mnist
# MNIST Digit Prediction with k-Nearest Neighbors #----------------------------------------------- # ...
- struts2 validate手动验证
我们前面学习struts2知道,struts2通过拦截器实现了一些验证操作. 比如,如果是不能转换的类型在action中接受的话会跳转到错误页面,错误信息中会包含对应的错误信息,例如: 首先我们了解一 ...
- Stop logging "internal dummy connection" in Apache
Apache 2.x keeps child processes alive by creating internal connections which appear in the log file ...
- 二：apache的Qpid消息中间件介绍
一:什么是Qpid?--->Qpid 是 Apache 开发的一款面向对象的消息中间件,它是一个 AMQP 的实现,可以和其他符合 AMQP 协议的系统进行通信.--->Qpid 提供了 ...
- 2084. Asm.Def的基本算法
2084. Asm.Def的基本算法 传送门 ★☆ 输入文件:asm_algo.in 输出文件:asm_algo.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] ...
- javaCV入门指南：调用FFmpeg原生API和JavaCV是如何封装了FFmpeg的音视频操作？
通过"javaCV入门指南:序章 "大家知道了处理音视频流媒体的前置基本知识,基本知识包含了像素格式.编解码格式.封装格式.网络协议以及一些音视频专业名词,专业名词不会赘述,自行搜 ...