Vue-组件化应用构建
来源:互联网 发布:世宗大王级驱逐舰知乎 编辑:程序博客网 时间:2024/05/30 02:26
组件系统是一种抽象,允许我们使用小型、自包含和通常可复用的组件构建大型应用
创建组件
//定义名为todo-item的新组件Vue.component('todo-item',{ template:<li>这是一个代办项</li>})
构建组件模板
<ol> <todo-item></todo-item></ol>
但是在河阳会为每个代办项创建相同的文本,所以我们来修改一下组件的定义,使之能接受一个属性
Vue.component('todo-item', { // todo-item 组件现在接受一个 // "prop",类似于一个自定义属性 // 这个属性名为 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>'})
现在我们用v-bind指令将代办项传到每一个重复的组件
<div id="app-7"> <ol> <!-- 现在我们为每个 todo-item 提供待办项对象 待办项对象是变量,即其内容可以是动态的。 我们也需要为每个组件提供一个“key”,晚些时候我们会做个解释。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol></div>
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其他什么人吃的东西' } ] }})
这只是一个假设的例子,我们已经设法将应用分割成了更小的两个单元,子单元通过props接口实现了父单元很好的解耦,
阅读全文
0 0
- Vue-组件化应用构建
- vue用组件构建应用
- Vue.js--基本命令&组件化应用构建
- 组件化应用构建
- [Vue.js启航]——多组件应用构建
- 使用 vue 构建 video 组件
- vue-cli 构建web应用
- Webpack + vue-loader构建单文件vue组件
- Webpack + vue-loader构建单文件vue组件
- Webpack + vue-loader构建单文件vue组件
- Vue构建单页应用最佳实战
- Vue构建单页应用最佳实战
- VUE起步构建简单单页应用
- Vue.js使用vue-router构建单页应用
- vue.js+vue-router+sea.js构建SPA应用
- vue-cli 快速构建vue应用,实现webpack打包
- Vue.js使用vue-router构建单页应用
- axios在Vue组件中应用
- Spark成长之路(7)-Hypothesis testing
- 爬取代理ip
- 新建jsp报错“The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path”
- CTF实验吧-登陆一下好吗??【false SQL注入】
- 2017 年中总结
- Vue-组件化应用构建
- CodeForces
- linux系统top命令分析CPU和内存详解
- linux 用户空间与内核空间——高端内存详解
- c#程序打包成可执行文件
- mysql函数+定时器
- 44-扑克牌的顺序
- java线上服务问题排查
- 接口面试