
Vue
文章平均质量分 55
Vue.js相关内容
叱咤少帅(少帅)
技术成就梦想
展开
-
webpack以及其他的打包工具和实践
webpack以及其他的打包工具和实践原创 2020-10-19 20:07:10 · 591 阅读 · 0 评论 -
vue2之过滤器
vue2之过滤器原创 2024-03-14 16:23:55 · 341 阅读 · 0 评论 -
理解WebSocket
背景比如我们想要实现webssh或者web界面能实时查到日志,这个时候websocket就很有用了为什么需要 WebSocket?初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起。举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点,注定了如果服务器原创 2021-08-29 23:30:39 · 1458 阅读 · 1 评论 -
组件之间传数据以及触发事件
父组件可以使用 props 把数据传给子组件。 子组件可以使用 $emit 触发父组件的自定义事件$emit的用法vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn ); //监听event事件后运行 fn;例如:子组件:<template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}&l.原创 2021-03-26 18:05:59 · 436 阅读 · 0 评论 -
Vue项目开发记录
(1)图片引入因为在vue中如果在数据里定义了图片的话,在vue中会解析成字符串,所以需用下面的方式处理:<script> // 导入图片 // import img_a6 from '@/assets/img/type-item/a6.svg' // import img_a1 from '@/assets/img/type-item/a1.svg' // import img_a2 from '@/assets/img/type-item/a2.sv原创 2021-03-24 17:24:04 · 179 阅读 · 0 评论 -
JS疑点解析
函数定义的几种方式在vue中我们可以这样:var vm = new Vue({ el: "#app", data: { msg: "hello", ming: 'long', xing: 'zhou' }, computed: { fullname: function(){ return this.ming +' '+ this.xing } }, methods: { // 简写,实际上也是key-value形式,其中key为函数名,value为函数功能原创 2021-03-18 16:05:22 · 238 阅读 · 0 评论 -
axios用法
官网文档https://github.com/axios/中文站点:http://www.axios-js.com/示例(1)带参数的get请求:let guolv_url="/audit/guolv_data";axios.get(guolv_url,{ params: { username: "tom", dbname: "db_xx" }}).then((res) => { console.log(res);}.原创 2021-03-04 16:11:21 · 242 阅读 · 1 评论 -
vue的常用简写以及生命周期以及如何使用element ui
(1)get请求带参数 let guolv_url="/audit/guolv_data"; axios.get(guolv_url,{ params: { username: "tom", dbname: "db_xx" } }).then((res) => {原创 2021-02-23 16:57:34 · 1065 阅读 · 0 评论 -
vue 路由权限验证以及跳转
前言在传统的后端控制的路由的过程中,我们是通过存储session然后控制权限的,如果在前后端分离的项目中如何进行权限控制并进行跳转了?vue 权限控制的方法路由元信息(meta) 动态加载菜单和路由(addRoutes)(1)路由元信息方式一 钩子函数:Vue.beforeEach(function(to,form,next){}) /*在跳转之前执行*/Vue.afterEach(function(to,form)) /*在跳转之后判断*/to:route.原创 2021-02-16 20:25:54 · 1341 阅读 · 0 评论 -
插槽(slot)你理解了吗?
官网https://cn.vuejs.org/v2/guide/components-slots.html原创 2020-11-11 11:32:05 · 1070 阅读 · 0 评论 -
vue 轮播图实现
废话不说,直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue测试轮播图</title> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><原创 2020-10-28 22:48:13 · 838 阅读 · 0 评论 -
router-link和v-for联合使用遇到的问题解决以及组件的data属性必须return
(1)从代码看问题<template> <!-- 底部开始 --> <div class="footer"> <ul> <li v-for="item in footerlist" :key="item.url"> <router-link to="item.url">{{ item.content }}</router-link>原创 2020-10-28 11:30:36 · 994 阅读 · 0 评论 -
在Vue中使用 localStorage
简介sessionStorage(临时存储):为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 loalStorage(长期储存):与sessionStorage一样,但是浏览器关闭后,数据依然会一直存在。使用方法sessionStorage 和 localStorage的用法基本一致,这里以localStorage 为例讲解。(1)保存//对象const info = {name: "huo", age: 18,id: "1"}//字符串const str原创 2020-10-27 14:45:26 · 2247 阅读 · 0 评论 -
全家桶之 Vuex
简介VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。这个Vuex中定义值,类似Python的Flask框架里的全局 G 对象。D:\phpstudy_pro\WWW\vue>原创 2020-10-27 13:49:02 · 225 阅读 · 0 评论 -
全家桶之 vue-router
vue-router是什么?这里的路由并不是指我们平时所说的硬件路由器, 这里的路由就是SPA(单页应用)的路径管理器 。再通俗的说,vue-router就是WebApp的链接路径管理系统。 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。原创 2020-10-27 09:20:49 · 244 阅读 · 1 评论 -
Vue 官网阅读总结
vue官网:https://cn.vuejs.org/v2/guide(1)v-bind指令 <span v-bind:title='yy'> 鼠标悬停几秒钟查看信息 </span>这里我们遇到了一点新东西。你看到的v-bindattribute 被称为指令。指令带有前缀v-,以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素...原创 2020-10-23 14:01:08 · 550 阅读 · 0 评论 -
测试src的方式开发vue项目
index.html 如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试引入的方式开发项目</title> <script src="http://js.yeyese.top/vue/vue.js"></script> <!-- 引入样式 --> &l...原创 2020-10-23 11:28:09 · 383 阅读 · 0 评论 -
Vue 项目开发知识记录
(1)VueApp.vue 把这个文件称为“根组件”,因为其它的组件又都包含在这个组件中。.vue 文件是一种自定义文件类型,在结构上类似 html,一个 .vue 文件即是一个 vue 组件原创 2020-10-20 09:45:24 · 356 阅读 · 0 评论 -
Elements in iteration expect to have ‘v-bind:key‘ directives.eslint-plugin-vue
背景在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错:Elements in iteration expect to have ‘v-bind:key’ directives。报错原因:安装了ESLint插件,对vue进行了eslint检查。解决文件 ---> 首选项 --->,在搜索框中输入:vetur.validation.template把勾去掉,重启VsCode即可...原创 2020-10-19 23:19:17 · 1398 阅读 · 0 评论 -
vue-cli 搭建 vue 项目 以及目录结构含义
(1)安装webpack和vue-clicnpm install webpack -g##cnpm install --global vue-cli原创 2020-10-19 20:58:50 · 398 阅读 · 0 评论 -
Vue.js 笔记(每天记录一点点)
(1)最基本核心功能 v-bind : 动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值 缩写用:代替即可 v-if: 条件语句 v-for: 循环语句 v-on: 事件监听器,监听事件然后触发函数,缩写用@符号代替 v-model: 在表单<input> (text,checkbox,radio),<select>及<textarea> 元素上创建双向数据绑定,它会忽略表单元素的初始值而将v原创 2020-10-19 17:12:10 · 368 阅读 · 0 评论