关注
分享
屋顶上的小喵
做好自己，但行好事，不渡他人...
展开
-
Vue3.x 版本的生命周期钩子函数
setup() 开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method//必须先引用再使用import {onBeforeMount,onMounted,onUpdated,onBeforeUnmoun,onUnmounted} from 'vue'//组件挂载到节点上之前执行的函数onBeforeMount() //组件挂载完成后执行的函数 onMounted()//组件更新之前执行onBeforeUpdate(...原创 2020-11-08 15:56:23 · 7825 阅读 · 0 评论 -
在vscode 快速创建代码片段 之 vue3.x（自用供参考）
{ // Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: //...原创 2020-11-08 11:58:21 · 2669 阅读 · 1 评论 -
24.Vue.js :子组件传值给父组件
$emit（）子组件传值给父组件需要用到 $emit()方法这个方法可以传递两个参数：一个事件名称，一个是需要传递的数据<!DOCTYPE html><html lang="en"><head> <title>子组件传值给父组件</title> <meta charset="UTF-8">...原创 2019-03-24 08:50:54 · 1148 阅读 · 0 评论 -
35.Vue.js :路由安全守卫
main.js//注册一个全局守卫，作用是在路由跳转前，对路由进行判断，防止未登录的用户跳转到其他页面去router.beforeEach((to, from, next) => { let token = localStorage.getItem('myToken'); //如果已经登录不干涉你，让你随便访问 if (token) {...原创 2019-04-04 15:00:54 · 362 阅读 · 0 评论 -
23.Vue.js :父组件传值给子组件
<!DOCTYPE html><html lang="en"><head> <title>父子组件的创建</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...原创 2019-03-23 17:55:02 · 265 阅读 · 0 评论 -
22.Vue.js :父子组件的创建
<!DOCTYPE html><html lang="en"><head> <title>父子组件的创建</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...原创 2019-03-23 17:39:03 · 678 阅读 · 0 评论 -
21.Vue.js :组件中使用事件和指令
<!DOCTYPE html><html lang="en"><head> <title>组件中使用事件和指令</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...原创 2019-03-23 17:32:01 · 232 阅读 · 0 评论 -
20.Vue.js :组件
组件开发的好处1.封装功能性代码，提升开发效率2.便于团队分工合作组件的创建组建的创建有三种方法：注意：1.模板template中只能有一个根节点 2.组件的名字如果采用驼峰命令的话，在使用的时候，就要加上'-'第一种：<div id="app"> <!-- 使用组件就像是使用html标签一样 -->...原创 2019-03-23 16:55:39 · 116 阅读 · 0 评论 -
19.Vue.js :小Demo添加动画删除
<!DOCTYPE html><html lang="en"><head> <title>列表展示删除添加</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-03-23 15:39:39 · 298 阅读 · 0 评论 -
25.Vue.js :兄弟组件传值
eventbus //创建一个空的vue实例，作为事件总线 var eventbus = new Vue();emitBrotherMyName() { //通过事件总线发射一个事件名称和需要传递的数据 eventbus.$emit('tellBrotherMyName', this.myName); }mou...原创 2019-03-24 09:14:24 · 414 阅读 · 0 评论 -
27.Vue.js :路由
1.路由初体验<!DOCTYPE html><html lang="en"> <head> <title>路由router</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...原创 2019-03-27 01:05:54 · 132 阅读 · 0 评论 -
32.Vue.js :sass学习
1.变量sass 允许使用变量，所以变量以 $ 开头$blue:#1875e7;div{ color:$blue}如果变量需要镶嵌在字符串之中，就必须需要写在 #{} 之中$side: left;.rounded{ border-#{$side}-radius:5px;}2.计算功能sass允许在代码中使用算式：$var:20;body{...原创 2019-03-31 14:42:37 · 166 阅读 · 0 评论 -
28.Vue.js :监听路由参数变化
<!DOCTYPE html><html lang="en"><head> <title>路由router</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-03-27 11:21:59 · 764 阅读 · 0 评论 -
29.Vue.js :路由重定向
路由重定向//第一种{ name: 'default', path: '*', redirect: '/index' }//第二种{ name: 'default', path: '*', redirect: { name: 'index' }<!DOCTYPE html><html lang="en">...原创 2019-03-27 11:38:13 · 16237 阅读 · 0 评论 -
30.Vue.js :生命周期
1.什么是生命周期从Vue实例创建,运行,到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期;2.生命周期钩子？就是生命周期的别名而已;3.主要的生命周期函数分类：✔创建期间的声明周期函数: beforeCreat:实例刚在内存中被创建出来,此时,还没有初始化好data和methods属性; created:实例已经在内存中创建ok,此时的data和...原创 2019-03-27 13:45:48 · 284 阅读 · 0 评论 -
31.Vue.js :vue -cli 脚手架工具
vue-cli 是官方的一个脚手架工具，所谓脚手架呢就是一个架子，什么架子呢？项目结构的架子，里面有一些最基本的结构配置。利用vue-cli呢，我们可以生成一个这样的脚手架，所以呢它被称为vue脚手架工具。npm install vue-cli -gvue init webpack admin npm install element-ui ...原创 2019-03-30 08:35:14 · 200 阅读 · 0 评论 -
36.Vue.js :Vuex
Vuex 是什么？Vuex 是一个针对Vue.js 开发的状态管理模式。说简单一点就是一个工具，可以管理（修改或设置）所有组件用到的数据，而不需要借助之前的event bus 或props在组件间传值。Vuex使用场景大型单页应用程序，存在多组件共享数据的时候，需要用到store(一个容器对象，存储Vuex 中的state.mutations,actions,actions,...原创 2019-04-07 06:00:34 · 131 阅读 · 0 评论 -
33.Vue.js :如何把阿里图标引入到vue项目中
原创 2019-04-03 13:01:41 · 923 阅读 · 0 评论 -
18.Vue.js :过渡和动画 javaScript钩子
当只用javaScript 过渡的时候，在 enter 和 leave 中，回调函数 done 是必须的，否则，它们会被同步调用，过渡会立即完成；<!DOCTYPE html><html lang="en"><head> <title>Vue动画</title> <meta charset="UTF-...原创 2019-03-23 15:07:30 · 228 阅读 · 0 评论 -
34.Vue.js :登录状态保存
HTTP请求是无状态的cookie保存在客户端 数据量小（很多站点对cookie的大小和数量都进行了限制） 不安全（别人可以分析存放在本地的cookie，并进行cookie欺骗，也可能被拦截）session保存在服务器端 安全 session可以依赖cookie，也可以不依赖使用 url 访问量增多，占用服务器资源，如果资源挂了，所有保存的信息都没了 token 服务器...原创 2019-04-04 14:44:00 · 857 阅读 · 0 评论 -
07.Vue.js : v-model 双向数据绑定
v-model: 用来双向数据绑定，就是model和view中的值进行同步变化; 只能运用在表单元素中--(input, select, textearea);<!DOCTYPE html><html lang="en"><head> <title>v-model</title> <m...原创 2019-03-18 06:42:33 · 145 阅读 · 0 评论 -
06.Vue.js : v-for 指令
2.20+版本里,组件中使用v-for时,key现在是必须的;key是用来标识唯一身份的;注意:v-for 循环的时候,key属性只能使用 number或者string key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值; 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的字符串/数字类型 :k...原创 2019-03-18 06:20:25 · 241 阅读 · 0 评论 -
26.Vue.js :创建动态组件
<!DOCTYPE html><html lang="en"><head> <title>动态创建组件</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca...原创 2019-03-24 19:28:00 · 402 阅读 · 0 评论 -
05.Vue.js : v-bind指令
绑定属性的指令 简写:在v-bind中,可以写合法的JS表达式<input type="button" value="按钮" :title="mytitle+123">v-bind可以用来动态绑定属性,使用方式v-bind:属性名='data里面的属性'可以向绑定什么属性就绑定什么属性,这种绑定在后面组件开发的时候很常用<div id='app'> &l...原创 2019-03-17 19:44:32 · 307 阅读 · 0 评论 -
04.Vue.js 指令: v-text/ v-html/v-cloak
v-textv-text 指令也可以用来渲染文本，凡是以v-开头的就是指令，指令的功能就是增强html标签的功能 使用：在标签属性位置上写v-text='属性名'; 和插值表达式的使用区别： 插值表达式写在标签的innerHTML位置，而v-text写在标签属性位置，平时推荐使用{{}}v-htmlv-html 可以用来渲染带标签的文本；...原创 2019-03-17 19:30:15 · 196 阅读 · 0 评论 -
03.Vue.js : 插值表达式的使用
<!DOCTYPE html><html lang="en"><head> <title>插值表达式的使用</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-03-17 19:13:59 · 1113 阅读 · 0 评论 -
02.Vue版helloworld体会MVVM
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=d原创 2019-03-17 18:36:12 · 166 阅读 · 0 评论 -
01.Vue.js : 学习之课前准备
1.浏览器插件Vue.js devtools2.Vs Code插件☆自动补全标签 Auto close Tag Auto Complete Tag Auto Rename Tag☆开启一个服务器浏览HTML网页,第一次使用需要Ctrl+shift+p输入 live server 选择open Live Server☆路径自动补全 Path Intelli...原创 2019-03-17 18:18:00 · 186 阅读 · 0 评论 -
09.Vue.js : v-if 和 v-show
<!DOCTYPE html><html lang="en"><head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"&...原创 2019-03-21 17:16:40 · 124 阅读 · 0 评论 -
10.Vue.js : 自动获取焦点dom版本-ref
mountedmounted 钩子函数很特殊，他表示页面一加载进来就执行函数里面的内容（和window.onload类似）；注意：mounted钩子函数的名字不能随便取，不能写在methods属性中refref 属性表示对dom的引用，它的值可以随便取，但是不能重复<input type="text" v-model="newId" id='inputId' ref...原创 2019-03-22 13:37:00 · 1131 阅读 · 0 评论 -
15.Vue.js :axios
axios(基于promise的HTTP库）1.http 请求报文 浏览器与服务器数据交互是遵循http 协议的，当浏览器要访问服务器的时候，浏览器需要将相关请求数据提交给服务器（例如：浏览器的信息，url地址，参数等），通常是通过请求报文来提交的请求报文的格式分为： 1.请求报文行 2.请求报文头 3.请求报文体 2.http 响应报文 ...原创 2019-03-23 06:54:00 · 171 阅读 · 0 评论 -
14.Vue.js 小Demo
<!DOCTYPE html><html lang="en"><head> <title>列表展示删除添加</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-03-23 06:01:02 · 175 阅读 · 0 评论 -
17.Vue.js :过渡和动画 animate动画库
<!DOCTYPE html><html lang="en"><head> <title>Vue动画</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...原创 2019-03-23 11:11:19 · 1271 阅读 · 0 评论 -
16.Vue.js : 过渡和动画 css类名
显示隐藏<!DOCTYPE html><html lang="en"><head> <title>Vue动画</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...原创 2019-03-23 10:48:51 · 165 阅读 · 0 评论 -
13.Vue.js : watch监听器/深度监听
watchwatch监听器用来监听data中数据的值，只要监听的数据一变化，它就能执行相应的函数.创建监听器通过watch属性，它是一个对象.开发时，能用computed实现的就用computed需要执行异步操作的时候，就要用到watch<!DOCTYPE html><html lang="en"><head> <titl...原创 2019-03-22 17:52:36 · 546 阅读 · 0 评论 -
12.Vue.js : computed
<!DOCTYPE html><html lang="en"><head> <title>computed</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-03-22 15:16:20 · 181 阅读 · 0 评论 -
11.Vue.js : 创建过滤器-Vue.filter()
Vue.filter() <tr v-for='(item,index) in list' :key='index'> <td>{{item.id}}</td> <td>{{item.name}}</td> <!-- 在需要过滤的数据后面加上管道符 |过滤器名称 --> <t...原创 2019-03-22 14:46:55 · 481 阅读 · 0 评论 -
08.Vue.js : v-on 事件绑定
<!DOCTYPE html><html lang="en"><head> <title>v-on</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2019-03-21 10:46:10 · 142 阅读 · 0 评论