sayoko06的博客

直接上nginx配置upstream web { server 10.10.10.10;} server { listen 80; server_name aaa.test.com; proxy_intercept_errors off; ignore_invalid_headers off; client_max_body_size 512M; proxy_s

需求： 项目中摇实现在线浏览代码功能，选择使用codemirror，这里使用了一个别人分装的vue-codemirror插件1.安装npm install vue-codemirror --save2.在组件中引用<codemirror :value="fileContent" :options="cmOptions"></codemirror>//引入vue-codemirrorimport { codemirror } from '...

需求 项目新版本新功能，需要再新页面添加埋点功能，记录用户的使用情况和使用习惯。因为前端项目使用的是Vue，所以选择使用Vue的自定义指令来实现埋点功能；埋点，主要记录 “谁 什么时候 做了什么事情”，直接上代码：1. 自定义指令import Vue from 'vue'// 自定义埋点指令Vue.directive('track', { //钩子函数，只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 /* * el:指令所绑定...

直接贴代码留作笔记data() { var validateName = (rule, value, callback) =&gt; { //判断是否符合条件，调用callback回调 if (value=== true) { callback(new Error("名称已经存在")); } else { callback(); } }; return ...

需求：监听Esc事件退出全屏，使用 document.addEventListener 在mounted中定义如下代码：mounted() { //监听键盘按键事件 let self = this; this.$nextTick(function () { document.addEventListener('keyup', function (e) { //此处填写...

项目中有时候用到需要再页面中使用js插入一个vue组件，这时候就用到vue的手动挂载$mount，Vue官网$mount()手动挂载限制：只在由new创建的实例中遵守。一、首先引入你要插入的组件和Vueimport ShowBox from './show/ShowBox';import Vue from "vue";二、手动挂载，js插入组件//手动挂载，必须使用这...

可以使用如下正则匹配路由，只有是数字的才会进入这个路由Vue.js官网路由匹配{ path: 'test/:id(\\d+)', component: () =&gt; import ('@/src/Test.vue'), name: 'Test', meta: { title: 'test/' }}...

正则用法在JavaScript中正则表达式用法为：/正则表达式特殊字符/修饰符(可选)特殊字符这里列一下正则的特殊字符及其用法，加深理解和映象。* \ 将字符变为特殊或非特殊字符。如 n 变为换行符 \n，特殊符号 ( 变为字符 \(。* ^ 匹配字符串起始位置。* $ 匹配字符串结束位置。* * 匹配前面的子表达式零到多次。* + 匹配前面的子表达式一到多次。* ...

参考vue官方，VUE.js组件内导航守卫。可以在路由组件内直接定义以下路由导航守卫：beforeRouteEnterbeforeRouteUpdate(2.2 新增）beforeRouteLeave其中beforeRouteUpdate守卫，对于带有动态参数路径的路由间跳转，用处很大。const Foo = { template: `...`, beforeRou...

在前后端分离开发过程中，后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。 与以往的自己模拟的假数据不同，mockjs可以带给我们的是：在后台接口未开发完成之前模拟数据，并返回，完成前台的交...

GitHub链接第一步：npm安装npm install mavon-editor --save第二步：在main.js中引用// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf wi...

 在vue中，使用axios请求传递Date类型的参数，如果需要格式化数据，可以添加serializeDate回调方法，代码如下：qs.stringify(params, { serializeDate: (date) =&gt; { //处理qs中date时间格式，转换为中国时区时间 return utils.date.format(date, "yyyy-MM-dd")...

this.$route.params.id 可以获取路由最后参数 50779this.$route.params.path 可以获取到根路径下的整个路径 /test/42/task/128

需求：需要在v-html的html字符串的button中绑定点击事件，需要点击后做一些操作，必须渲染成html，但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。&lt;div class="code-review"&gt; &lt;div v-html="html" v-highlight @click="addComment($event)"&gt;&l...

文章内容源于《Vue.js实战》一、了解v-bind指令首先介绍基本用法和它的语法糖，主要用法是动态更新HTML元素上的属性：&lt;div id="app" &gt; &lt;a v-bind:href="url"&gt;链接&lt;a&gt; &lt;img v-bind:src="imgUrl"&gt; &lt;a :href ="url

1、v-bind：响应并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  v-bind:bb2、v-on：用于监听DOM事件； 例如：v-on:click  v-on:keyup3、v-model：数据双向绑定；用于表单输入等；例如：&lt;input v-model="message"&gt;4、v-show：条件渲染指令，为DO...

一、v-if  v-else-if  v-else&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/ja

一、用 v-for 把一个数组对应为一组元素我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。&lt;ul id="example-1"&gt; &lt;li v-for="item in items"&gt; {{ item.messag...

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组，例如：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表渲染_过滤与排序&lt;/title&gt;

在项目中，可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。所以会导致很多组件里都会有一个包含基础组件的长列表：但是只用于模板的一小部分。import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import ...

vue-router 中hash模式和history模式。在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。mode:"hash"; mode:"history";hash—— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http:...

在设置vue的路由时，有时候会出现一个组建中设置多个&lt;router-view/&gt;可以通过&lt;router-view&gt;指定name属性来区分router-view，不写名字默认为default。&lt;div&gt; &lt;h1&gt;User Settings&lt;/h1&gt; &lt;NavBar/&gt; &lt;router-view/&gt

1. v-text作用 ： 操作元素中的纯文本，我们最常用的写法快捷方式 ： {{}} 2. v-html作用 ： 操作元素中的HTML标签v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出...

       在前端进行keyup时间去触发搜索时，由于事件被频繁的触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃，我们需要给keyup时间做一个延迟执行。debounce去抖        当调用函数n秒后，才会执行该动作，若在这n秒内又调用该函数则将取消前一次并重新计算执行时间，举个简单的例子，我们要根据用户输入做搜索，每当用户按下键盘的时候都可以取消前一次...

文章内容源于《Vue.js实战》一、什么是计算属性模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：&lt;div id="example"&gt; {{ message.split('').reverse().join('') }}&lt;/div&gt;这里的表达式包含3个操作，并不是很清晰，所以遇到复杂逻辑...