[前端笔记034]vue2之组件

最新推荐文章于 2024-05-29 17:47:53 发布

Plusmile1

最新推荐文章于 2024-05-29 17:47:53 发布

阅读量216

点赞数

分类专栏：前端文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/qq_29589765/article/details/129536908

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

前言

本笔记参考视频，尚硅谷:BV1Zy4y1K7SH p53 - p66

简介

用来实现局部功能的代码和资源的集合；可以复用编码，简化项目编码，提高运行效率
当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用
当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

非单文件组件

Vue中使用组件的三大步骤：
1. 定义组件(创建组件)
2. 注册组件
3. 使用组件(写组件标签)
如何定义一个组件？
1. 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别：
2. el不要写，为什么？最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
3. data必须写成函数，为什么？避免组件被复用时，数据存在引用关系
如何注册组件？
1. 局部注册：new Vue的时候传入components选项
2. 全局注册：Vue.component(‘组件名’,组件)
编写组件标签：

关于组件名

一个单词组成：
1. 第一种写法（首字母小写）：school
2. 第二种写法（首字母大写）：School
多个单词组成：
1. 第一种写法（kebab-case命名）：my-school
2. 第二种写法（CamelCase命名）：MySchool （需要Vue脚手架支持）
备注：
1. 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
2. 可以使用name配置项指定组件在开发者工具中呈现的名字
关于组件标签：
1. 第一种写法：
2. 第二种写法：
备注：不使用脚手架时，会导致后续组件不能渲染
一个简写方式：const school = Vue.extend(options)可简写为：const school = options

关于VueComponent

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！

关于this指向

组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象

一个重要的内置关系

前置知识，原型链：
一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法

单文件组件

文件后缀.vue，然后将 .vue =>.js，实现这一步可以自己webpack搭建工作流，但最好使用vue搭建好的webpack，也就是脚手架
.vue文件的命名同组件的命名，推荐首字母大写的那两个写法
vsCode 安装vue的高亮插件 vetur
单文件集合了html、css和js，分别用 <template>、<style>和<script>，解决了非单文件组件中样式不能跟着组件走的问题
必须有App.vue，作为一人之下万人之上，
结构，main.js 入口、index.html存放main.js、组件老大App.vue、其他组件
School.vue

<template>
    <div id='Demo'>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    export default { //三种暴露方式，单个暴露，多个暴露，和默认暴露(常用，引入时不需要花括号)
        name:'School',
        data() {
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>

<style>
    #Demo{
        background: orange;
    }
</style>

App.vue:

<template>
    <div>
        <School></School>
    </div>
</template>

<script>
    import School from './School.vue'
    export default {
        name:'App',
        components:{
            School,
        }
    }
</script>

main.js

import App from './App.vue' 
new Vue({ template:`<App></App>`, el:'#root', components:{App} })

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单文件组件练习</title>
</head>
<body>
    <div id="root"></div>
    <script src="../../js/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>

上面无法正常运行，因为浏览器不支持模块化，需要使用脚手架。

Plusmile1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[前端笔记034]vue2之组件

p53 - p66用来实现局部功能的代码和资源的集合；可以复用编码，简化项目编码，提高运行效率当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。
复制链接

扫一扫