Shinkai005

V1

2022/05/27阅读:48主题:红绯

【vue】尚硅谷Vue2.0+Vue3.0全套教程-笔记61-69

整体笔记61-69.md

接下来写点项目了 补内容也懒得补了~

剩余内容还有:本地存储,组件自定义事件,全局事件总线,信息订阅与发布,$nestTick,动画,配置代理,插槽,vuex,路由

太大了~一个一个写.....

060-单文件组件

image-20220526180630826
image-20220526180630826

.vue文件浏览器是不识别的,类似less文件浏览器也不识别, 需要借助一个中间件 来编译成浏览器能识别的

  • 那么编译vue文件的用什么? webpack 和 cli脚手架.

.vue文件命名规则

image-20220526180930951
image-20220526180930951

用大驼峰命名,跟着标准走哦

Vue组件中script简写

image-20220526193010295
image-20220526193010295

注意看要变形了

image-20220526193027643
image-20220526193027643

继续变形

image-20220526193057869
image-20220526193057869

尽量添加一个name

image-20220526193123595
image-20220526193123595

name最好和文件名保持一致

image-20220526193339787
image-20220526193339787

自己写一遍试试.

  • 用组件就要引入, 引入之后要声明用到哪些组件, 最重要的记得用.

061-创建vue脚手架

目前 1-4 CLI command line interface

这块百度吧..懒得写了

062-分析脚手架结构

image-20220526221219831
image-20220526221219831
  • npm run serve 之后 -> 接下来执行 main.js

ok 运行了 继续搞

063-render函数

image-20220526231242252
image-20220526231242252

如果不写render:h=>h(App); 报错如上面

image-20220526232113624
image-20220526232113624

为什么会用render不用template, 因为 默认引入的vue--- import Vue from 'vue' 是残缺版的 完整版是 vue/dist/vue

这个里面包含模板解析器

为什么要写那么多版本的vue包

因为模板解析器占体积太大了 大概1/3

开发时候没什么问题,但是在上线生产时, 这个模板解析器太大了.....所以在不同阶段使用不同的.

笔记

/* 
 关于不同版本的Vue:
 
  1.vue.js与vue.runtime.xxx.js的区别:
    (1).vue.js是完整版的Vue,包含:核心功能+模板解析器。
    (2).vue.runtime.xxx.js是运行版的Vue,只包含:核心功能;没有模板解析器。

  2.因为vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用
   render函数接收到的createElement函数去指定具体内容。
*/

vue以前是没有这么做的...以前一直是完整版本的vue. 后来才改的.

还是那句话~大神也是人,考虑不了那么完美的也得不停改进

064-修改默认配置

vue如今把 webpack.config.js给隐藏了

可以通过vue inspect > output.js 来显示

image-20220526234415472
image-20220526234415472

这句弹幕不错啊

065-ref属性

  • ref主要是为了防止操作dom, 在元素上加了ref属性,都会存在vc.$refs里
  • ref在组件上, ref获取是整个vc组件
  • id和ref在原生html标签上是一样的
    • id如果在vc组件上,获取的是整个组件包含的html

代码

<template>
	<div>
		<h1 v-text="msg" ref="title"></h1>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
	</div>
</template>

<script>
	//引入School组件
	import School from './components/School'

	export default {
		name:'App',
		components:{School},
		data() {
			return {
				msg:'欢迎学习Vue!'
			}
		},
		methods: {
			showDOM(){
				console.log(this.$refs.title) //真实DOM元素
				console.log(this.$refs.btn) //真实DOM元素
				console.log(this.$refs.sch) //School组件的实例对象(vc)
			}
		},
	}
</script>

笔记

  1. 被用来给元素或子组件注册引用信息(id的替代者)
  2. 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  3. 使用方式:
    1. 打标识:<h1 ref="xxx">.....</h1><School ref="xxx"></School>
    2. 获取:this.$refs.xxx

066-props配置

写个需求:

写个student组件 有学生姓名年级年龄

多次复用,每个学生只改姓名年级年龄

先实现

实现啦~有个点错了记录下 props:['']// 这个里面要加分号获取的不是变量,只是单纯的一个字符串

image-20220527014940452
image-20220527014940452

看name名就知道是哪个文件了

image-20220527015035461
image-20220527015035461

加需求

对接受的数据限定格式

image-20220527015731814
image-20220527015731814

加需求

必须填写,以及默认值,类型限制

image-20220527020055465
image-20220527020055465

笔记:

  1. 功能:让组件接收外部传过来的数据

  2. 传递数据:<Demo name="xxx"/>

  3. 接收数据:

    1. 第一种方式(只接收):props:['name']

    2. 第二种方式(限制类型):props:{name:String}

    3. 第三种方式(限制类型、限制必要性、指定默认值):

      props:{
        name:{
        type:String//类型
        required:true//必要性
        default:'老王' //默认值
        }
      }

    备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。

067-mixin混入

笔记

  1. 功能:可以把多个组件共用的配置提取成一个混入对象

  2. 使用方式:

    第一步定义混合:

    {
        data(){....},
        methods:{....}
        ....
    }

    第二步使用混入:

    全局混入:Vue.mixin(xxx) 局部混入:mixins:['xxx']

068-插件

笔记

  1. 功能:用于增强Vue

  2. 本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

  3. 定义插件:

    对象.install = function (Vue, options{
        // 1. 添加全局过滤器
        Vue.filter(....)

        // 2. 添加全局指令
        Vue.directive(....)

        // 3. 配置全局混入(合)
        Vue.mixin(....)

        // 4. 添加实例方法
        Vue.prototype.$myMethod = function ({...}
        Vue.prototype.$myProperty = xxxx
    }
  4. 使用插件:Vue.use()

069-scoped样式

主要就是给在引入的时候后引入的style会覆盖之前的. 所以加这个就不会了

原理就是给每个标签加了一个独特的属性值 v-data-12312321asad 这种

附录

markdown生成文件目录

npm install mddir -g

cd 到项目目录

运行 mddir 生成如下一个md文件,内容如下

|-- vue_kai_test

​    |-- .DS_Store

​    |-- .gitignore

​    |-- README.md

​    |-- babel.config.js

​    |-- package-lock.json

​    |-- package.json

​    |-- public

​    |   |-- .DS_Store

​    |   |-- favicon.ico

​    |   |-- index.html

​    |   |-- robot.ico

​    |-- src

​        |-- .DS_Store

​        |-- App.vue

​        |-- main.js

​        |-- assets

​        |   |-- logo.png

​        |-- components

​            |-- School.vue

​            |-- Student.vue

分类:

前端

标签:

JavaScript

作者介绍

Shinkai005
V1

公众号:深海笔记Shinkai