麦田上的字节
一个文绉绉的前端程序员
展开
-
vues响应接口and实例
Vue.js 响应接口Vue 可以添加数据动态响应接口。我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应。<div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</bu原创 2021-12-13 23:29:14 · 1279 阅读 · 0 评论 -
vue中Ajax(axios)及Ajax(vue-resource)的使用方法
目录Vue.js Ajax(axios)GET 方法请求方法的别名并发请求配置项响应结构拦截器取消请求时使用 application/x-www-form-urlencodedNode.js 环境PromisesTypeScript支持Vue.js Ajax(axios)Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。...原创 2021-12-13 23:07:55 · 2383 阅读 · 1 评论 -
Vue 路由的基本使用
Vue.js 路由Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。Vue.js 路由需要载入vue-router 库中文文档地址:vue-router文档。Vue Router 是Vue.js(opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路...原创 2021-12-13 18:49:06 · 1133 阅读 · 0 评论 -
Vue过渡 & 动画&混入
目录过渡自定义过渡的类名同时使用过渡和动画显性的过渡持续时间JavaScript 钩子初始渲染的过渡多个元素的过渡Vue.js 混入选项合并全局混入过渡Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。语法<transition name = "nameoftransition"> <div></div>原创 2021-12-13 22:50:33 · 1351 阅读 · 0 评论 -
Vue组件及自定义事件
目录Vue.js 组件动态 PropProp 验证Vue.js 组件 - 自定义事件data 必须是一个函数自定义组件的 v-modelVue.js 组件组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树注册一个全局组件语法格式如下:Vue.component(tagName, opt.原创 2021-12-13 12:31:50 · 906 阅读 · 0 评论 -
vue计算属性computed与监听属性watch的基本使用
目录Vue.js 计算属性Vue.js 监听属性Vue.js 计算属性计算属性关键词:computed。计算属性在处理一些复杂逻辑时是很有用的。反转字符串的示例<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - vue计算属性的使用</title><script src="https://c..原创 2021-12-12 22:37:53 · 1118 阅读 · 1 评论 -
vue安装教程及简介
Vue.js 是一套构建用户界面的渐进式框架。只关注视图层, 采用自底向上增量开发的设计。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue 学习起来非常简单。目录常用的vue.js版本及方法学习vue之前需要掌握基础html+css+javaScript知识。比如:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue孙叫.原创 2021-12-11 15:26:24 · 1982 阅读 · 1 评论 -
vue目录结构及简单的开发介绍
熟悉vue项目的目录结构,在一定程度上能提高我的开发效率及查找文件的速度。这里比较推荐使用VS code编译器,HBuild-x,webstorm等编译器相比之下逊色不少,用过的就知道有多香。目录Vue.js 目录结构目录说明VUE入门基本操作Vue.js 模板语法v-on 缩写Vue.js 目录结构目录说明可以尝试写一个简单的页面<template> <div class="hello"> <h1>...原创 2021-12-11 16:09:04 · 1065 阅读 · 0 评论 -
vue样式绑定与事件处理器的基本使用
目录Vue.js 样式绑定Vue.js 事件处理器事件修饰符Vue.js 样式绑定class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显示<!DOCTYPE.原创 2021-12-12 23:04:18 · 1342 阅读 · 0 评论 -
vue条件语句与循环语句的基本使用
目录Vue.js 条件语句Vue.js 循环语句Vue.js 条件语句条件判断使用 v-if 指令<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 - 孙叫兽的博客</title><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></s原创 2021-12-12 22:17:31 · 1308 阅读 · 0 评论 -
vue表单的基本使用
Vue.js 表单介绍 一下Vue.js 表单上的应用。你可以用 v-model 指令在表单控件元素上创建双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素。input 和 textarea 元素中使用 v-model 实现双向数据绑定:<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例 -孙叫兽的博客)&l..原创 2021-12-12 23:23:40 · 1237 阅读 · 0 评论 -
前端 vue 在可视化大屏领域的工作实践
导读:最近入职了一家互联网公司,主要是做物联网及互联网解决方案方向,我上来就接手了这个项目,是一个可视化管理地图,主要用于某国企物业的安全预警的职能,说来也比较倒霉,刚来这公司,公司做这个...原创 2021-06-07 13:13:34 · 11396 阅读 · 20 评论 -
vue学习经验分享,在这个大前端时代,你再不会vue就out啦
vue顺利从小白到公司入门原创 2021-07-06 13:19:38 · 7689 阅读 · 44 评论 -
PC端网页vue项目,页面滚动点击悬浮按钮最快的方法
业务场景,可视化大屏右下角添加一个悬浮按钮,点击按钮页面滚动到顶部。jin'guo'g原创 2021-05-29 15:44:02 · 3317 阅读 · 10 评论 -
vue根据表格字段不同的状态显示不同的颜色。
业务需求:根据后台返回的数据,对表格中的严重等级和问题状态做一下颜色区分。数据很大,大概一年左右的数据,在二级弹窗中,数据滚动的形式。大家好,我是孙叫兽不加状态前:我这个使用vue+div循环的实现,很便捷,使用element ui也是可以的。然后再computed:{}中添加如下代码。返回的字段是后台返回对应的字段,不要搞错了。 activation() { return (severity) => { // 使用JavaScri...原创 2021-05-25 15:19:18 · 8863 阅读 · 7 评论 -
vue自定义指令directives实现自动点击事件及自动点击第一个按钮
业务场景:点击弹窗默认加载第一个按钮的数据。vue自定义指令directives实现这个需求目录自动点击所有的按钮。自动点击第一个按钮,自动点击所有的按钮。 <ul class="areaList"> <li :class="{'active': index==hiddenAreaIndex}" v-for="(item, index) in HiddenCityName"...原创 2021-05-25 12:25:29 · 3744 阅读 · 9 评论 -
vue点击弹窗自动触发点击事件的解决办法
业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化。div指令: // 自动触发点击事件 directives:{ trigger:{ inserted(el,binging){ // console.log("自动触发事件") el.click() } } },...原创 2021-05-24 21:19:25 · 5297 阅读 · 9 评论 -
VUE vue-seamless-scroll自动滚动,当数据量比较少不让它自动滚动
div <vue-seamless-scroll :data="tableDataLeft0" class="seamless-warp" :class-option="classOption"原创 2021-04-29 10:13:38 · 6585 阅读 · 9 评论 -
VUE使用vue-seamless-scroll自动滚动表格数据,对表格数据排序无效的解决办法
使用vue-seamless-scroll循环表格数据,建议使用v-for,ul li 的形式便于操作属性,elemengt ui table可能不好处理兼容性问题及属性设置,尤其是一个页面添加多个表格及效果。VUE:排序this.$refs.seamlessScroll.reset()效果图...原创 2021-04-27 19:34:11 · 3453 阅读 · 2 评论 -
ifram 表单post 方法免密登录的实现
iframe默认使用的是get请求,所以外面要使用form表单的post请求实现免密码跳转系统。html写法:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用iframe的post请求提交网页</title> </head> <style> #iframe{ height: 800px; wid.原创 2021-04-27 11:22:22 · 2405 阅读 · 0 评论 -
【vue系列】小白入门篇,一天就能掌握vue开发技巧及规则
vue入门实战原创 2021-03-30 16:02:20 · 8384 阅读 · 12 评论