![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
冰雪奇缘lb
这个作者很懒,什么都没留下…
展开
-
vue-router原理
hash路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title原创 2021-09-30 16:56:16 · 82 阅读 · 0 评论 -
vue项目环境搭建——待更新(有时间补充,占个位置担心之后忘掉)~
axios网络拦截vuexv-router跨域git-ignore原创 2021-05-24 09:05:00 · 51 阅读 · 0 评论 -
VUE的扩展运算符
含义:扩展运算符( spread )是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。操作数组: //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2', '3']; console.log(...iArray); // 打印结果 1 2 3原创 2021-05-23 15:05:11 · 511 阅读 · 0 评论 -
vue中的深度选择器和Scoped CSS
深度选择器/deep/Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。vue组件中,在style设置为scoped的时候,里面在写样式对子组件是不生效的,如果想让某些样式对子组件生效,可以使用 /deep/或::v-deep 深度选择器。<-- less语法 -->.wrap{ .class1{ font-size: 12px; } /deep/ .class2{ font-size: 20px; //对原创 2021-04-02 09:01:35 · 241 阅读 · 0 评论 -
vue项目中,定义并使用 全局变量,全局函数
vue项目中,定义并使用 全局变量,全局函数原创 2021-03-24 11:26:12 · 74 阅读 · 0 评论 -
vue中Scoped CSS和css的/deep/ 深度选择器
/deep/ 深度选择器Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范。vue组件中,在style设置为scoped的时候,里面在写样式对子组件是不生效的,如果想让某些样式对子组件生效,可以使用 /deep/或::v-deep 深度选择器。<-- less语法 -->.wrap{ .class1{ font-size: 12px; } /deep/ .class2{ font-size: 20px; //原创 2021-03-23 16:38:08 · 840 阅读 · 0 评论 -
路由编程式导航
用法举例:main.js文件import Vue from 'vue'// ES6模块导入方式commoniS var Vue = require("vue")import App from './App.vue'import router from './router'Vue.config.productionTip = falsenew Vue( router, render: h =>h(App)}).$mount('#box')Vue组件使用<te原创 2021-03-02 11:29:38 · 57 阅读 · 0 评论 -
Vue中的扩展运算符 ...
含义:扩展运算符( spread )是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。操作数组://里面放自己定义的方法methods: {/*** 把数组中的元素孤立起来*/iClick() {let iArray = [‘1’, ‘2’, ‘3’];console.log(…iArray);// 打印结果 1 2 3}, /** * 在数组中添加元素 */ iClick3() { let iArray = ['1',原创 2021-02-07 14:35:02 · 5804 阅读 · 1 评论 -
git一个vue项目怎么在本地运行
git一个项目之后在本地运行往往会出错,这是因为运行环境不匹配导致的,而经常出问题的就是node.js版本,所以建议安装nvm来管理不同版本的node.js,这样可以灵活切换。编译:npm install运行:npm run dev/serve报错:node版本太高或太低用nvm切换或下载node.js相关版本删除项目目录中node_modules文件夹(如果依然报错把package-lock.json也删掉)编译:npm install运行:npm run dev...原创 2021-01-20 20:27:42 · 771 阅读 · 0 评论 -
elment-ui中的栅格系统
elment-ui中的栅格系统原创 2020-10-23 15:04:11 · 897 阅读 · 0 评论 -
Vue图片显示失败设置默认图片
Vue图片显示失败设置默认图片原创 2020-10-22 21:56:55 · 512 阅读 · 0 评论 -
解决使用vue ui命令报export { default as v1 } from ‘./v1.js‘
解决使用vue ui命令报export { default as v1 } from ‘./v1.js‘原创 2020-09-02 15:05:53 · 1111 阅读 · 0 评论 -
Vue入门搭建
1.导入vue开发链接<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.设置el和data3.使用Vue简洁语法代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi原创 2020-08-19 15:22:20 · 92 阅读 · 0 评论 -
v-if/v-if-else/v-show
v-if/v-if-elsevue中的v-if,v-else-if,v-else的逻辑原理和java以及其他便成为语言一样,只不过用法有点奇怪,前面需要带一个v-,用习惯就可以了,下面我们来看看v-show,具体用法可以参考以下代码:<!DOCTYPE html><html lang="en"><head> <meta charset="...原创 2019-11-09 16:46:57 · 389 阅读 · 0 评论 -
动态绑定的两种方式
第一种:属性绑定第二种:计算属性绑定区别:计算属性是确定发生变化后才进行更新·其实知识点还是之前总结的,没有新知识点,直接上代码吧!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...原创 2019-11-07 21:38:42 · 270 阅读 · 0 评论 -
computed-计算属性
computedcomputed和methods、watch最大的区别在于只有在当前的属性发生变化之后才会被触发。所以computed可以很大程度上提高优化的程度。原创 2019-11-07 17:41:02 · 6647 阅读 · 0 评论 -
特殊属性ref
refref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。对于API我们把ref和$refs比较着看。说一下我所理解的东西吧!在学习的过程中,我之前所学的mousemove鼠标滑动事件有点类似,先看mousemove的代码段:<div id="...原创 2019-11-07 15:10:32 · 134 阅读 · 0 评论 -
v-model双向数据绑定
v-modelv-model是在表单控件或组件上创建双向绑定。使我们输入的内容能够动态改变data中变量的值并输出,参考API来看看具体功能v-model可以被.lazy、.number、.trim修饰,具体功能api上介绍的很详细,lazy这个功能可能介绍的比较难懂,经过测试它的功能就是当鼠标失去焦点是修改输入内容,而不是时刻监听,提高了项目性能。代码示例如下:<!DOCTY...原创 2019-11-06 21:07:59 · 150 阅读 · 0 评论 -
Vue键盘事件keyup、keydown
Vue键盘事件keyup、keydownVue中的键盘事件keyup表示键盘按键抬起事件,keydown表示键盘按下事件;两个用法相同。用法比较简单,直接跟在v-on后面使用,示例:<input type="text" v-on:keydown="logName">,当有键盘按键按下时调用logName()函数。可以指定某个按键触发,例如制定输入内容后,按enter键触发,代码...原创 2019-11-06 15:29:42 · 13887 阅读 · 1 评论 -
v-on事件修饰符
v-on事件修饰符Vue事件修饰符的功能是控制事件发生的设定,Vue API关于事件修饰符有以下内容:使用方法:以once为例:这时鼠标单击只触发一次,之后便不再触发,洽谈用法类似,不再赘述。...原创 2019-11-05 22:18:43 · 115 阅读 · 0 评论 -
v-on事件绑定
v-on中单击事件、双击事件、鼠标划过事件v-on事件绑定涉及的内容还不少,下面是我总结的部分内容:v-on相当于监听,监听到相关操作可以直接运行后面所跟的内容,例:<button v-on:click="age++">add a year</button>也可以调用函数,例<button v-on:click="age--">subtract a yea...原创 2019-11-05 21:55:52 · 268 阅读 · 0 评论 -
v-html的使用
v-html如果在HTML代码中想嵌入一个代码块,代码块中有一些标签能够按照HTML语法解读出来,就需要v-html来实现了,例如下面的代码:HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...原创 2019-11-04 20:25:56 · 11341 阅读 · 0 评论 -
methods的使用
最近在学习Vue,感觉methods还是有必有总结一下的,看的米斯特吴的视频,讲的很精髓。下面是我对methods的理解。methods是Vue对象中作为函数块的包装盒,methods中可以包含多个函数,函数也可以传参,同时在HTML代码中可以直接使用,例如methods中有greet(time)函数,可以这样使用<p>{{greet('evening')}}</p>,...原创 2019-11-04 20:18:52 · 9230 阅读 · 3 评论 -
v-bind
v-bind的使用1.在Vue中,提供的用于绑定属性的指令2.v-bind: 指令可以被简写为: 冒号 要绑定的属性3.v-bind中,可以 写合法的js表达式用法示例:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Document</t...原创 2019-10-31 21:39:14 · 287 阅读 · 0 评论 -
插值表达式、v-text和v-html
v-cloak、v-text和v-htmlv-cloak1.v-cloak和插值表达式结合使用2.用来解决插值表达式的闪烁的问题3.不覆盖元素中原本的内容4.不能读取HTML标签v-text1.没有闪烁问题(网速慢导致)2.会覆盖元素中原本的内容3.不能读取HTML标签v-html1.会覆盖元素中原本的内容2.能够读取HTML标签代码实例:<!DOCTYPE ht...原创 2019-10-31 21:03:18 · 509 阅读 · 0 评论 -
MVC和MVVM的理解和区别
MVC和MVVM在这里插入图片描述MVC是相对于前段和后端分离构建的思想,MVVM是相对于前段来说的,vm作为一个调度者,v 和 m 不能直接交互,需要vm作为中介。MVVM的简单代码实例如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>V...原创 2019-10-31 18:24:32 · 423 阅读 · 0 评论