学习Vue.js动画时，需要引入一个animate.css，如何全局引入外部文件呢？ 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径使用@import引入外部css，作用域是全局的，也可在相应的单vue组件引入，import并不是引入代码到<style></style>里面，而是发起新的请求获得样式资源，并且没有加scoped。 <style scoped>@import "../static/font/iconfont.css"; </style>注：如果有样式时，应该放在#app上面引入，不然引入...
我们对普通输入框进行扩展，实现一个可快捷输入数字组件。首先制定规则： 只能输入数字。设计两个快捷按钮，可直接在当前值的基础上增 1 或者减 1。数字输入组件可设置初始值、最大值与最小值。接着，规划好 API。一个 Vue.js 组件最重要的 3 个部分就是 props、events 以及 slot，我们需要定义这三个部分的命名以及业务规则。这个组件比较简单，所以我们只用到 props 与 events。1 基础版html：<!DOCTYPE html> <html lang="en">...
vuejs自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。 最近碰到一种业务场景，业务场景如图：有个操作提示点击可以显示，足够了吧？如图：不够！好吧，产品说要求自动淡出提示！ 后台操作复杂需要有个明显提示给业务人员更好地操作，而且这种提示，只需要一种提示就足够。于是我就想到了自己实现自...
如何在VueJS使用阿里云存储上传图片？什么是OSS呢？ 其实按照官网的解释就是->>阿里云对象存储服务（Object Storage Service) 在实际开发中，公司可能会用到OSS随时来存储一些数据，比如像文本、图片、音频和视频等在内的各种非结构化数据文件，恰好，在做项目的时候，刚好用到了OSS存储，对于我这个萌新，从来没用过，那么我们先来看看文档，看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的 （1）首先，打开官网-----ht...
一、场景描述： 曾经有个电商项目，其中有个“老带新”模块，而且该模块新增的入口很多，但是新增后展示效果还不一样，当时就考虑将新增的组件单独拿出来，其实就是一个子组件向父组同步数据的过程。 当然，背景不重要了，关键是看实现的方式。 二、场景展示效果 （PS：展示效果请忽略美感） 三、如何实现 注意：Vuejs架构通过vue-cli 3.X搭建的项目，版本无所谓。 1、先看下目录体系，下图子组件放在components文件夹内，模拟子...
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，目前在GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。 Vue.js 是我在2014年2月开源的一个前端开发库，通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，目前在 GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的...
1.安装vant npm i vant -S：这是简写形式。npm install vant --save:这是完整写法。 如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。npm install vant --save --registry=https://registry.npm.taobao.org 淘宝镜像，速度快，安装后查看package.json文件里看是否安装完成2.1使用 babel-plugin-import (推荐) babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的...
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据 最基础的就是实现一个联动的效果 <body><div class="app"><span>Multiline message is:</span><p>{{message}}</p><br><textarea name="" v-model="message" placeholder="please write..."></textarea></div></body> <script>new Vue({el...
1 .lazy v-model 指令默认会在 input 事件中加载输入框中的数据（中文输入法中输入拼音的过程除外）。我们可以使用 .lazy 懒加载修饰符，让其只在 change 事件中再加载输入框中的数据。 html： <div id="app"><input type="text" v-model.lazy="content" placeholder="请输入" value="初始值"><p>输入框：{{content}}</p> </div>js： var app = new Vue({el: #app,data: {content: } });效果：使用 .lazy 懒加载修饰符之后，只有在...
我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定。 1 基础用法 1.1 文本输入框（text） 这里演示了在文本输入框上输入的内容，会实时映射到绑定的数据上。 html：<div id="app"><input type="text" v-model="content" placeholder="请输入"><p>输入框：{{content}}</p> </div>js： <script>var app = new Vue({el: #app,data: {content: }}); </script>效果：1.2 大文本输入框（textarea） 绑定方法与文本输入框相...
本文实例讲述了vue.js实现的全选与全不选功能。分享给大家供大家参考，具体如下： elementui是有checkbox组件，不过问题在于checkbox组件内只能嵌套简单的字符串，如果要嵌入标签怎么办? 首先渲染页面： <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <tbody v-for="item in orderData"><tr><td class="order-num" colspan="7"><el-checkbox v-model="item.checkModel" @change="handleChec...
本文介绍了Vue.js 图标选择组件实践详解，分享给大家，具体如下：背景 最近项目中在做一个自定义菜单需求，其中有一个为菜单设置小图标的功能，就是大家常见的左侧菜单设置图标不难，方案就是字体图标，可供使用的图标库也有很多，比如阿里巴巴的 Iconfont，以及 Fontaswsome 等，问题在于如何优雅的提供几百个图标供用户选择，而不需要开发去一个一个的写标签，也不需要一个个的去找图标。 字体图标库 Fontawesome 方案 我们使用字...
前言 从维护视图到维护数据，Vue.js 让我们快速地开发应用。但随着业务代码日益庞大，组件也越来越多，组件逻辑耦合严重，使代码维护变得十分困难。 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。 下面先看看我们的需求 列表组件quiList.vue本节我们主要要完成这样一个列表功能，每一行的列表是一个组件，列表内可能出现按钮组件或者箭头组件，点击按钮组件可以自定义事件，同时可以根据不同的参数来决定...
组件并不总是具有相同的结构。有时需要管理许多不同的状态。异步执行此操作会很有帮助。 实例： 组件模板某些网页中用于多个位置，例如通知，注释和附件。让我们来一起看一下评论，看一下我表达的意思是什么。 评论现在不再仅仅是简单的文本字段。您希望能够发布链接，上传图像，集成视频等等。必须在此注释中呈现所有这些完全不同的元素。如果你试图在一个组件内执行此操作，它很快就会变得非常混乱。处理方式 我们该如何处理这个...
v-on 事件指令用于绑定事件。 1 基础用法 v-on 指令绑定事件后，就会监听相应的事件。 html： <div id="app"><h3>已点击 {{count}} 次</h3><button @click="count++">点我</button> </div>注意： @click 是 v-on:click 的简写形式， @ 即表示 v-on: 。 js： <script>var app = new Vue({el: #app,data: {count:0}}); </script>效果：@click 表达式即可以直接使用 js 语句，也可以是一个定义在 vue 实例中 methods 内的函数名。 htm...