在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结： 动态切换的核心思想：利用vue指令v-bind来实现动态绑定，从而设置切换不同的样式～vue的最大特点是数据驱动，利用特殊的语法将DOM“绑定”到底层数据，DOM与数据保持同步，每当数据发生变化，DOM视图就会做出相应的更新和响应，正是基于这种特性，我们得以实现class和st...
本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考，具体如下： 使用计算属性，内置指令，方法等基础知识开发购物车。 需求分析：展示一个已经加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作，以及最后确定是否选中商品的功能，总价格为选中商品的价格，够买数量可以增加减少，商品可以从购物车中移除。效果如图所示：——实例来自《Vue.js实战》第五章 逻辑整理：vue实例定义一个数组list存放商品信息...
第一步，去百度地图开发者申请密钥。 1.申请密钥（百度地图开放平台-->开发文档-->web开发-->JavaScript API-->立即使用-->创建应用）2.密钥申请成功后第二步，在项目的需要模板中引入，具体如下：项目路径 其中index.html存放地图链接，代码如下 在百度地图开放平台 服务介绍中 选择我们所需要的地图类型 demo演示可查看 选择我们所需哪种百度地图的类型：http://lbsyun.baidu.com/index.php?title=jspopular然后在某模板 例：...
本文实例讲述了vue.js实现的幻灯片功能。分享给大家供大家参考，具体如下： 1、在父组件中 <slide-show :slides="slides"></slide-show> import SlideShow from @/components/SlideShow export default {components: {SlideShow,},2、在slideshow.vue中 <template><div class="slide-show" @mouseover="clearInv" @mouseout="runInv"> // 当鼠标移入的时候清除，移出的时候<div class="slide-img"><a href="slides[nowIndex].href...
vue.js 2.0版的双向数据绑定就是通过Object.defineProperty方法实现的，俗称属性拦截器。 这么说吧，vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的Object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineProperty的威力之大。 Object.defineProperty() 不支持ie8 方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。 // 语法: ...
我们利用 Vue.js 的自定义指令能力，来实现一个自定义下拉菜单功能。描述如下： 点击按钮，弹出下拉菜单。点击下拉菜单之外的区域，关闭下拉菜单。1基础版html：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="style.css" rel="external nofollow" > </head> <body><div id="app" v-cloak><div class="main" v-outside-click="close"><button ...
在社区中，发布的动态信息，经常会有一个相对余实际发布时间的相对时间。比如这里的微博：服务端存储的时间格式，一般为 Unix 时间戳，比如 2019/1/6 13:40:1 的Unix 时间戳为 1546753201651。前端在获取到这个时间戳之后，会转换为可读格式的时间。在社交类产品中，一般会将时间戳转换为 x 分钟前，x 小时前或者 x 天前，因为这样的显示方式用户体验更好。 我们可以自定义一个 v-relative-time 指令来实现上述功能。 html： <!DOC...
学习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...