vue.js
文章平均质量分 58
胡亥大魔王
天津大学量子人工智能硕士在读
展开
-
【Vue】方法顺序执行
问题提出虽然Vue中的方法是顺序执行的,但是如果某个方法执行时间很长(比如访问后台数据接口),那后面的方法不会等这个方法执行完就会执行。这说明,同一个方法内可以顺序执行,但是多个方法之间并不能严格控制顺序执行。解决方案使用async和await修饰符async mainMethod(){ await this.orderMethod1() await this.orderMethod2() await this.orderMethod3()}...原创 2021-12-27 17:25:43 · 9417 阅读 · 2 评论 -
Vue系列教程(二十四)定义私有指令
vue私有指令的定义方式如下:var vm = new Vue({ el: '#app', data: {}, methods: {}, directives: { // 自定义私有指令 'fontWeight': { bind: function (el, binding) { ...原创 2020-03-09 17:17:04 · 264 阅读 · 0 评论 -
Vue系列教程(二十三)使用钩子函数的第二个binding参数拿到传递的值
有时我们想要在DOM绑定的时候设置自定义的样式,做法如下:// 自定义一个设置字体颜色的指令Vue.directive('color', { bind: function (el) { el.style.color = 'red' }})使用:<input type="text" class="form-control" v-model="keyw...原创 2020-03-09 17:10:07 · 820 阅读 · 4 评论 -
Vue系列教程(二十二)自定义全局指令让文本获取焦点
实现文本框自动获取焦点,在原生JS中的做法如下:html<input type="text" class="form-control" v-model="keywords" id="search">jsdocument.getElementById('search').focus()但是vue不提倡操作DOM,vue中的做法是使用自定义指令:注意:vue中自定义指令都是...原创 2020-03-09 16:10:03 · 375 阅读 · 0 评论 -
Vue系列教程(二十一)自定义按键修饰符
给文本框添加按键修饰符的方法入下:<input type="text" class="form-control" v-model="name" @keyup.enter="add">点击enter会自动调用add()方法全部的按键别名:.enter.tab.delete.esc.space.up.down.left.right自定义按键别名:自定义全局...原创 2020-02-28 01:33:56 · 281 阅读 · 0 评论 -
Vue系列教程(二十)字符串的padStart方法使用
前文中的时间显示格式如下所示:如果我们想把时间显示成2020-02-27而不是2020-2-27,我们可以使用padStart方法对代码进行修改: Vue.filter('dataFormat', function (dateStr) { // 根据给定的时间字符串,得到特定的时间 var dt = new Date(dateStr) ...原创 2020-02-27 23:45:47 · 1004 阅读 · 0 评论 -
Vue系列教程(十九)私有过滤器的基本使用
从前文我们知道,全局过滤器。全局过滤器是所有Vue实例都能调用,而本节的私有过滤器,就是定义在Vue实例中的过滤器: var vm2 = new Vue({ el: '#app2', data: {}, methods: {}, filters: { // 定义私有过滤器,过滤器有两个条件【过滤器名称 ...原创 2020-02-27 23:39:32 · 185 阅读 · 1 评论 -
Vue系列教程(十八)品牌管理案例-定义格式化时间全局过滤器
之前的案例时间显示是不合理的{{item.ctime}}:这篇文章使用过滤器将时间格式进行修改,定义过滤器: Vue.filter('dataFormat',function (dateStr) { // 根据给定的时间字符串,得到特定的时间 var dt = new Date(dateStr) var y = dt.getFullYe...原创 2020-02-27 23:15:30 · 191 阅读 · 0 评论 -
Vue系列教程(十六)品牌管理案例-根据关键字实现数组的过滤
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>品牌列表案例</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="st...原创 2020-02-14 01:33:01 · 232 阅读 · 0 评论 -
vue-devtools安装
使用Vue开发过程中,需要使用Chrome浏览器的调试插件Vue devtools1.下载vue-devtools点击下载压缩包2.解压将压缩包解压出来,目录结构如下所示:3.下载依赖包在第2步的目录下打开命令提示符,输入npm install,然后执行npm run build。4.修改配置在编译好的文件夹找到manifest.json这个文件,路径是:自己安装的路径...原创 2020-02-14 01:06:19 · 152 阅读 · 0 评论 -
Vue系列教程(十五)品牌管理案例-根据Id完成品牌的删除
删除方法的实现,只需要将Vue系列教程(十四)品牌管理案例-品牌列表的添加功能 中的删除按钮改为如下,并添加删除方法即可:<a href="" @click.prevent="del(item.id)">删除</a>del(id) { // 根据id删除数据 // 1. 如何根据id找到要删除这一项的索引 ...原创 2020-02-13 03:08:04 · 339 阅读 · 1 评论 -
Vue系列教程(十四)品牌管理案例-品牌列表的添加功能
代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>品牌列表案例</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="st...原创 2020-02-13 01:37:03 · 507 阅读 · 0 评论 -
Vue系列教程(十三)v-if和v-show的使用和特点
一般来说,v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此,如果需要频繁切换,那么选择v-show较好。如果在运行时条件不大可能改变,那么选择v-if较好。示例代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl...原创 2020-02-13 00:56:56 · 205 阅读 · 0 评论 -
Vue系列教程(十二)v-for中key的使用注意事项
2.2.0+ 的版本里,当在组件中使用v-for时,key属性是必须的。当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已渲染过的每个元素。为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排列现有元素,你需要为每项提供一...原创 2020-02-12 19:11:31 · 482 阅读 · 0 评论 -
Vue系列教程(十一)v-for指令的四种使用方式
v-for有三种用法:1.迭代数组v-for迭代普通数组的方式如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-for循环普通数组</title></head><body>&l...原创 2020-02-12 18:09:53 · 459 阅读 · 0 评论 -
Vue系列教程(十)属性绑定为元素绑定style行内样式
另一种设置样式的方式是通过内联样式,有以三种方式:1.直接在元素上通过[:style]的形式,书写样式对象<div id="app"> <h1 :style="{color: 'red','font-weight': 200}">这是一个h1标签</h1></div><script src="lib/vue.js"><...原创 2020-02-12 01:53:20 · 696 阅读 · 0 评论 -
Vue系列教程(九)属性绑定为元素设置class类样式
Vue中为页面设置样式的方式有两种,class方式和style方式。这篇博客介绍class方式:首先回顾我们不适用Vue的时候设置class的方式:<style> .red { color: red; } .thin { font-weight: 200; }</style><h1 clas...原创 2020-02-12 01:38:22 · 384 阅读 · 0 评论 -
Vue系列教程(八)v-model实现计算器案例
已经学习完v-model指令后,我们这篇博客做一个简易的计算器推荐阅读:Vue系列教程(一)基础介绍Vue系列教程(二)v-cloak、v-text、v-html的基本使用Vue系列教程(三)v-bind指令Vue系列教程(四)v-on指令定义事件Vue系列教程(五)跑马灯效果案例Vue系列教程(六)事件修饰符Vue系列教程(七)v-model和双向数据绑定...原创 2020-02-11 18:55:12 · 620 阅读 · 0 评论 -
Vue系列教程(七)v-model和双向数据绑定
v-model是Vue中实现双向数据绑定的指令。看下面的代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model指令的学习</title></head><body><d...原创 2020-02-11 16:29:44 · 524 阅读 · 0 评论 -
Vue系列教程(六)事件修饰符
在讲解事件修饰符之前,大家先请看下面的例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件修饰符</title></head><style> .inner { ...原创 2020-02-11 02:58:09 · 433 阅读 · 0 评论 -
Vue系列教程(五)跑马灯效果案例
这篇文章使用vue来制作一个跑马灯效果,下面是实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>跑马灯效果</title></head><body><div id="app"...原创 2020-02-10 02:57:40 · 974 阅读 · 1 评论 -
Vue系列教程(四)v-on指令定义事件
回忆一下我们使用js实现点击事件的方法:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-on</title></head><div id="app"> <input id=...原创 2020-02-10 01:26:50 · 503 阅读 · 0 评论 -
Vue系列教程(三)v-bind指令
v-bind是用来绑定变量的.我们给按钮设置title的方法如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-bind</title></head><div id="app"> ...原创 2020-02-09 18:02:28 · 1275 阅读 · 0 评论 -
Vue系列教程(二)v-cloak、v-text、v-html的基本使用
v-cloak代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-cloak</title></head><div id="app"> <p>{{msg}}<...原创 2020-02-09 17:48:12 · 656 阅读 · 0 评论 -
Vue系列教程(一)基础介绍
什么是Vue.jsVue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也可以进行手机App的开发,需要借助Weex)Vue.js 是前端的主流框架之一,和Angular.js、React.js一起,并成为前端三大主流框架!Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于第三方库或既有项...原创 2020-02-09 17:11:15 · 3134 阅读 · 1 评论 -
Vue项目搭建
Vue的介绍学习资源Angularnodejs+expresskoa2ionic3vue 和 angular、react 都是前端框架单页面框架基于模块化组件化的开发模式vue 特点简单灵活Vue环境搭建必须安装nodejs搭建开发环境安装vue的脚手架工具npm install --global vue-cli创建项目vue ...原创 2020-02-08 02:12:24 · 100 阅读 · 0 评论 -
在vue中使用jquery
首先默认你已经有了一个vue程序,如果你想在vue中使用jquery,那么请继续阅读。当然,加入你没有一个vue程序,这里也给出创建一个vue程序的命令。当然,你肯定装了vue-cli,不然你不会点进这篇博客vue init webpack vue-demo01项目的目录类似如下:对了,这个demo里使用了element-ui安装方式:npm i element-ui -S配置...原创 2020-01-31 23:39:34 · 1068 阅读 · 0 评论 -
Vue.js组件化
简单来说就是我们可以自动以HTML标签,并在模板中使用它,例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="原创 2018-02-19 17:27:26 · 229 阅读 · 0 评论 -
Vue.js双向绑定
1.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js">&am原创 2018-02-19 17:17:04 · 257 阅读 · 0 评论 -
Vue.js的Hello world
1.关于Vue的引入,这里推荐直接<script>引入:<script src="vue.js"></script>2.创建一个html界面,在<body>中编写代码:<div id="app"> <p>{{ message }}</p></div&原创 2018-02-19 17:05:17 · 183 阅读 · 0 评论