VUE入门指北——(3)单文件组件.vue文件
有一定开发经验的朋友们,特别是有一定面向对象开发经验的,可以跳过中间大量繁琐语法的学习直接去看一些重点功能,毕竟实际开发中用到一些非重点功能的时候再回去看api文档就可以了。
所以从学习路径上来讲,推荐看单文件组件这部分,可以说,你的vue
开发直接进入中高级阶段。
任何有一定规模的,具备实际意义的vue项目,往往都会使用到单文件组件。
文件类型为.vue
基本理解
相似功能,可以抽象成一个组件,然后在不同地方使用的时候,都使用这个组件,只是传入的数据参数不同,进行不同的展示和相应的响应效果。
相对于一般的组件,单文件组件具有局部的仅属于自己的props
, data
,css
,用起来更加清爽,不用担心和别的模块参数混淆。
而且使用单文件组件,我们将得到:语法高亮,CommonJS模块,组件作用域的CSS
例子1
一般的vue文件写法,分为上中下三个部分,例如:
<template>
</template>
<script type="text/javascript">
</script>
<style lang="scss" scoped>
</style>
要注意的是这个例子只是说明结构,并无法运行起来。
最上面的<template>
部分是用来包裹界面显示部分,可以理解为view层。
中间的script
是JavaScript
层,可以理解为逻辑层,控制了界面内的交互,以及UI和数据的交互等等。
最下面的style
是CSS层,这里可以声明使用scss
语法,而scoped
则表明其定义只在当前界面生效,不会对其他界面产生影响。
例子2
下面是一个相对功能较多的例子:
<template>
<div v-if="opened">
<div @click="onClick">{{msg}}</div>
<xxxComponent></xxxComponent>
</div>
</template>
<script type="text/javascript">
import { mapState, mapActions } from "vuex";使用vuex
import xxxComponent from "./xxxComponent";
export default {
name:"page_template",
components: {
xxxComponent,
},
data() {
return {
msg: 'Hello',
}
},
props:{可传入参数
opened:{ 快捷绑定是否显示
type:Boolean,
default:false,
},
},
methods: {内部函数
onClick(){
this.$emit("onClick");
},
},
created(){页面创建
},
mounted(){页面挂载
},
</script>
<style lang="scss" scoped>
</style>
例子中,可以看到,一些组件的常用功能,也是vue的特点。
例如:
- 可传入参数:
props
定义了一些可传入的参数,例子中的opened
结合v-if
语句可以用来控制整个组件的div
是否可以显示。 - 内部数据参数:
data
中的msg
为这个component独有,不用担心和其他地方的msg重名而导致数据的相互影响。 - 如何对外发送消息:显示层中的click绑定了onClick函数,点击之后,对外还能再发送一个
onClick
消息。 - 如何引入其他组件:参考
xxxComponent
的写法 - 如何使用vuex:参考语句
import { mapState, mapActions } from "vuex";
。关于vuex
,之后另写一篇,专门讲。
关于松散耦合
根据官方文档原话,实际开发中,多数情况下,松散耦合的文件,(也就是这种.vue
文件的方式),写起来比完全拆开的3个文件更合理。
个人实际使用的体验也是如此,毕竟大多数组件,其内部的逻辑和其他模块关系不大,另起一个文件会导致需要同时关注的文件变得很多,这样开发过程需要来回切换,还得确认到底是否能够修改,反而拖慢开发速度。
当然,vue也支持拆开,拆开多个文件的写法如下:
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
例子3
实际使用例子中的组件。假设组件名为testComponent,在另外一个页面/组件中使用这个组件如下:
<template>
<testComponent :opened="open_test"></testComponent>
</template>
<script type="text/javascript">
import testComponent from "./testComponent";
export default {
components: {
testComponent,
},
data() {
return {
open_test: true,
}
},
}
</script>
此时,只要修改open_test的值,实际上会影响到testComponent
中opened
的值,将使得testComponent中的div显示或者隐藏。
此外要注意使用v-bind
的.sync
。可进行双向绑定。
参考官方文档.sync修饰符
官方参考资料
文档:https://cn.vuejs.org/v2/guide/single-file-components.html
视频:https://learning.dcloud.io/#/?vid=14