vue
文章平均质量分 79
百日梦想家
这个作者很懒,什么都没留下…
展开
-
前端跨域访问
文章目录什么是同源策略什么是跨域请求请求跨域了,那么请求发出去没有?cors跨域实现post跨域请求,必须要设置Content-Type什么是同源策略同源是指"协议+域名+端口"三者相同。同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。什么是跨域请求当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。同源策略限制内容有:Cookie、LocalStorage、Indexed原创 2021-05-08 23:00:44 · 317 阅读 · 2 评论 -
webpack配置使用vue
文章目录1.安装Vue(通过npm)2. 安装Vue-loader3.配置vue-loader与plugin4.配置vue引入问题方法1方法2(推荐)1.安装Vue(通过npm)npm i vue -S2. 安装Vue-loadernpm i vue-loader vue-template-compiler -D3.配置vue-loader与plugin配置loader与plugin......const path = require('path');const HtmlWebpa原创 2021-04-17 13:38:17 · 651 阅读 · 2 评论 -
Babel-loader处理编译JS(es6,es7)高级语法
为什么安装Babel-loaderwebpack只能处理部分的javascript高级语法,有一些高级语法的新特性,webpack处理不了通过Babel,可以帮我们将高级语法转化为低级语法再交给webpack官方文档 配置babelwebpack配置babel 官网地址,点击进入安装步骤安装相关包npm install -D babel-loader @babel/core @babel/preset-env webpacknpm install -D @babel/plugin-原创 2021-04-16 11:26:03 · 2047 阅读 · 0 评论 -
webpack-dev-server的安装使用
安装运行环境webpack (version):前提:webpack-dev-server依赖webpack,我们需要先安装webpack如果是webpack4以上我们还需要安装webpack-clinpm i webpack -dnpm i webpack-cli -d安装webpack-dev-servernpm i webpack-dev-server -d...原创 2021-04-13 14:36:10 · 10737 阅读 · 0 评论 -
webpack的安装使用
webpack的作用进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less编译成css,ES6 语法 转成 ES5等等。减少io请求。通常我们在请求后,会返回一个html到浏览器。这时,我们如果打开控制台,就会发现在html页面通过script,link等标签引用的静态资源, 浏览器会再次发出请求去获取这些资源。但是webpack的打包,将所有的静态资源都合并好了,减少了io请求。安装使用1.安装node因为webpack是基于node环境下运行的,所以我们首先要原创 2021-04-11 21:46:37 · 596 阅读 · 0 评论 -
nrm与cnpm
文章目录nrm1.什么是nrm?2.使用安装npm与cnpmnpmcnpmnrm1.什么是nrm?nrm(npm registry manager )是npm的镜像源管理工具,有时候国外资源太慢,使用这个就可以快速地在 npm 源间切换2.使用安装安装 全局安装nrmnpm install -g nrm使用 执行命令nrm ls查看可选的源。其中,带*的是当前使用的源nrm ls切换 如果要切换到taobao源,执行命令nrm use taobao。nrm use原创 2021-04-10 21:47:53 · 733 阅读 · 0 评论 -
Vue实例的computed属性
Vue实例的computed属性作用将一个方法函数作为data值一样引用在 computed中,可以定义一些属性,这些属性,叫做【计算属性】,计算属性的,本质,就是一个方法,只不过,我们在使用这些计算属性的时候,是把它们的名称,直接当作属性来使用的;并不会把计算属性,当作方法去调用;使用注意事项计算属性,在引用的时候,一定不要加(去调用,直接把它当作普通属性去使用就好只要计算属性,这个function内部,所用到的任何data中的数据发送了变化,就会立即重新计算这个计算属性的值。任何数原创 2020-09-29 14:49:55 · 237 阅读 · 0 评论 -
Vue实例watch属性监听data
文章目录作用语法案例作用vue的watch属性可以用来监听data里面指定值的变化语法var vm=new Vue({ el:'#app', data:{ first:'', next:'', result:'' }, methods:{}, watch:{ // 方法名就是指定要监听的data属性名,方法提供了两个值,newVal和oldVal故名思意 // 即是改变之后的新值,和改变之前老值原创 2020-09-29 12:19:00 · 1675 阅读 · 0 评论 -
学习vue过程中遇到的问题
vue二维数组渲染vue的渲染对data里面的数据进行监听再进行渲染,但是如果要是里面有个二维数组就会渲染不成功,针对二维数组的渲染,最好是直接二维数组的row进行替换,而非对col进行替换...原创 2020-09-23 12:22:26 · 273 阅读 · 0 评论 -
vue-router路由的简单使用
下载导入导入vue.js导入vue-router.js 注意:导入vue-router之前一定要导入vue.js<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>语法实例<!DOCTYPE html><html lang原创 2020-09-19 21:39:01 · 172 阅读 · 0 评论 -
Vue中使用ref属性来获取DOM和组件
使用Vue自带的属性refs来获取DOM元素语法<body> <div id="app"> <!-- 在想要获取的DOM对象上添加ref方法,ref里面写别名方便之后获取 --> <h1 ref="myf01">hello world</h1> <button type="button" @click="getElement">点击</button> </div> <原创 2020-09-18 20:02:26 · 4156 阅读 · 0 评论 -
Vue组件详解
文章目录什么是组件?模块化与组件化组件定义命名规则创建组件的方式方式一方式二方式三组件的唯一性什么是组件?什么是组件:组件的出现,就是为了拆分vue实例的代码里的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可模块化与组件化名称概念模块化是从代码逻辑角度进行划分的;方便代码的分层开发,保证每个功能模块的职能单一组件化是从UI界面的角度进行划分的;前端的组件化,方便UI组件重用组件定义命名规则推荐全小写,然后原创 2020-09-08 11:29:32 · 479 阅读 · 0 评论 -
transition-group标签实现列表过渡动画
文章目录为什么需要transition-group语法没有出场动画与有出场动画比较为什么需要transition-group因为我们有时不只是需要单个元素动画,有时需要一整个列表都附带动画transition标签实现不了列表的群组动画,于是此时就有了transition-group语法appear :用来指定是否在出场时用渲染动画tag:用来指定transition-group标签渲染后的默认标签,不指定,transition-group默认被渲染成spantransition-grou原创 2020-08-29 17:32:50 · 2648 阅读 · 0 评论 -
Vue-resource发送网络请求
Vue-resource发送网络请求step1.下载下载地址语法和属性语法支持的方法种类config配置表response属性方法表发送get请求发送post请求注意:发生post请求是,一定要带上emulate,否则会因为网络拦截问题出现错误step1.下载下载地址https://github.com/pagekit/vue-resource语法和属性语法全局使用写法Vue.http.get('/someUrl', [config]).then(successCallback, errorC原创 2020-08-20 16:28:36 · 533 阅读 · 0 评论 -
Vue实例的生命周期
声明周期在一个Vue实例中的声明周期是怎么样的呢Vue实例的运行会触发那些相关的函数呢在一个Vue实例中的声明周期是怎么样的呢Vue实例的运行会触发那些相关的函数呢函数名称作用beforeCreate当Vue实例刚在内存中创立触发,但是只有一些默认的属性和方法,此时Vue的data和methods…属性等都没有声明创建created当Vue实例的method,data等属性在内存中完成创建时触发beforeMountVue会根据用户设置的data和指定的elem原创 2020-08-19 15:44:03 · 134 阅读 · 1 评论 -
vue实现自定义指令
自定义指令什么是指令?注册自定义指令的语法注册全局自定义指令注册局部自定义指令钩子函数作用函数种类注意 (一般初始化元素属性用bind,使用js的方法,应该用inserted和updated)函数参数实例什么是指令?在Vue中指令有v-cloak,v-text,v-on,v-bind,v-for。。。。这些统统都是指令,每个指令都有不同作用注册自定义指令的语法注册全局自定义指令注册局部自定义指令钩子函数作用当使用自定义指令时触发的回调函数函数种类函数名称作用bin原创 2020-08-17 15:41:30 · 712 阅读 · 0 评论 -
Vue中的按键修饰符
按键修饰符使用官方提供的类型自定义按键修饰符案例结果(按enter键触发按键修饰符)使用<input v-on:keyup.[修饰符名称]="submit">官方提供的类型名称.enter.tab.delete (同时捕获删除键和退格键).space.up.down.left.right自定义按键修饰符// 可以使用 `v-on:keyup.f1`Vue.config.keyCodes.f1 = 112案例&l原创 2020-08-17 14:07:37 · 767 阅读 · 0 评论 -
Vue中的filter
filter定义调用注意:实例效果定义<script> Vue.filter(id,function(data[,...]){})</script>定义数据类型解释idstring过滤器的名称function(data,…){}function需要执行的函数,第一个参数必定,肯定是前面传递过来的数据 ,参数可以任意多个调用{{ 参数 | filter名称[ |....] }}注意:当过滤器没有多余参数时,调用时可以不带原创 2020-08-15 14:13:54 · 589 阅读 · 0 评论 -
v-if与v-show
显示元素属性v-if/showv-if特点缺点v-show特点缺点使用注意实例v-if特点每次都会重新删除或创建元素缺点有较高的切换性能消耗v-show特点每次不会重新进行DOM的删除和创建操作,只是切换了元素的display:none 样式缺点有较高的初始渲染消耗使用注意如果元素涉及到频繁的切换,最好不要使用v-if; 而是推荐使用v-show如果元素可能永远也不会被显示出来被用户看到,则推荐使用v-if实例...原创 2020-08-13 15:01:43 · 102 阅读 · 0 评论 -
v-for属性
v-for遍历索引取法遍历数组语法实例遍历对象数组语法实例遍历单个对象(key,value)语法实例遍历普通数字语法注意实例索引取法<!--当遍历数组时,取索引--><div v-for="(item, index) in items"></div><!--当遍历对象时,取索引--><div v-for="(value, key, index) in object"></div>遍历数组语法<div v-for=原创 2020-08-12 15:48:50 · 1766 阅读 · 0 评论 -
Vue对于style属性的应用
Vue对于style属性的应用注意:推荐直接使用对象的方式注意:推荐直接使用对象的方式<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2020-08-12 14:02:24 · 248 阅读 · 0 评论 -
Vue对于class属性的应用
Vue对于class属性的应用实例类(class)传递方式(注意 class属性需要v-bind:绑定)方式一:以数组的形式方式二:在数组中使用三元表达式方式三:在数组中内嵌对象方式四:直接使用对象,易读写(推荐,推荐,推荐)实例类(class)<style type="text/css"> .red{ color:#EE3D11; } .thin{ font-weight: 200; } .italic{ font-style: ita原创 2020-08-12 13:34:07 · 817 阅读 · 1 评论 -
v-model之双向绑定
目录v-model双向绑定v-model与v-bind的区别注意用法结果v-model双向绑定v-model与v-bind的区别代码解释v-bind:v-bind:只能实现数据的单项绑定,从M(model)层自动绑定到V(view)层,无法实现数据的双向绑定v-modelv-model指令,可以实现表单元素和model中的数据的双向绑定注意v-model只能用在表单元素中,例如input,select,radio,textarea…v-model指令的用法与v原创 2020-08-11 18:01:42 · 219 阅读 · 0 评论 -
v-on:属性的self修饰符案例
将self修饰符放在button按钮的外层div上,button的click事件起作用时,外层的inner并没有执行click事件**注意:**虽然被self修饰符加持,不会被冒泡机制影响,单不代表冒泡机制会被阻止原创 2020-08-10 18:27:04 · 384 阅读 · 0 评论 -
capture捕捉模式
什么是capture捕捉模式?说明: 简单来说就是,当一个元素开启了capture模式时,它会自动对自己内部的子元素所做出的的事件反应,内部元素执行click,它随之做click动作实例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1">原创 2020-08-10 18:08:27 · 2129 阅读 · 0 评论 -
谜一样的冒泡事件(javascript)
什么是冒泡事件?代名词说明脚本中的冒泡事件就是当设定了多个div的嵌套时;即建立了父子关系,当父div与子div共同加入了onclick事件时,当触发了子div的onclick事件后,子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发,导致了页面混乱。这就是冒泡事件。实例代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /原创 2020-08-10 17:19:29 · 125 阅读 · 0 评论 -
跑马灯案例
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>跑马灯效果</title> <style type="text/css"> /* 去除插值表达式闪烁问题 */ [v-clo原创 2020-08-09 16:02:25 · 271 阅读 · 0 评论 -
v-on:属性
v-on:属性作用更多详情可以参考官方API实例作用v-on:属性是vue中用来提供事件绑定的机制,需要与Vue构造函数中的methods属性来配合使用v-on:属性支持浏览器上所有常用事件,例如click事件,change事件,mouseover事件…更多详情可以参考官方APIhttps://cn.vuejs.org/v2/api/#v-on实例<!DOCTYPE html><html> <head> <meta charset="utf原创 2020-08-09 14:29:03 · 720 阅读 · 0 评论 -
v-bind:属性
v-bind:属性v-bind:属性作用注意v-bind:属性的简写v-bind:属性作用v-bind:属性是Vue提供用来绑定属性的指令,当一个普通的属性前面带上了v-bind:,那么Vue就会把当前属性的值认为是表达式,用js语法来解析注意v-bind:属性会导致Vue将所指的属性的值当做合法表达式来处理,所有支持我们在属性值里面做改变v-bind:属性的简写v-bind:可以简写成:...原创 2020-08-09 13:43:57 · 1628 阅读 · 0 评论 -
v-cloak与v-text属性,v-html属性
v-cloak与v-text属性,v-html属性v-cloak属性作用什么是插值表达式闪烁?使用v-cloak来解决插值闪烁问题v-cloak属性作用主要用来帮助我们解决插值表达式闪烁的问题什么是插值表达式闪烁?当我们网速加载速度比较慢的时候,插值表达式还没有渲染完成时使用v-cloak来解决插值闪烁问题...原创 2020-08-09 10:15:36 · 221 阅读 · 0 评论