2021 年 1月随笔档案 - Tsunami黄嵩粟

后端给前端rtmp和flv直播播放方法

摘要：const suffixal = this.videoObj.videoServer .split('?')[0] .split('.') .pop() var router = this.$router.resolve({ name: 'video', query: { url: this.vid 阅读全文

posted @ 2021-01-26 17:13 Tsunami黄嵩粟阅读(627) 评论(0) 推荐(0) 编辑

前端传参中文需要utf-8转一下给后端

摘要：const Msg = this.form.Msg.replace( (/%(u[0-9A-F]{4})|(%[0-9A-F]{2})/gm, $0 => { return escape($0).replace(/(%u)(\w{4})/gi, '&#x$2;') }) ) Msg再传给后端就行 t 阅读全文

posted @ 2021-01-26 17:08 Tsunami黄嵩粟阅读(295) 评论(0) 推荐(0) 编辑

vscode settings.json配置

摘要：{ //指定工作台中使用的文件图标主题；若指定为 "null"，则不显示任何文件图标 "workbench.iconTheme": "vscode-icons", //如果设置成'true'，关于新的版本消息将不再显示 "vsicons.dontShowNewVersionMessage": tru 阅读全文

posted @ 2021-01-26 11:52 Tsunami黄嵩粟阅读(317) 评论(0) 推荐(0) 编辑

使用elementUI组件来完成前台展示

摘要：使用elementUI组件来完成前台展示，当然不是全部都用，有用到的时候，才用。网址：https://element.eleme.cn/#/zh-CN 安装 cnpm i element-ui -S 快速上手全局配置,一次配置，全局好用，缺点：不管你用不用，都加载进来了。在src/main.j 阅读全文

posted @ 2021-01-21 17:43 Tsunami黄嵩粟阅读(976) 评论(0) 推荐(0) 编辑

服务器代理

摘要：在nodejs中完成反向代理实现安装反向代理的模块 cnpm i http-proxy-middleware -S 在node程序完成代理编码 const express = require('express') const httpProxyMiddleware = require('http- 阅读全文

posted @ 2021-01-15 18:34 Tsunami黄嵩粟阅读(121) 评论(0) 推荐(1) 编辑

CORS

摘要：CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前，所有主流浏览器都支持该功能，IE10以下不支阅读全文

posted @ 2021-01-15 18:11 Tsunami黄嵩粟阅读(124) 评论(0) 推荐(1) 编辑

jsonp

摘要：jsonp的核心原理就是目标页面回调本地页面的方法,并带入参数 ² 服务器端实现 JSONP 接口的步骤 ① 服务器端获取客户端发送过来的query参数，其中参数有回调函数的名字 ② 得到的数据，拼接出一个函数调用的字符串 ③ 把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析阅读全文

posted @ 2021-01-15 17:57 Tsunami黄嵩粟阅读(96) 评论(0) 推荐(1) 编辑

使用Express写接口

摘要：接口规范随着前后端分离越来越普遍, 后端接口规范也就越来越重要了,一套良好的接口规范可以提升工作效率, 减少沟通障碍。通常我们都会采用RestfulApi方式来提供接口, 使用 JSON 来传输数据。 Restful设计规范有一个的要求接口通信协议 http或https 接口域名最好是独立解析阅读全文

posted @ 2021-01-14 15:43 Tsunami黄嵩粟阅读(310) 评论(0) 推荐(1) 编辑

vuex做购物车功能

摘要：先创建一个cart组件 <template> <div> <ListItem></ListItem> </div> </template> <script> import ListItem from "./ListItem"; export default { components: { ListI 阅读全文

posted @ 2021-01-13 15:32 Tsunami黄嵩粟阅读(150) 评论(0) 推荐(1) 编辑

vuex

摘要：https://vuex.vuejs.org/zh/ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，最好不要使用V 阅读全文

posted @ 2021-01-13 13:12 Tsunami黄嵩粟阅读(104) 评论(0) 推荐(1) 编辑

vant做城市列表

摘要：vant: https://youzan.github.io/vant/#/zh-CN/ 安装 cnpm i -S vant 按需加载配置 # 在 babel.config.js 中配置 module.exports = { plugins: [ ['import', { libraryName: 阅读全文

posted @ 2021-01-13 11:18 Tsunami黄嵩粟阅读(863) 评论(0) 推荐(1) 编辑

vue移动端滚动

摘要：better-scroll: https://better-scroll.github.io/docs/zh-CN/guide/ 影院列表数据使用better-scroll来完成数据的展示，此插件对于移动站点的滚动非常友好安装 cnpm i -S better-scroll html结构一定要规定阅读全文

posted @ 2021-01-12 17:15 Tsunami黄嵩粟阅读(212) 评论(0) 推荐(0) 编辑

底部菜单隐藏

摘要：聊聊上篇随笔底部菜单隐藏是vue做的移动端先在mins.js里面写上事件总线 // 实例化一个事件总线对象 Vue.prototype.$bus = new Vue() 在App.vue文件里面写上 <template> <div>  <FooterNav v 阅读全文

posted @ 2021-01-12 16:17 Tsunami黄嵩粟阅读(72) 评论(0) 推荐(0) 编辑

使用swiper完成轮播图

摘要：swiper：https://www.swiper.com.cn/usage/index.html 安装swiper cnpm i -S swiper 在功能组件中定义Swiper组件并设置好插槽 <template> <div class="swiper-container"> <div clas 阅读全文

posted @ 2021-01-12 15:59 Tsunami黄嵩粟阅读(178) 评论(0) 推荐(0) 编辑

lazyload图片懒加载

摘要：安装 npm i -S vue-lazyload 在src/main.js文件中添加如下内容 import VueLazyload from ‘vue-lazyload’ Vue.use(VueLazyload,{ 加载时要显示的图片这里是懒加载的图片 loading:'http://ex.coc 阅读全文

posted @ 2021-01-08 22:17 Tsunami黄嵩粟阅读(72) 评论(0) 推荐(0) 编辑

vue带有参数的路由跳转动态路由

摘要：先定义好路由在router文件下面创建一个新的文件夹里面写上自己定义的路由 export default { path: '/detail/:id', component: () => import('@views/Detail/Detail') } 在主路由引入对应的模块路由 import det 阅读全文

posted @ 2021-01-08 19:09 Tsunami黄嵩粟阅读(248) 评论(0) 推荐(0) 编辑

vue导航固定吸顶效果

摘要：吸顶效果如何得到滚动条滚动的距离，document.documentElement.scrollTop 通过onscroll事件来完成滚动事件监听，达到吸顶值后，进行样式更换阅读全文

posted @ 2021-01-08 18:10 Tsunami黄嵩粟阅读(164) 评论(0) 推荐(0) 编辑

导航守卫

摘要：导航守卫就是路由跳转过程中的一些钩子函数，这个过程中触发的这些函数能让你操作一些其它事情时，可以进行过滤操作，这就是导航守卫。 ² 全局守卫 # 全局前置守卫路由规则文件中定义 //当一个导航触发时,触发前置守卫， to: Route: 即将要进入的目标路由对象 from: Route: 当前导阅读全文

posted @ 2021-01-08 17:54 Tsunami黄嵩粟阅读(99) 评论(0) 推荐(0) 编辑

命名路由

摘要：通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。 # 路由 const router = new VueRouter({ routes: [ { path: '/user/:id', name: 'user', component: User } ] }) 阅读全文

posted @ 2021-01-08 17:21 Tsunami黄嵩粟阅读(109) 评论(0) 推荐(0) 编辑

动态路由匹配

摘要：所谓动态路由就是路由规则中有部分规则是动态变化的，不是固定的值，需要去匹配取出数据(即路由参数)。 // 传递参数id var router = new VueRouter({ // routes是路由规则数组 routes: [ { path: '/user/:id', component: Us 阅读全文

posted @ 2021-01-07 18:15 Tsunami黄嵩粟阅读(97) 评论(0) 推荐(0) 编辑

嵌套路由

摘要：嵌套路由最关键在于理解子级路由的概念：比如我们有一个/users的路由，那么/users下面还可以添加子级路由，如: /users/index、/users/add等等，这样的路由情形称之为嵌套路由。 routes: [ { path: "/user", component: User, //通过阅读全文

posted @ 2021-01-07 18:01 Tsunami黄嵩粟阅读(161) 评论(0) 推荐(0) 编辑

路由重定向

摘要：用户在访问地址A的时候，强制用户跳转到地址C ，从而展示特定的组件页面。 var router = new VueRouter({ // routes是路由规则数组 routes: [ // 每个路由规则都是个配置对象，至少有path和component两个属性 // path表示当前路由规则匹配的阅读全文

posted @ 2021-01-07 17:53 Tsunami黄嵩粟阅读(228) 评论(0) 推荐(0) 编辑

编程式导航

摘要：编程式导航就是通过js来实现路由跳转 this.$router.push("/login"); this.$router.push({ name:'user' , params: {id:123} }); this.$router.push({ path:"/login" }); this.$rou 阅读全文

posted @ 2021-01-07 17:15 Tsunami黄嵩粟阅读(97) 评论(0) 推荐(0) 编辑

声明式导航

摘要：它就是先在页面中定义好跳转的路由规则，vueRouter中通过 router-link组件来完成 <router-link to="path"></router-link> # to 要跳转到的路由规则 string|object to=”users” :to=”{path:’path’}” 阅读全文

posted @ 2021-01-07 16:58 Tsunami黄嵩粟阅读(66) 评论(0) 推荐(0) 编辑

Vue Router

摘要：网址：https://router.vuejs.org/zh/ Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过阅读全文

posted @ 2021-01-07 16:10 Tsunami黄嵩粟阅读(83) 评论(0) 推荐(0) 编辑

路由

摘要：路由的本质就是一种对应关系，根据不同的URL请求，返回对应不同的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为：后端路由和前端路由 ² 后端路由：由服务器端进行实现并实现资源映射分发 ² 前端路由：根据不同的事件来显示不同的页面内容，取事件与事件处理函数之间的对应关系阅读全文

posted @ 2021-01-07 15:59 Tsunami黄嵩粟阅读(96) 评论(0) 推荐(0) 编辑

vue-cli 单文件组件工具安装

摘要：https://cli.vuejs.org/zh/ 在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JS 只被用来阅读全文

posted @ 2021-01-07 15:40 Tsunami黄嵩粟阅读(79) 评论(0) 推荐(0) 编辑

作用域插槽

摘要：作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的)可重用模板，来代替已经渲染好的元素。在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样 # 子组件中 Vue.component('child', { template: ` <div class="child"> <sl 阅读全文

posted @ 2021-01-07 15:16 Tsunami黄嵩粟阅读(339) 评论(0) 推荐(0) 编辑

具名插槽

摘要：<slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。 # 子组件 <div class="container"> <header> <slot name="header"></slot> </he 阅读全文

posted @ 2021-01-07 14:50 Tsunami黄嵩粟阅读(92) 评论(0) 推荐(0) 编辑

vue单个插槽

摘要：当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身。 # 子组件 <div> <h2>我是子组件的标题</h2> <slot> 只有在没有要分发的内容时才会显示。 </slot> </div> # 父组件 <div> <h1>我是父组阅读全文

posted @ 2021-01-07 14:46 Tsunami黄嵩粟阅读(70) 评论(0) 推荐(0) 编辑

vue Ref 动态组件 keeplive

摘要：ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例 # 普通dom元素上 <p ref="p">hello</p> # 子组件上 <child-comp ref= 阅读全文

posted @ 2021-01-07 11:35 Tsunami黄嵩粟阅读(386) 评论(0) 推荐(0) 编辑

事件总线

摘要：非父子组件或更多层级间组件间传值，在Vue中通过单独的事件中心来管理组件间的传值。 ² 建立统一的事件中心 const bus = new Vue() ² 传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据) ² 接收数据方，在生命周期函数中，通过bus.$on(方法名,[param 阅读全文

posted @ 2021-01-07 10:57 Tsunami黄嵩粟阅读(76) 评论(0) 推荐(0) 编辑

vue子组件向父组件传值

摘要：² 子组件用$emit()定义自定义事件，$emit()第一个参数为自定义的事件名称第二个参数为需要传递的数据 ² 父组件用v-on(@)绑定子组件定义的自定义事件名，监听子组件的事件，实现通信第1步：在子组件中通过this.$emit()完成自定义事件定义在父组件中实现子组件中自定义的事件阅读全文

posted @ 2021-01-06 18:55 Tsunami黄嵩粟阅读(54) 评论(0) 推荐(0) 编辑

vue组件间传值父组件向子组件传值

摘要：² 父组件以属性的形式绑定值到子组件身上 ² 子组件通过使用属性props接收(props是单向绑定的(只读属性)：当父组件的属性变化时，将传导给子组件，但是反过来不会) 第1步，父组件以动态属性的方式把自身中的data数据传值给子组件第2步：在子组件中通过配置选项props来动态获取自定义组件中阅读全文

posted @ 2021-01-06 18:28 Tsunami黄嵩粟阅读(126) 评论(0) 推荐(0) 编辑

vue局部注册

摘要：只能在当前注册它的vue实例中使用，通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件 var Child = { template: '<div>A custom component!</div>' } new Vue({ components: { // 阅读全文

posted @ 2021-01-06 18:25 Tsunami黄嵩粟阅读(70) 评论(0) 推荐(0) 编辑

vue组件定义全局组件

摘要：组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体。组件化将一个具备完整功能的项目的一部分分割多处使用加快项目的进度可以进行项目的复用组件注册分为：全局注册和局部注册全局注册 Vue.component('组件名称', { })第1 阅读全文

posted @ 2021-01-06 18:20 Tsunami黄嵩粟阅读(627) 评论(0) 推荐(0) 编辑

vue axios

摘要：文档：https://www.kancloud.cn/yunye/axios/234845 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。能拦截请求和响应，自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。兼容问题使用语法 # GE 阅读全文

posted @ 2021-01-05 18:19 Tsunami黄嵩粟阅读(86) 评论(0) 推荐(0) 编辑

vue实例生命周期

摘要：每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。 beforeCreate 在实例初始化之后，数据观测和事阅读全文

posted @ 2021-01-05 17:29 Tsunami黄嵩粟阅读(76) 评论(0) 推荐(0) 编辑

混入 - Mixins

摘要：混入(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。混入分为：全局和局部定义全局混入局部混入注：生命周期中方法要是混入就相当于中间件功能优先级全局 > 局部 > vue实例阅读全文

posted @ 2021-01-05 17:23 Tsunami黄嵩粟阅读(188) 评论(0) 推荐(0) 编辑

vue过滤器 - filters

摘要：在数据被渲染之前，可以对其进行进一步处理，比如将字符截取或者将小写统一转换为大写等等，过滤器本身就是一个方法。过滤器可以定义全局或局部 # 全局 // 回调函数中的参数1永久是绑定的数据 Vue.filter(过滤器名称,(value,[…args])=>{}) # 局部过滤器定义此过滤器定义在阅读全文

posted @ 2021-01-05 17:13 Tsunami黄嵩粟阅读(92) 评论(0) 推荐(0) 编辑

vue侦听器 - watch

摘要：使用watch来侦听data中数据的变化,watch中的属性一定是data 中已经存在的数据。当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。 <div id="app"> <input 阅读全文

posted @ 2021-01-05 17:05 Tsunami黄嵩粟阅读(65) 评论(0) 推荐(0) 编辑

vue计算属性computed

摘要：模板中放入太多的逻辑会让模板过重且难以维护，使用计算属性可以让模板变得简洁易于维护。计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。计算属性定义在Vue对象中，通过关键词c 阅读全文

posted @ 2021-01-05 16:59 Tsunami黄嵩粟阅读(128) 评论(0) 推荐(0) 编辑

vue自定义指令 - directive

摘要：https://cn.vuejs.org/v2/guide/custom-directive.html 除了核心功能默认内置的指令，Vue也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令绑定到元素上执行相关操作。自定义指令分为：全局指令和局部指令，当全局阅读全文

posted @ 2021-01-05 16:07 Tsunami黄嵩粟阅读(65) 评论(0) 推荐(0) 编辑

vue绑定下拉框 vue修饰符

摘要：<select v-model="selected"> <option>请选择</option> <option>HTML</option> <option>CSS</option> <option>JS</option> </select> data: { selected: '' } .lazy 阅读全文

posted @ 2021-01-05 15:01 Tsunami黄嵩粟阅读(68) 评论(0) 推荐(0) 编辑

绑定多个复选框绑定单选框

摘要：此种方式需要input标签提供value属性 <input type="checkbox" value="html" v-model="checkedNames"> <input type="checkbox" value="css" v-model="checkedNames"> <input t 阅读全文

posted @ 2021-01-05 14:56 Tsunami黄嵩粟阅读(100) 评论(0) 推荐(0) 编辑

搜索

常用链接

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏