![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue 学习笔记
'"<>{{7*7}}
这个作者很懒,什么都没留下…
展开
-
Vue.js进阶技巧Day05 $nextTick的两种应用场景
$nextTick应用场景:1.如果要在‘created()’ 钩子函数中进行DOM操作,因为created()在调用时,DOM渲染还未完成,所以无法直接操作,需要通过$nextTick() 来完成created: 实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,还未开始编译模板mounted: 此时,已经将编译好的模板,挂载到了页面的指定容器中显示<template> <div> <h1 ref='h1'><原创 2020-10-21 11:11:13 · 225 阅读 · 0 评论 -
Vue.js进阶技巧Day04: directive自定义指令、实现骨架屏、自定义右键菜单
0x00 局部注册局部注册的 自定义指令 只能在该vue文件中使用,全局注册的自定义指令在任何文件中都可以使用钩子函数:bind: 只调用一次, 指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 inserted: 被绑定元素插入到DOM树时调用 update: 绑定元素的值 更新时调用,因为可能多个 元素都绑定了该自定义指令,所以只要有一个元素的值发生了更新,update就会被触发很多次。 componentUpdated:指令所在组件的 VNode 及其子 VNode 全部原创 2020-10-21 10:41:46 · 358 阅读 · 0 评论 -
Vue.js进阶技巧 Day03: 自定义组件v-model 实现
0x00 一种比较繁琐的方法e-input.vue<template> <input type="text" class='form-control' :value='val' @input="change"></template><script> export default{ props:['val'], methods:{ change(e){ console.log(e.target.value); t原创 2020-10-20 14:11:45 · 174 阅读 · 0 评论 -
Vue.js 进阶技巧Day02 $on 与 $emit (局部通信、父组件通知所有子组件、全局监听和通讯)
目录0x00 局部通信:0x01 如果父组件下有多个子组件,且数量未知,如何方便通知所有子组件呢?0x03 全局的监听和通讯:0x00 局部通信:只能在当前组件下使用<template> <div class='container p-5'> <button class='btn btn-success' @click='test'> 点击通讯 </button> <demo-item></dem原创 2020-10-20 13:23:55 · 896 阅读 · 0 评论 -
Vue.js 进阶技巧Day01: 获取DOM节点,获取子组件对象,跨组件通信/依赖注入,表单验证实例
目录0x00 $refs、$parent 、$children0x02 provide 和 inject 跨多组件通信 依赖注入0x00 $refs、$parent 、$children获取普通元素的dom节点,只需要给要获取的dom节点一个ref属性 作为标志<!-- 获取普通元素 --><input type="text" class='form-control' ref="iamshangrui">然后通过this.$refs.标志名 皆可以获取到原创 2020-10-17 20:31:25 · 765 阅读 · 0 评论 -
VueDay04:axios
0x00 引入https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js0x01 案例:执行get请求:// 为给定 ID 的 user 创建请求axios.get('user.php?ID=12345') .then(function (res) { console.log(res); console.log(res.data) }) .catch(function (error) { conso原创 2020-06-10 22:24:11 · 134 阅读 · 0 评论 -
VueDay03:过渡&动画
0x01 单元素/组件的过渡#淡入淡出效果:复制官网文档上css样式用<transition name='fade'></transition>将需要淡入淡出的部分包住适用于:条件渲染:v-if条件展示:v-show等控制的组件的淡入淡出<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>用户登录</ti原创 2020-06-08 21:39:18 · 129 阅读 · 0 评论