vue.js

港岛叔公

已于 2023-01-07 01:38:38 修改

阅读量1.4k

点赞数

文章标签：前端 vue.js

于 2022-11-15 01:41:30 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/retuen_d/article/details/127851151

版权

文章目录

一、mvc 和mvvm
二、基本代码使用
- v-cloak
- v-text
- v-html
- v-bind 绑定属性的指令
- v-on 绑定事件
- v-on的事件修饰符
- v-model双向绑定
- 通过属性为class样式设置
- 绑定行内样式style
- v-for
- v-if v-show
- 自定义指令
- - 对象自定义属性
- 数组过滤
- 全局过滤器
- 私有过滤器
- 按键修饰符
- 自定义指令文本获取焦点
- 实例的生命周期
- vue-resource --ajax
- 全局配置数据接口根域名
- 全局配置emulatejson
- 动画
组件
- 创建组件
- 第二种创建组件
- 第三种
- 私有组件
- 组件中的data 和methods
- 登入注册切换
- vue提供组件切换
- 组件嵌套
- 组件传值
- - 父传子
  - 子向父
- 排列列表
- 使用ref获取dom元素
- 路由
- 路由传参
- - 使用query
  - 使用params
- 路由嵌套
- 命名试图
- method
- watvh监视路由地址变化
- - 深度监听
- computed
- method、watvh、computed三个的区别
生命周期
VueComponent(vue组件，构造函数)
- vue 和VueComponent关系（有关原型链）
单文件组件
- 在app.vue文件里汇总全部组件
脚手架
- 容器
- 配置项（可在里面配置入口文件，等不写等于默认的）
- ref属性（获取标签元素）可获得组件的
- props 配置项（给子组件传参，值不能改）
- - 非要修改传进来的值
- mixin 配置（混合）
插件
scoped样式
uuid 生成全球唯一id
给父组件传参
- 确定框
组件自定义事件
- 子给父传值
- 通过res子给父
- 解绑自定义事件
- 全局事件总线（任意组件间通信）
- 消息订阅与发布（任意组件通信）
$nextTick（生命周期钩子）
动画效果
- 过渡
- 多个过渡
- 第三方动画库
- 发送请求
- 解决跨域
插槽
- 具名插槽
- 作用域如果数据在组件里
vuex（共享数据重要）
- 搭建 vuex
- geters配置项
- mapstate
- mapgetters和上面一样
- mapmututations
- VUEX模块化+namespace（命名空间）
- 还可以拆文件
路由
- 嵌套路由
- 路由传参（query）
- 命名路由
- params参数（路由传参）
- router-like（replace游览器不能前进或者后退）
- 路由跳转（编程式跳转）
- 缓存路由组件
两个新生命钩子
路由守卫
- 全局后置
独享路由守卫（只有全置路由）
- 组件内路由守卫
- histor和hash模式
打包
vue ui组件库

一、mvc 和mvvm

在这里插入图片描述

二、基本代码使用

在这里插入图片描述

v-cloak

当还没请求到vue.js时显示： {{msg}} 请求到时 123//数据
在标签使用<p v-cloak>{{msg}}<p> 解决插值表达式闪烁问题

v-text

在这里插入图片描述

v-html

上面两个当字符串渲染
会把标签渲染上去且覆盖文本
在这里插入图片描述

v-bind 绑定属性的指令

在这里插入图片描述
还可以写表达式

在这里插入图片描述
简写可以把v-bind省略

v-on 绑定事件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

v-on的事件修饰符

在这里插入图片描述

v-model双向绑定

在这里插入图片描述

通过属性为class样式设置

在这里插入图片描述

绑定行内样式style

在这里插入图片描述

v-for

在这里插入图片描述

v-if v-show

在这里插入图片描述

自定义指令

在这里插入图片描述

对象自定义属性

在这里插入图片描述

数组过滤

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

全局过滤器

在这里插入图片描述

可以传参数

可以调用多个过滤器

私有过滤器

在这里插入图片描述

按键修饰符

在这里插入图片描述

自定义指令文本获取焦点

在这里插入图片描述

在这里插入图片描述

实例的生命周期

在这里插入图片描述

vue-resource --ajax

在这里插入图片描述

全局配置数据接口根域名

在这里插入图片描述

在这里插入图片描述

全局配置emulatejson

在这里插入图片描述

动画

在这里插入图片描述

在这里插入图片描述

单独的

组件

创建组件

在这里插入图片描述

第二种创建组件

在这里插入图片描述

第三种

在这里插入图片描述

私有组件

在这里插入图片描述

在这里插入图片描述

组件中的data 和methods

在这里插入图片描述每个组件的数据不共享

登入注册切换

在这里插入图片描述

vue提供组件切换

在这里插入图片描述

组件嵌套

在这里插入图片描述

组件传值

父传子

在这里插入图片描述

在这里插入图片描述

子向父

通过事件绑定func随便写
在这里插入图片描述

在这里插入图片描述

父
在这里插入图片描述

排列列表

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

使用ref获取dom元素

在这里插入图片描述

路由

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
默认展示登入

在这里插入图片描述
高亮
默认

使用linka。。。。。

在这里插入图片描述

路由传参

使用query

在这里插入图片描述

在这里插入图片描述

使用params

在这里插入图片描述

在这里插入图片描述

路由嵌套

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

命名试图

在这里插入图片描述

在这里插入图片描述

method

在这里插入图片描述

watvh监视路由地址变化

在这里插入图片描述

深度监听

监听todos的值变化
在这里插入图片描述

computed

在这里插入图片描述

method、watvh、computed三个的区别

在这里插入图片描述

生命周期

请添加图片描述

VueComponent(vue组件，构造函数)

在这里插入图片描述

vue 和VueComponent关系（有关原型链）

vue把VueComponent的原型对象指向vue的原型对象

在这里插入图片描述

单文件组件

vue文件不能游览器不能识别
webpack
可以用官方写的：或者脚手架

在vscoed里安装
在这里插入图片描述
结构：

在app.vue文件里汇总全部组件

在这里插入图片描述
入口文件

容器

脚手架

在这里插入图片描述

容器

在这里插入图片描述

配置项（可在里面配置入口文件，等不写等于默认的）

在这里插入图片描述

ref属性（获取标签元素）可获得组件的

在这里插入图片描述

props 配置项（给子组件传参，值不能改）

在这里插入图片描述

在这里插入图片描述
如果传进去的都是字符串
如果转换就

限制了类型

非要修改传进来的值

在这里插入图片描述

mixin 配置（混合）

相同的
在这里插入图片描述

可以配置钩子和数据

可以在全局配置

如果相同属性方法等以组件里的为最高级

插件

插件是一个对象
在这里插入图片描述

插件可以做

在这里插入图片描述

scoped样式

添加scoped，样式只在组件里生效
在这里插入图片描述

webpack使用less

在这里插入图片描述
如果less-loader兼容webpack5的
如果4版本想用得降低版本

uuid 生成全球唯一id

uuid的精简版nanoid
在这里插入图片描述

给父组件传参

在父组件定一个方法
在这里插入图片描述

传给子组件这个方法
在这里插入图片描述
在子组件这里引入这个方法，通过调用这个方法参参数

确定框

在这里插入图片描述

组件自定义事件

子给父传值

父

在这里插入图片描述
子

通过res子给父

和上面基本一样这是他是在实例挂载前把res绑定一个自定义事件
在这里插入图片描述

解绑自定义事件

解绑一个事件
在这里插入图片描述
多个所有

全局事件总线（任意组件间通信）

在这里插入图片描述

在这里插入图片描述
组件一给这个x也就是￥bus绑定事件

组件二emit触发x事件发送数据给

在组件销毁记得要解绑事件

消息订阅与发布（任意组件通信）

在这里插入图片描述
任意框架都可以用消息订阅库pubsub-js库

收消息

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

销毁
在这里插入图片描述

$nextTick（生命周期钩子）

在这里插入图片描述

解析模板之后执行

在这里插入图片描述

动画效果

让appear=tuer一上来就执行动画
在这里插入图片描述

过渡

在这里插入图片描述
简化

多个过渡

在这里插入图片描述

第三方动画库

在这里插入图片描述

在这里插入图片描述

发送请求

在这里插入图片描述

解决跨域

1.cors后端配置
2josnp 只能get请求
3.代理服务器 nginx或者vue-cli
在这里插入图片描述

方式二

为fless时

在这里插入图片描述

配置多个

插槽

在这里插入图片描述

在这里插入图片描述

具名插槽

在这里插入图片描述

还可以这样写

作用域如果数据在组件里

在这里插入图片描述

vuex（共享数据重要）

在这里插入图片描述

允许直接调用commit
但如果需要行为没数据时可以在actions里调ajax数据

搭建 vuex

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

应用
在这里插入图片描述

在这里插入图片描述

context上下文的使用（当业务大时）
在这里插入图片描述

geters配置项

在这里插入图片描述

mapstate

在这里插入图片描述

在这里插入图片描述

mapgetters和上面一样

在这里插入图片描述

mapmututations

在这里插入图片描述
借助这个要在事件传参

VUEX模块化+namespace（命名空间）

开启命名空间
在这里插入图片描述

在这里插入图片描述

简写
在这里插入图片描述

在这里插入图片描述
不简写操作

还可以拆文件

在这里插入图片描述
## 在actions发送请求

路由

vue2只支持router3

在这里插入图片描述

创建pages放路由的组件

嵌套路由

路由传参（query）

在这里插入图片描述

命名路由

在这里插入图片描述
可以简化路由跳转

params参数（路由传参）

在这里插入图片描述

在这里插入图片描述接收

或者

一
在这里插入图片描述
二

router-like（replace游览器不能前进或者后退）

在这里插入图片描述

路由跳转（编程式跳转）

游览器能前进后退
在这里插入图片描述
不能前进后退

前进后退

在这里插入图片描述
前进就正后退就负数

缓存路由组件

比如路由组件是有个input框里面有数据
在这里插入图片描述

在这里插入图片描述
希望谁被缓存
include里的是组件名

在这里插入图片描述

两个新生命钩子

欢迎学习是定时器让他不断变化透明度
在这里插入图片描述
不销毁组件就一直执行，销毁就无法缓存路由组件

路由守卫

（能不能查看组件）看看school是不是==atguigu
在这里插入图片描述每次切换(或者初始化时)路由之前调用router.beforEach

to哪里来from去哪里
next允许下一步

在这里插入图片描述

在这里插入图片描述

（谁需要权限给谁）

全局后置

在这里插入图片描述

比如

在这里插入图片描述

独享路由守卫（只有全置路由）

在这里插入图片描述

组件内路由守卫

在这里插入图片描述

histor和hash模式

在这里插入图片描述

当发hash模式时
请求不会带#后的
如果要处理要后端处理

在这里插入图片描述

打包

在这里插入图片描述

在这里插入图片描述

vue ui组件库

在这里插入图片描述

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js

当还没请求到vue.js时显示： {{msg}} 请求到时 123//数据。会把标签渲染上去且覆盖文本。简写可以把v-bind省略。解决插值表达式闪烁问题。上面两个当字符串渲染。
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。