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?Apple设备检测示例代码
Nov 15 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
JS常用表单验证方法总结
May 22 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
element-ui点击查看大图的方法示例
Dec 14 Javascript
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中的登陆login
2007/01/18 PHP
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
2015/11/30 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
Canvas + JavaScript 制作图片粒子效果
2017/02/08 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
element-ui点击查看大图的方法示例
2020/12/14 Javascript
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
python 日志增量抓取实现方法
2018/04/28 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
Python中six模块基础用法
2019/12/08 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
庆国庆活动总结
2014/08/28 职场文书
2014年英语工作总结
2014/12/20 职场文书
员工自我工作评价
2015/03/06 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
MySQL慢查询的坑
2021/04/28 MySQL
Python import模块的缓存问题解决方案
2021/06/02 Python
Win11显卡控制面板打开显卡设置方法
2022/04/20 数码科技