Vue学习2

news/2024/11/13 4:01:21/

文章目录

    • 引入vue的分析
    • render
    • 修改脚手架的默认配置
      • 修改步骤
    • ref
    • props
    • mixin
      • 局部:
      • 全局
      • 总结
    • 插件(install)
      • 总结
    • scoped
    • 案例总结
    • 浏览器本地存储
      • 保存
      • 读取
      • 删除
      • 清空
    • 组件自定义事件
      • 绑定
      • 传递数据的两种方式
      • 解绑
        • this
        • 使用原生的
        • 总结
    • 全局事件总线
    • 消息订阅
    • $nextTick
    • 过度与动画
      • 纯css的
      • Vue
        • 动画
        • 过度
      • 三方动画库
      • 总结
    • 配置代理
      • 解决跨域
        • cors
        • jsonp
        • 代理服务器(解决跨域问题 )
          • 总结
    • vue-resource
    • 插槽
      • 默认插槽
      • 具名插槽
      • 作用域插槽

引入vue的分析

ES6方式的导入是由module控制的,就是导入的后面的
这个是个残缺版的,所以后面要用render解析
这个是在vue的目录下
在这里插入图片描述
在这里插入图片描述
框框里的才是原汁原味的,其他的都是改过的。
在这里插入图片描述

render

在这里插入图片描述

vue = 核心+模板解析器
运行就会运行,这样也可以解析**,render就是帮助解析模板**
在这里插入图片描述
上面的函数简写就是下面的函数了,改成了箭头函数,因为没有this所以可以改箭头函数

在这里插入图片描述

修改脚手架的默认配置

在这里插入图片描述

查看脚手架配置,输出到output.js上面,知识给开发者看,在里面改不奏效,因为vue隐藏的配置。

在这里插入图片描述

修改步骤

  1. 在package.json的文件目录下创建vue.config.js,在里面配置自己的,配置后会替换vue默认配置。

ref

在这里插入图片描述
若给组件加id,用原生的方法去获取的话,那么就是组件的html。

props

props接收的值,不可修改,是针对一个整体
例如:接收的是一个对象,那么对象的属性值被改变是可以的,但是对象是改不了的
不建议写
js中字符串*1可以强制类型转化
v-bind:是执行双引号里面的表达式的结果,所以可以双引号里面是数字
内置类型:
在这里插入图片描述
三种声明接收父组件传参的方式
在这里插入图片描述
这里传入的值的优先级大于大于这个组件上声明的
在这里插入图片描述

mixin

两个组件的配置一样,可以都删除,然后重新创建一个文件,导入其中

局部:

例子

在这里插入图片描述

mixin.js
在这里插入图片描述
在这里插入图片描述

注意:如果组件和混合文件都有相同的属性,那么以组件的为主。
如果是生命周期钩子就都要

全局

在这里插入图片描述

总结

在这里插入图片描述

插件(install)

定义
在这里插入图片描述
使用
在这里插入图片描述
可以配置全局。
在这里插入图片描述

总结

在这里插入图片描述

scoped

查看版本,其他的也可以仿照
在这里插入图片描述
安装也可以仿照

在这里插入图片描述

在App.vue中的配置都是全局的
防止组件之间的类名等 相等
在这里插入图片描述

案例总结

nanoid 生成id更好
在这里插入图片描述
在这里插入图片描述

浏览器本地存储

localStorage和sessionStorage都是浏览器存储,但是第一个要手动清楚,第二个是浏览器关闭就没有了,Window下面的,存储一般5MB左右,不同浏览器不同。

保存

在这里插入图片描述

读取

在这里插入图片描述
JSON.parse(),参数是null或undifined是返回的null

删除

在这里插入图片描述

清空

在这里插入图片描述

组件自定义事件

绑定

给组件用
组件里,这个是触发函数
在这里插入图片描述
接收上面传入很多数据,这里转入数组
在这里插入图片描述

组件标签里(加的一种)
在这里插入图片描述
加的第二种(较灵活,可以控制多久绑定)
在这里插入图片描述
在这里插入图片描述
只触发一次
在这里插入图片描述

传递数据的两种方式

在这里插入图片描述

解绑

解绑一个
在这里插入图片描述
解绑多个,写成数组元素
在这里插入图片描述
所有
在这里插入图片描述

this

这个函数的this是子组件,是触发函数的那个组件,而不是这个组件。谁触发谁就是this
在这里插入图片描述
可以这样写,箭头函数没有this,要往外找
在这里插入图片描述

使用原生的

加.native,将这个原生的事件,绑定在子组件的最大的div上
在这里插入图片描述

总结

在这里插入图片描述

全局事件总线

任意两个组件之间都可以通信
创建
在这里插入图片描述
绑定
在这里插入图片描述

触发

在这里插入图片描述

VC销毁后要解绑,减小浪费
在这里插入图片描述

消息订阅

可以使用的库 pubsub-js,(其中之一)

发布消息
在这里插入图片描述

订阅 接收消息,返回id,这个在挂载时就要订阅
在这里插入图片描述
取消订阅 用id
在这里插入图片描述
这样写this才是vc,或者写个函数 ,在这里调用。
在这里插入图片描述

$nextTick

当DOM更新后,再执行。

在这里插入图片描述
下一次,就是函数执行后,改变DOM后,再执行这里面的回调函数,进行改变。
在这里插入图片描述

过度与动画

纯css的

Vue

动画

transition只能有一个根源素
在这里插入图片描述
固定类名

在这里插入图片描述

改名后,将v改成hello即可
在这里插入图片描述

appear 开始就动画
在这里插入图片描述

过度

在这里插入图片描述
简化
在这里插入图片描述
改进
在这里插入图片描述
transition-group 可以有多个元素
在这里插入图片描述

三方动画库

Animate.css库
下载了,要导入
这样配置那个类名,写再name上。
在这里插入图片描述
动画在右边选,点击就会有样式,可以选择适合的样式

在这里插入图片描述

总结

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

配置代理

解决跨域

cors

后端程序员使用,解决,真正意义上的解决。

jsonp

几乎不用,因为只能解决get(面试可能问)

代理服务器(解决跨域问题 )

服务器之间不用ajax,同源策略管不了,而且请求的数据在代理服务器上有时,就不会去服务器上获取了
在这里插入图片描述
可以用

  1. nginx 比较复杂,需要后端基础
  2. vue-cli
    这是连接到服务器 第一种
    在这里插入图片描述
    访问的是代理服务器,所以端口号是8080
    在这里插入图片描述
    不完美:vue中的public 里的数据,可以在端口号外,斜杠直接访问,如果数据和服务器上一样,只能访问到代理服务器上的文件,且只能配置一个服务器

方式二
开启代理,
pathRewrite,将路径重写为其他的,这里时重写为空字符串
在这里插入图片描述
在这里插入图片描述
把atguigu取消掉就不时代理

总结

在这里插入图片描述

vue-resource

了解一下,和axios一样的作用

在这里插入图片描述
在这里插入图片描述
多了一个$http,替换成这样

插槽

默认插槽

在这里插入图片描述

在这里插入图片描述
解析后传到了slot,两边都可以些样式

具名插槽

在这里插入图片描述
包裹东西可以用template
在这里插入图片描述
用template
在这里插入图片描述

作用域插槽

slot传输数据,可以应用于不同样式,相同数据。

在这里插入图片描述

在这里插入图片描述


http://www.ppmy.cn/news/147115.html

相关文章

【C语言进阶笔记】

文章目录 1. const(常量指针、指针常量)2. static3. extern4. 指针数组和数组指针5. 结构体对齐6. int / uint取值范围、二进制形式与转换、负数表示7. \0,0,"0",0之间的区别8. 类型自动转换9. 内存结构10. …

GEE遥感云大数据林业应用典型案例实践及GPT模型应用

近年来遥感技术得到了突飞猛进的发展,航天、航空、临近空间等多遥感平台不断增加,数据的空间、时间、光谱分辨率不断提高,数据量猛增,遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…

ChatGPT指南:身份提示术语介绍

ChatGPT是由OpenAI训练的大型语言模型,它可以与人类进行自然的对话,并根据输入的内容生成响应。在与ChatGPT交互时,了解一些身份提示和常用术语将有助于您更好地理解ChatGPT生成的响应。 身份提示 在与ChatGPT进行对话时,有时候…

'ARM::CMSIS:DSP:1.5.2' component is not available for target 'nrf51422_xxac_s110', pack

这是安装包选择的问题;自己主要是在调nrf蓝牙的时候遇到这个问题;nrf中有许多的安装包和固件,不同版本下调试,大多数时候会有问题; 下面是自己解决此问题的一些办法。

你需要来自XXX的权限才能对此文件夹进行更改 win10

windows 10 删除文件夹出现问题: 你需要来自XXX的权限才能对此文件夹进行更改 你需要来自SYSTEM的权限才能对此文件夹进行更改 解决流程: 右击打开此文件夹属性,如下图,点击高级按钮 出现下图,点击更改:…

零基础教程:戴尔服务器raid10配置教程

1、新建VD 硬件连接和怎么进入到raid配置页面,可以参考我之前写的“零基础教程:戴尔服务器raid5配置教程”这边文章,里面有详细的介绍,这里直接从配置界面开始讲起。其实raid10配置和raid5配置大同小异,基本参考raid5…

hdlbits Exams/review2015 fancytimer 答案

与该题的上一题的实现方式类似,采用了不同的实现方式。参考了日拱一卒的写法。 不同于自己写的上一题的解法,为了实现及时输出变换,在无触发条件的语句块中检测data(之前的解法为在时钟上升沿到来时检测data)&#xf…

【EDA课程设计】FPGA交通信号灯的设计(含动画视频、超详细思路/步骤分析、完整代码与效果详解)

目录: 🌵🌵🌵前言一、题目二、功能介绍三、视频展示四、代码展示五、设计思路六、模块结构1、首先通过分频,得到2HZ的时钟。2、第一个always实现:清零信号,通过SW[0]使南北信号灯持续为红灯、东…