设为首页收藏本站
开启辅助访问

Vue学习2

 您所在的位置：网站首页 › vuejs学多久 › Vue学习2

Vue学习2

2023-06-04 12:31| 来源: 网络整理| 查看: 265

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

引入vue的分析

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

render

在这里插入图片描述

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

修改脚手架的默认配置

在这里插入图片描述

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

在这里插入图片描述

修改步骤 在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,同源策略管不了，而且请求的数据在代理服务器上有时，就不会去服务器上获取了 在这里插入图片描述 可以用

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

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

总结

在这里插入图片描述

vue-resource

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

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

插槽 默认插槽

在这里插入图片描述

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

具名插槽

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

作用域插槽

slot传输数据，可以应用于不同样式，相同数据。 必须用template接收，接收的是一个对象，

在这里插入图片描述 在这里插入图片描述 下面也可以

在这里插入图片描述



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3