Vue
Vue的指令
-
v-text: 原生的innerText, 原样覆盖标签中原有内容
-
v-html: 原生的innerHTML, 覆盖标签原有内容 并 解析HTML
-
v-show: 利用css的display:none 实现元素的 显示与隐藏
-
v-if: 利用 DOM元素的删除实现隐藏
-
v-else: 搭配if使用
-
v-else-if: 搭配if使用
-
v-for: 遍历数据项, 生成元素
<el v-for="item in items" /> <el v-for="item of items" /> <el v-for="(item,index) in items" /> 能遍历数字 <el v-for="item in 4"/>
-
v-on: 事件绑定, 新语法
@事件名="方法" -
v-bind: 属性绑定, 新语法
:事件名="值" -
v-model: 双向数据绑定, 属于
MVVM机制-
方向1: 数据显示在DOM, 实时更新 --
MVC -
方向2: 界面更新, 同步更新绑定的属性值 --MVVM
-
-
v-pre: 原样输出
{{}} -
v-cloak: 遮罩, 搭配 css的display:none 使用.
防止网速卡顿时, vue对象未创建之前, vue代码并展示的问题
-
v-once: 一次性渲染, 后续不更新
vue实例属性
-
$refs: 其中存储了通过
ref绑定的元素
关于for循环的key
key: Vue提供的一种列表性能提高的手段
如果删除列表中的 中间行, 则其下方所有都要向上移动, 实际的DOM操作, 会重绘所有的行
即重新创建DOM元素.
key: 是个唯一标识, 当为每一行添加唯一标识之后, 一旦出现中间的 添加/删除操作
重绘时, 系统会检查要绘制的DOM元素 是否已存在同样的 key. 如果存在则直接复用即可
key只有在出现 列表增删操作时, 才有用; 但是脚手架默认要求必须写!!
网络请求
网络请求的根源都是 亚楠老师 讲解的 XHR 的 Ajax
但是原始的方式非常复杂, 所以就出现了各种封装
-
jQuery 利用了 函数 的
高阶函数用法, 利用回调函数实现请求的封装$.get(请求地址, 参数, data=>{ data就是请求返回值 }) -
axios: 利用 Promise 的方式封装了 Ajax
这种方式更加现代, 受到更多人的欢迎, Vue就是采用这个库完成请求操作
需要单独进行安装, 脚手架项目包默认
未集成
-
安装模块,
在项目包目录下执行:npm i axios vue-axios
-
双向数据绑定: 适用于 表单元素--单选,多选,下拉选,输入框
-
注意: 多选 需要绑定数组类型
-
-
监听器: watch 监听任意
vue实例属性的变更, 新值 和 旧值 -
动态样式
-
内联:
:style="{属性名: 值, 属性名: 值}"-
属性名不允许 - , 所以 要么字符串 要么 小驼峰
-
-
class:
:class="{class名: true/false}"true生效 false无效
-
网络操作
-
axios: 封装了 XHR 网络请求操作的模块, 利用 Promise 封装 -
安装:
npm i axios vue-axios -
集成 分两种方式:
-
方式1: 优雅的官方提供的插件方式
Vue.use(VueAxios, axios) -
方式2: 简单粗暴的原型注入 -- 4阶段铭铭
-
-
使用: axios会被注入在 vue的实力对象里
this.axios.get(接口地址).then(res=>{}).catch(err=>{}) -
生命周期
1个组件 从 创建 -> 出生 -> 更新自身 -> 销毁 这个过程, 每个步骤都会触发一个对应的方法, 这种方法称为 -- 钩子函数
这一套过程: 称为生命周期
拟人化: 怀孕 -> 临产 -> 接生 -> 呱呱坠地 -> 开始学习 -> 学会了 -> 快死了 -> 死了
周期函数:
-
beforeCreate: 将要创建
-
created: 创建完毕
-
beforeMount: 将要挂载到DOM树进行展示
-
mounted: 挂载到DOM树,开始展示
-
beforeUpdate: 开始更新自身
-
updated: 更新完毕
-
beforeDestroy: 将要销毁
-
destroyed: 销毁了
跨域
浏览器的同源策略:
当前网页中, 通过JS发送请求, 请求服务器返回一个
Access-Control-Allow-Origin代表允许访问的 域名来源. 如果当前网页所在域名不在允许范围内, 则会拒绝访问
跨域的解决方案:
-
cors: 服务器
可接触, 只要手动添加 允许访问的白名单即可 -
代理 proxy: 服务器
不可接触, 使用代理服务器完成 -
jsonp: 过于复杂, 使用很少.
指令
-
v-text: 原生的innerText, 原样显示 覆盖标签原有内容
-
v-html: 原生的 innerHTML, 会作为html解析 覆盖原有标签内容
-
v-show: 显示/隐藏 -- 利用css的display:none实现
-
v-if: 显示/隐藏 -- 利用 加载/删除 DOM实现
-
v-for: 遍历数组生成元素, 使用
in或of没差异-
搭配
:key属性使用, 添加/删除 时 提高渲染效率
-
-
v-on: 绑定事件, 目前用
@代替 -
v-bind: 绑定属性, 目前用
:代替 -
v-model: 双向数据绑定, 关联
MVVM设计模式, 表单元素的值被用户修改, 值本身也会变化 -
v-pre: 原样输出
{{}} -
v-cloak: 遮罩, 在vue实例化之前, 隐藏元素
-
v-once: 一次性, 只有初始化时更新一次
生命周期的钩子函数
组件在出现/销毁时 会经历很多过程, 触发对应的函数
-
创建 --
document.createElement内存中生成-
beforeCreate
-
created
-
-
挂载 --
appendChild绘制到页面,用户可见-
beforeMount
-
mounted
-
-
更新 -- 变化
-
beforeUpdate
-
updated
-
-
销毁 --
remove删除-
beforeDestroy
-
destroyed
-
网络请求
axios, 利用Promise封装而成
-
get请求:
this.axios.get(地址).then(res=>{}).catch(err=>{})
选项/数据
-
data: 存储页面上使用的数据, 组件中要求是函数实现, 为了
复用组件时, 互相数据独立 -
props: 组件传参, 利用此属性接受通过属性传入的值
-
methods: 存储函数/方法
-
watch: 监听器, 可以监听任意属性的变化
特殊属性
-
ref: 代替选择器, 可以快速为元素绑定一个属性名
-
<el ref="属性名" /> -
使用时:
this.$refs.属性名就是此元素节点
-
注意
vscode要直接开
项目包即vue-pro文件夹,否则: 路径相关的代码提示 或 错误提示 会
有问题
组件
大体分两种:
-
独立的网络请求: 1个网页 由多个独立的小部分拼装而成, 适合各自做成组件最终合并
-
目的: 简化大页面的代码量, 拆分成小模块
-
-
复用性: UI界面的结构相同, 但是数据不同
-
重复使用, 减少代码量
Vue06
选项与数据:
-
data:存储共享的数据, 在赋值时会自动创建
get/set方法, 实现 MVC. 数据变化自动更新DOM -
props: 组件的属性传参
-
computed: 计算属性, 内容是函数, 使用时调用函数得到值
-
methods: 方法/函数
-
watch: 监听器, 监听当前vue组件对象中属性的变化:
$route
生命周期:
-
创建: 内存中生成元素 --
-
beforeCreate
-
created
-
-
挂载: 元素渲染到页面显示 --
appendChild-
beforeMount
-
mounted
-
-
更新: DOM有变化
-
beforeUpdate
-
updated
-
-
卸载: remove 删除元素
-
beforeDestroy
-
destroyed
-
指令:
-
v-text: 纯文本替换标签内容
-
v-html: 当html进行解析 替换标签内容
-
v-show: 利用css的display 实现元素隐藏
-
v-if: 利用DOM的删除 实现元素隐藏
-
v-for: 循环遍历
-
:key: 唯一标识, 数据增删时提高DOM渲染效率
-
-
v-on: 事件绑定, 目前用
@ -
v-bind: 属性绑定, 目前用
: -
v-model: 双向数据绑定. 表单元素被用户修改值,会影响其绑定的数据 --
MVVM模式 -
v-slot: 插槽, 组件中的
预留位, 后续使用时插值 -
v-pre: 原样显示
{{}} -
v-cloak: 遮罩, 在vue实例创建前 隐藏元素, 搭配css 使用
-
v-once: 初始化时更新一次, 后续不再更新
特殊属性:
-
ref: 快速把变量绑定到元素上, 利用
$refs.变量名读取元素. 简易DOM选择器的样子
选项/资源:
-
directives: 自定义指令,v-xxx -
filters: 过滤器,{{ 值 | 过滤器(参数1, 参数2...) | 过滤器 }}-
数据接口返回的数据 偶尔和真正要展示的样子不一致, 需要过滤器进行转化
-
-
components: 组件的注册
第三方模块
-
axios: 利用
Promise封装的 AJAX 网络请求模块-
安装:
npm i axios vue-axios -
集成:
-
方式1: 优雅的
Vue.use() -
方式2: 简单粗暴的原型注入--- 铭铭讲
-
-
-
Vue Router: 路由系统 -- 创建项目时选择的
-
效果: 不同的路径 显示 不同的组件
-
router-view: 占位符, 会根据 路径切换成对应组件 -
router-link: 本质是超链接a标签. 点击后切换路径 -
views目录: 要求路由切换的组件放这里, 非路由管理--放components -
router/index.js: 在这里配置路由 的 路径和组件对应关系
Vue08
难点: 跨文件
-
组件传参
-
父子组件
-
Son是 App的子元素
-
App是 Son的父元素
向 Son 组件中传递数据
柱子<App>
<Son 自定义属性名="柱子" :data="[1,2,3]" />
</App>Son组件:
<script>
export default{
props: ['自定义属性名', 'data']
}
</script> -
-
子父传参: 面试题经常问... 父传递函数给子, 子利用
$emit触发 -
兄弟组件
-
事件车:
$root, -$emit:发送消息$on:添加监听$off:删除监听
-
-
任意关系
-
事件车
-
Vuex
-
-
-
路由系统
-
跳转传参: 依赖URL地址进行数据传递
-
接受路由参数:
-
读取方式1:
$route.params.参数 -
读取方式2: 利用组件的 props 属性接受路由参数
-
组件的props能接受两种参数:
父子传递的和路由URL地址的 -
URL地址的, 需要特殊配置:
props:true才能生效
-
-
-
路由跟
axios.get(url)毫无关系, 请求是向服务器要数据 -
路由是 网站页面之间跳转
-
新的知识点:
-
swiper: 一款第三方的 轮播图 模块
-
使用时: 到官方案例找到你喜欢的效果, 复制 -> 粘贴 -> 改一改
-
-
事件修饰符:
@事件.修饰符-
@keyup.enter: 回车 -
@click.prevent: 阻止默认事件
-
-
axios 的 baseURL 属性: 设置此属性, 所有的请求就可以忽略前缀域名, 会自动拼接
-
浙公网安备 33010602011771号