vue学习笔记
vue学习笔记
不收藏找不到我
这个作者很懒,什么都没留下…
展开
-
vue2.0学习笔记14、常用自定义指令
vue常用自定义指令原创 2022-12-01 13:32:26 · 117 阅读 · 0 评论 -
vue3.x新功能-笔记,更新中...
文章目录1、生命周期2、setup(1)参数(2)消失的this(3)获取store、route、router3、ref、isRef(1)ref(2)isRef4、reative、isReactive(1)reative(2)isReactive5、toRef6、toRefs7、readonly、isReadonly(1)readonly(2)isReadonly8、computed9、watch10、watchEffect11、Hook1、生命周期 vue2.原创 2021-06-11 17:24:38 · 351 阅读 · 1 评论 -
vue3.x实践经验-1、mapState、mapGetters、mapMutations、mapActions
一边学习vue3.x,一边实践,最近在做项目时,使用computed引入store中state的数据时,总是觉得很麻烦,想起新版兼容2.x,就想着引入mapState,可是怎么用都不对劲。后来,突然间醒悟过来,<font color=red>**使用toRef或toRefs,就能实现mapState、mapGetters效果。**</font>1、示例代码...原创 2021-06-04 21:21:27 · 6029 阅读 · 5 评论 -
vue3.x学习笔记-2、windows环境下nginx的安装与反向代理
1、安装教程及nginx命令参考地址:https://blog.csdn.net/ForeverBana/article/details/1068504552、反向代理配置(1)前端部署在tomcat的fast文件夹下,端口号为8080,即前端项目的地址为:http://ip:8080/fast(2)打开conf文件下的nginx.conf文件server { listen 9999; # nginx自己的端口号 server_name ip:8080原创 2021-05-28 09:29:35 · 149 阅读 · 0 评论 -
vue3.x学习笔记-1、vue.config.js配置项说明(部分,不完整)
module.exports = { //路由的根路径, publicPath: '/fast', //打包后形成的文件夹名称 outputDir:'fast', productionSourceMap: false, // 设置为false,部署后控制台看不到.vue文件了 // 配置webpack打包 configureWebpack: (config) => { // 取消console打印 config.optimiz原创 2021-05-28 09:17:46 · 157 阅读 · 0 评论 -
Vue2.0学习笔记-13、vue-resouces(get、post以及jsonp跨域请求)
1、get和post请求代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!---引入vue-resouces资源,必须在引入vue原创 2020-11-23 20:04:48 · 190 阅读 · 0 评论 -
Vue2.0学习笔记-12、生命周期、生命周期函数(又名生命周期钩子,又名生命周期事件)
这里写目录标题1、什么是生命周期?2、什么是生命周期函数(又名生命周期钩子,又名生命周期事件)?1、什么是生命周期?所谓生命周期:就是指一个Vue示例从创建、运行一直到销毁的过程,(相当于人的一生,从出生到死亡)2、什么是生命周期函数(又名生命周期钩子,又名生命周期事件)?在一个Vue实例的生命周期内,总会发生各种各样的事件(函数),这些事件(函数)称为生命周期函数(又名生命周期钩子,生命周期事件),什么事件、函数、钩子,其实都是一回事,就是一个函数,(相当于你叫张三,家里叫你小名三儿,同学叫你外号原创 2020-11-21 17:11:21 · 66 阅读 · 0 评论 -
Vue2.0学习笔记-11、自定义全局指令、自定义私有指令
自定义指令1、自定义全局指令(1)语法三级目录2、自定义私有指令二级目录三级目录1、自定义全局指令(1)语法定义://Vue.directive函数的第一个参数是自定义指令名称,第二个参数是一个对象//指令名称不用加v-,调用自定义命令是,统一都是:v-指令名称Vue.directive('指令名称', { bind: function(参数1,参数2,参数3,参数4){ }, inserted: function(参数1,参数2,参数3,参数4){ }, upd原创 2020-11-18 15:49:00 · 216 阅读 · 0 评论 -
Vue2.0学习笔记-10、键盘按键修饰符以及自定义按键修饰符
前面我学习了几个事件修饰符,今天又学习了几个新的与键盘按键相关的事件修饰符,以及如何自定义按键修饰符。1、按键修饰符:在我去vue官网上截这张图时,我发现vue的首页不是用vue写的,xswl示例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net原创 2020-11-11 20:00:14 · 304 阅读 · 0 评论 -
Vue2.0学习笔记-9、全局过滤器和私有过滤器的使用
vue过滤器1、全局过滤器(1)语法(2)示例a、过滤器的基本使用b、过滤器的串联使用c、给过滤器的回调函数增加参数2、私有过滤器(1)语法(2)示例vue中的过滤器只能在插值表达式或者v-bind指令中使用1、全局过滤器(1)语法定义过滤器:Vue.filter('过滤器名称',function(参数1,参数2,...,参数n){//代码}过滤器的调用: <div id="app"> {{msg|过滤器名称}} <input :style="style原创 2020-11-11 19:29:00 · 286 阅读 · 0 评论 -
Vue2.0学习笔记-1、v-cloak作用以及{{}}(插值表达式)、v-text和v-html的共同点和不同点
1、v-cloak的作用:让我们看下面这段代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <scrip原创 2020-11-08 19:23:26 · 201 阅读 · 1 评论 -
Vue2.0学习笔记-2、v-bind指令
结论:(1)v-bind指令用于给html标签绑定属性,请看示例(1):(2)v-bind指令后面双引号的部分可以执行部分js代码,类似但不扽同化于原生js中的eval()函数,利用这个特性,我们可以实现示例(2):(3)虽然双引号内可以执行简单的js代码,比如加减乘除,但是不能执行函数。(我测试了alert和console.log都不行,自定义函数也不行)(4)v-bind指令的简写形式为 :属性名,即冒号+属性名示例1:代码:<!DOCTYPE html><html la原创 2020-11-09 14:42:32 · 157 阅读 · 0 评论 -
Vue2.0学习笔记-3、vue实例中的data和method属性的一些有趣的地方
在上一篇文章我测试v-bind指令中能不能执行函数时,发现了这样一个有趣的事情:(1)vue实例中的data和methods属性都可以写入函数,并且当函数名相同时,methods属性中定义的函数被忽略,执行data属性中的函数,请看示例1;(2)methods属性中也可以绑定数据,当数据名称重名时,也是忽略methods中的数据;请看示例2(3)此外,methods属性中也可以绑定数据,但是它不会显示你所绑定的数据,而是显示一个字符串,具体情况示例3示例(1):代码:<!DOCTYPE h原创 2020-11-09 15:05:44 · 569 阅读 · 0 评论 -
Vue2.0学习笔记-4、v-on指令以及事件修饰符and Vue实例挂载的注意事项
结论:v-on指令是用来给html标签的事件绑定函数的,其格式为:v-on:事件名称=“函数调用”;其简写为:@事件名称=“函数调用”,注意:这里的事件名称,不带on,请看示例示例:代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initia原创 2020-11-09 19:27:42 · 201 阅读 · 0 评论 -
Vue2.0学习笔记-5、v-model指令实现双向数据绑定(唯一一个能够实现双向数据绑定的指令)
1、什么是数据双向绑定?所谓的数据双向绑定就是用户对界面的操作可以实时的同步到数据中,同时,数据又会展示到界面上。话不多说,看下面的例子:代码:这里通过v-bind指令实现数据绑定,注意,这里的数据绑定不是双向绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsde原创 2020-11-10 11:26:24 · 696 阅读 · 0 评论 -
Vue2.0学习笔记-6、vue中如何使用样式-(1)使用class样式(v-bind指令的应用)
以下都是通过v-bind指令实现标签绑定class样式(1)数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .red{ color:red } .thin{ font-weight: thin; } .italic{原创 2020-11-10 13:48:41 · 629 阅读 · 0 评论 -
Vue2.0学习笔记-6、vue中如何使用样式-(2)使用内联样式(v-bind指令的应用)
同样,这也是v-bind指令实现的(1)直接在元素上通过:style的样式,书写样式对象(2)将样式对象,定义到vue实例的data属性中,并通过:style的形式使用(3)在:style中通过数组,引用vue实例的data属性中的多个样式对象【注】当遇到带"-"的样式时,必须放在引号内,请仔细看下面的例子(background-color属性)<!DOCTYPE html><html> <head> <meta charset="utf-8"&g原创 2020-11-10 14:09:56 · 230 阅读 · 0 评论 -
Vue2.0学习笔记-7、v-for指令以及key属性的使用、注意事项
v-for指令很像原生js中的foreach方法。v-for指令的使用1、使用v-for指令遍历普通数组(1)语法(2)示例2、使用v-for指令遍历对象数组(1)语法(2)示例3、使用v-for指令遍历对象(1)语法(2)示例4、使用v-for指令遍历数字(1)语法(2)示例5、重点:v-for指令中key属性的搭配使用不使用key属性使用key属性使用key属性时的注意事项1、使用v-for指令遍历普通数组(1)语法第一种调用方式v-for="参数一,参数二 in 变量"第二种调用方式v原创 2020-11-11 09:38:14 · 588 阅读 · 0 评论 -
Vue2.0学习笔记-8、v-if和v-show指令的使用以及共同点和区别
上代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <原创 2020-11-11 10:27:32 · 238 阅读 · 0 评论