过滤器
过滤器: filter, 把{ { }}中的值进行处理, 返回新的值
<template>
<div>
<!-- abs: 绝对值 -->
<div>{
{ 9 | abs }}</div>
<div>{
{ -9 | abs }}</div>
</div>
</template>在 script 脚本中, 和data methods平级的 filters 方法用于存放过滤器, 配合 { { value | 过滤器 }} 语法
<script>
export default {
filters: {
// {
{ value | abs }}
abs(value) {
return value > 0 ? value : -value
},
},
}
</script>组件component
系统组件: div span h1 hr img ...
自定义组件: 利用系统组件组合出自己的组件, 可以复用
components: 此目录专门用于存放自定义组件
在 src 下面新建一个 component 文件夹
这样的一个结构, 在里面书写自定义组件
自定义组件的名称: 至少两个单词; 依赖大驼峰命名法区分单词, 大驼峰: XiAn 每个单词首字母大写因为: 系统组件/标签 都是1个单词; 自定义的组件为了区分, 所以要求至少两个单词
最后引入页面使用就可以了
<template>
<div>
<my-nav />
</div>
</template>
<script>
import MyNav from './components/MyNav.vue' //引入
export default {
components: {MyNav, mynav: MyNav},
}
</script>插槽
插槽: 一个占位符; 使用时才会替换成实际的值
<template>
<div class="my-slot">
<div class="header">
<!-- 默认插槽 -->
<slot />
</div>
<div class="main">
<div class="left">
<!-- 命名插槽: 通过name属性 为 slot 组件添加名字 -->
<slot name="suibian" />
</div>
<div class="right">
<slot name="right" />
</div>
</div>
</div>
</template>props
props: 属性选项, 用于为自定义组件 声明 属性
<template>
<div :class="`my-alert ${ type }`">
<span>
<slot />
</span>
<div>sui: {
{ sui }}</div>
<div>bian: {
{ bian }}</div>
</div>
</template>
<script>
export default {
props:['sui', 'bian', 'type'],
}
</script>监听器watch
监听器: 实时监听属性的变化
<template>
<div>
<button @click="num++">{
{ num }}</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
}
},
// 监听器
watch: {
num(to, from){
console.log('to:', to);
console.log('from:', from);
},
},
}
</script>
<style lang="scss" scoped>
</style>两个参数: 要监听的属性名: 变化时触发的函数
to为新值 from为旧值