DEV Community: huyixi

Vue的组件

huyixi — Fri, 02 Sep 2022 08:19:52 +0000

非单文件组件

非单文件组件的使用

创建组件

  const school = Vue.extend({
    //定义组件时不使用el,因为所有的组件都将使用vm管理
    template:`
        <div></div>
    `,
    data(){
        return{
              schoolname:'atguigu',
              address:'beijing'
        }
    },
    methods(){

    }
  })

data写成函数 --- 避免组件复用时,数据存在引用关系
- 注册组件

局部注册组件

//创建vm
new Vue({
    //决定组件放在哪个容器下
    el:'#root'
    //注册组件
    components:{
        school
    }
})

全局注册组件
```
vue.component('school',school)
```
- 使用组件

  <school></school>

注意点:

组件的命名
- 一个单词的组件命名
- 首字母大写:School(推荐写法)
- 全小写:school
- 多个单词的组件命名
- 首字母大写(kebab-case命名):MySchool(推荐写法)
- 两个单词之间使用 - 连接(Camelcase命名):my-school
- 可以在定义组件时使用name配置项指定组件在开发者工具中呈现的名字
组件标签的写法
- --- 自闭合写法
不使用脚手架时,会导致后续组件无法渲染
组件注册简写

  const school = Vue.extend({...})
  简写为:
  const school = {...}

组件的嵌套

vm中只管理app一个组件

  new vue({
    el:'#root',
    components:{
        app
    }
  })

app内包含其他组件

  const app = Vue.extend({
    components:{
        school,
        student
    }

  })

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以后自己简称为vc

Vue的实例对象以后简称为vm

组件的内置关系

vm拥有vc没有的一些功能比如el挂载点

单文件组件

App.vue

App.vue为入口文件,通过App.vue来管理所有组件

需要在App.vue中,引入,注册,使用组件

<template>
    <div>
        <School></School>
        <Student></Student>
</template>
<script>
    //引入组件
    import School from "./School";
    impotr Student from "./Student";
    //控制组件的交互
    export default {
        name:'App',
        //注册组件
        components: {
            School,
            Student
        }
    }
</script>
<style></style>

main.js

通过main.js管理App.vue

需要引入,注册,使用 App.vue ,使用el指定容器

import App from "./App.vue"

new Vue({
    el: '#root',
})

index.html

在index.html 中创建容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
</html>

有意思的个人博客

huyixi — Thu, 01 Sep 2022 03:38:49 +0000

阮一峰 https://www.ruanyifeng.com/

王肖恩 https://www.swyx.io/

乔什.科莫 https://www.joshwcomeau.com/

基础前端工程师工作需求

huyixi — Thu, 01 Sep 2022 03:36:46 +0000

HTML+CSS

独立完成电商网站（JD，TM）
弹性布局和响应式布局
JS+JQuery

常见网页动效
下拉菜单
tab栏切换
回到顶部
网页电梯
轮播图
符合代码规范：轮播图有哪几大模块，怎么封装，可富用性怎么样，构造器成员怎么安排

AJAX发送网络请求
请求方式除了get、post还有什么，什么是restful风格接口，常用请求头属性、响应头属性有哪些，常用传输方式有哪些，什么是FromData，http和https有哪些不同

Node

nvm
安装/切换版本
写node接口
后端框架Express或Koa给前端页面提供接口
项目中跨域问题怎么处理
前端框架 Vue、React

单页面应用，比如电商商城配后台管理系统，
使用组件化开发，数据通行，路由、状态管理
高复用性、可拓展性强的组件
组件传值不同情况下选择什么传值方案
路由怎么实现多级路由的管理方案，如何实现约定式路由
状态管理怎么管理多模块状态，异步状态管理如何解决
Vue + TypeScript

权限控制:角色权限，路由权限，按钮权限
对封装请求进行优化，如何有限管理异步请求，多层异步请求只能做到promise吗，响应有没有统一管理
类型管理除了书写接口、类型别名、泛型等
如何对各个模块类型进行高效管理
项目功能完成还需要进行优化如维护优化、用户体验优化、性能优化
微信小程序

如果还无法找到好offer:

面试表达能力

简历没有凸显优势

B站找相应教程作者：胡一希 https://www.bilibili.com/read/cv18352975 出处：bilibili

Hello Dev

huyixi — Thu, 01 Sep 2022 03:25:16 +0000

Vue项目搭建

huyixi — Thu, 01 Sep 2022 03:24:07 +0000

搭建NodeJs环境

下载地址：https://nodejs.org/zh-cn/
检查node版本,出现版本号说明安装成功
```
 node -v
```

切换淘宝镜像源提高速度,以后使用 cnpm 代替 npm

 npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建Vue环境

全局安装 Vue-Cli
```
 cnpm install -g @vue/cli
```
查看安装的版本
```
 vue -version
```
版本过低
```
 npm update -g @vue/cli
```

创建项目

vue create <项目名>
cd 该项目文件夹下
npm run serve 运行项目

项目初始化配置

项目运行起来自动打开浏览器

 --- package.json
  "scripts": {
     "serve": "vue-cli-service serve --open",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },

出现的问题-打开的网址是0.0.0.0:8080

 --project- vue.config.js
 module.exports = defineConfig({
   transpileDependencies: true,
   devServer: {
     host: "localhost",
     port: 8080,
   },
 });

关闭eslint校验功能

 --project- vue.config.js
 lintOnSave: false

配置src文件夹别名为@,@代表src文件夹,方便寻找文件

 --project--jsconfig.json
 {
   "compilerOptions": {
     "baseUrl": "./",
     "paths": {
       "@/*": [
         "src/*"
       ]
     }
   },
   exclude:[
   "node_modules",
   "dist"
   ]
 }