学习笔记03：单文件组件

最新推荐文章于 2024-09-11 12:42:08 发布

Despais.

最新推荐文章于 2024-09-11 12:42:08 发布

阅读量1.1k

点赞数 47

文章标签：笔记学习 vue.js

本文链接：https://blog.csdn.net/2202_75975206/article/details/136991887

版权

一、工程化（搭建脚手架环境）

二、单文件组件（Single File Component SFC）

1.后缀必须是.vue
2.单文件组件分为三个部分：template标签、script标签、style标签
3.template标签里包裹的是HTML部分
4.style标签里如果有scoped属性，表示样式只在当前组件生效

三、工具安装以及创建项目

工具安装

全局安装vue-cli项目生成工具
npm i -g @vue/cli

检查是否安装成功
vue --version或者vue -V

创建项目（以自身需求为准进行配置）

进入指定目录中(英文目录不要有空格及中文)执行如下命令

vue create 项目名称(创建时会自动以对应的项目名称生成目录)

四、组件的注册使用

一、Vue中的组件按类型可分为全局组件和局部组件
1.全局组件：可以在项目中的任意.vue文件中使用
2.局部组件：只可以在当前.vue文件中使用

二、组件的使用分为三步骤（代码如下示例）
1.导入所需组件
2.注册组件（全局注册和局部注册）
3.调用注册完成的组件

导入
import 组件对象 from "组件所在路径"

注册
全局组件在入口文件main.js中注册
Vue.component("组件名称"，组件对象)

局部组件注册在需要使用外部组件的那个组件自身中注册  
export default {                 
    components: {
        标签名称: 组件对象
    }
}

调用
<template>
	<组件名称></组件名称>
</template>

五、组件常用属性

1.computed
用来定义计算属性，计算属性的结果会被缓存。当依赖的响应式数据发生变化时，computed才会重新计算更新数据，否则使用缓存。

computed与methods的区别
1.computed依赖数据发生改变，才会重新进行计算，否则直接返回之前的计算结果。而methods里的函数在每次调用时候都要执行
2.computed的调用像属性一样访问，methods必须以函数的形式调用
3.计算属性有缓存，方法没有缓存

2.watch
用于定义监听器来监听data中数据的变化（代码如下示例）

export default {
    watch: {
        data中数据的属性名 函数
    }
}

如果监听的是复杂数据类型，则需要使用深度监听（代码如下示例）

export default {
    watch: {
        data中对象属性名: {
            deep: true,
            handler(newValue,oldValue){                
            }
        }
    }
}

3.filter
该属性用于定义过滤器，它是一个处理和格式化数据的工具

export default {
    filters: {
        过滤器名 函数
    }
}

定义过滤器后可以在template模板中与插值表达式一起使用，也可以传递实参

{{插值表达式 | 过滤器名}}
{{插值表达式 | 过滤器名(实参1，实参2，...)}}

1.过滤器至少有一个形参，形参为需要处理或格式化的数据
2.使用过滤器时，如果实参有n个，那么形参应该有n+1个；其中第一形参必定是待处理的数据，而后的形参与实参一一对应
3.必须有返回值

4.directive
用于自定义指令；分为全局自定义指令和局部自定义指令

全局自定义指令，在入口文件main.js中导入并注册使用

import 指令对象 from '路径'
//全局指令注册语法：Vue.directive(指令名,指令对象)
Vue.directive('指令名', 指令对象)

局部自定义指令

export default {
    directives: {
        // 不带v-的指令名: 包含指令处理程序的对象
    }
}

自定义指令支持以下钩子函数（在特定的时间触发并自动执行的函数）

bind，当指令首次与标签元素绑定的时候触发
inserted，当标签元素被插入完成后触发（与bind的区别在于是否可以获取父节点）
update，当标签元素更新时触发
componentUpdated，当组件更新完毕后触发
unbind，当指令与标签解绑时触发

钩子函数支持两个形参

el：指令宿主对应的DOM元素
binding：指令绑定的对象，可以通过该对象获取指令的名称、表达式等信息

5.mixin
该属性用于定义混入，所谓混入就是组件配置选项的一种复用方式；分为全局混入和局部混入

全局混入语法
Vue.mixin(混入对象)

局部混入语法
export default {
    mixins: [混入对象1,混入对象2,....]
}

在一个混入对象被混入到一个组件的时候，混入对象中的选项可能与组件自身的选项存在冲突的情况；在这种情况下，混入操作会按照固定的合并策略进行冲突合并：
1.如果冲突发生在data数据中，则以组件自身的data数据为准
2.如果是对象属性发生冲突（如methods、computed、filters等）则会合并成一个对象属性，如对象属性中的属性存在同名则以组件自身的为准
3.如果生命周期出现冲突，在执行的时候混入对象中的生命周期函数会优先于本组件执行