vue写一个组件


Posted in Javascript onApril 09, 2018

写一个vue组件

我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目。如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli。

一个完整的vue组件会包括一下三个部分:

  1. template:模板
  2. js: 逻辑
  3. css : 样式

每个组件都有属于自己的模板,js和样式。如果将一个页面比喻成一间房子的话,组件就是房子里的客厅、卧室、厨房、厕所。如果把厨房单独拿出来的话,组件又可以是刀、油烟机...等等。就是说页面是由组件构成的,而组件也可以是组件构成的。这样就可以非常的灵活,耦合性也非常的低。

先来看看一个组件在不是.vue文件内的写法:

Vue.component('simple-counter', {
 template: '<div id="inputBox"><input type="text"></div>',
 data () {   // 数据
 return {
  counter: 0
 }
 },
 methods: {
 // 写点方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
})

template是用来干嘛的呢?

<template>
 <div id="inputBox">
 <input type="text">
 </div>
</template>
<!--
template就是这个组件的html,也就是下面部分(vue-loader会将template标签下的内容解析出来):
-->
<div id="inputBox">
 <input type="text">
</div>
<!--
 对应原生写法的话,就是template内的dom字符串
-->

js部分

export default {
 data () {
 return {
  counter: 0
 }
 },
 methods: {
 // 方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法,不懂的可以先去了解es6的模块化

css部分

<style lang="scss" scoped>
...样式
</style>

<!--这里的你可以使用scss(CSS扩展语言)只要安装"sass-loader"和"node-sass"这两个npm包就好了,vue-cli已经配好相关参数了。如果想使用less或其它css扩展语音,只要装好各自的编译包就好了。而scoped是让css的作用域只在该文件下。-->

引入

要怎么在其它组件引用该组件?

组件一(button.vue)

<template>
 <div class="button">
 <button @click="onClick">{{text}}</button>
 </div>
</template>
<script>
export default {
 props: ['text'],   // 获取父组件的传值
 data () {
 return {

 }
 },
 methods: {
 onClick () {
  console.log('点击了子组件')
 }
 }
}
</script>
<style lang="scss" scoped>
.button {
 button {
 width: 100px;
 }
}
</style>

组件二(box.vue)

<template>
 <div class="box">
 <v-button :text="text"></v-button>    <!--使用组件并传值(text)-->
 </div>
</template>
<script>
import Button from './button.vue'  // 引入子组件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按键的name'
 }
 },
 methods: {

 }
}
</script>

总结

以上所述是小编给大家介绍的vue组写一个组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
javascript中clone对象详解
Dec 03 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
Apr 14 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue 中使用 CSS Modules优雅方法
Apr 09 #Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 #Javascript
vue脚手架及vue-router基本使用
Apr 09 #Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 #Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 #Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 #Javascript
webpack 模块热替换原理
Apr 09 #Javascript
You might like
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
Python笔记之观察者模式
2019/11/20 Python
CSS3实现图片抽屉式效果的示例代码
2019/11/06 HTML / CSS
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
校庆筹备方案
2014/03/30 职场文书
个人承诺书怎么写
2014/05/24 职场文书
幼儿园运动会口号
2014/06/07 职场文书
文明寝室标语
2014/06/13 职场文书
药店促销活动策划方案
2014/08/24 职场文书
假释思想汇报范文
2014/10/11 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
Python中的程序流程控制语句
2022/02/24 Python
部分武汉产收音机展览
2022/04/07 无线电