一.绑定Class属性。 绑定数据用v-bind:命令，简写成: 语法：<div v-bind:class="{ active: isActive }"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作为参数， 这里，{active: isActive}是对象参数，active是class名,isActive是一个布尔值。下面是一个例子： 绑定对象字面量 html： <div id="classBind"><span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">状态:{{alert}}{{isSafe}}</span> <...
实现效果：实现代码以及注释： <!DOCTYPE html> <html> <head><title>按钮绑定</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style type="text/css">*{margin: 0;padding: 0;}body{font: 15px/1.3 Open Sans, sans-serif;color: #5e5b64;text-align: center;}a, a:visited{outline: none;color: #3b9dc1;}a:hover...
前面的话有时候需要父组件访问子组件，子组件访问父组件，或者是子组件访问根组件。 在组件实例中，Vue提供了相应的属性，包括$parent、$children、$refs和$root，这些属性都挂载在组件的this上。本文将详细介绍Vue组件实例间的直接访问 $parent $parent表示父组件的实例，该属性只读下面是一个简易实例 <div id="example"><parent-component></parent-component> </div> <template id="parent-component"><div class="parent"><h3...
本文介绍了基于 Vue 的树形选择组件。分享给大家，具体如下：系统要求：Vue 2基本特性 完美的多级联动效果 支持无限多的分级 有 全选、半选、不选 三种状态 截图展示代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><link rel="icon" href="https://v1-cn.vuejs.org/images/logo.png" rel="external nofollow" type="image/x-icon"><title>Vue Tree Select Example</title><script src="https://cdn.bo...
富文本编辑器在任何项目中都会用到，在Element中我们推荐vue-quill-editor组件，现在我就把它提供给大家，希望对大家有用。具体截图如下：安装编辑器组件 具体方法：npm install vue-quill-editor --save 编写组件 首先我们在components文件夹里创建ue.vue组件，效果图如下：组件<!-- 组件代码如下 --> <template><div><script id="editor" type="text/plain"></script></div> </template> <script>export default {name: UE,data ...
?最近在vue项目中需要使用富文本编辑器，于是将Ueditor集成进来，作为公共组件。项目地址：https://github.com/suweiteng/vue2-management-platform 1.放入静态资源并配置 首先把官网下载的Ueditor资源，放入静态资源src/static中。 修改ueditor.config.js中的window.UEDITOR_HOME_URL配置，如下图：2.引入 在main.js中引入import ../static/UE/ueditor.config.js import ../static/UE/ueditor.all.min.js import ../static/UE/la...
前言之前的文章讲得太多安装了，今天就不说这个了，因为我的项目是前后端分离的，所以基本是分开执行代码逻辑。其中还有跨域问题，主要还是在laravel中添加头信息放行之类的，这里会提一下做法。 element-ui的upload组件我的vue代码： <template><el-upload:action="uploadAction"list-type="picture-card":on-remove="handleRemove":on-success="handleSuccess":before-upload="handleBefore":file-list="files"><i class="el-ico...
本文主要介绍了Vue-Cli中自定义过滤器，分享给大家，也给自己做个笔记vue2里面移除了内置过滤器，所有过滤器都需要自己定义。 以下例子是使用webpack模版自定义一个日期格式过滤器的例子。 文件结构. ├── src │ ├── Filters │ │ ├── DataFormat.js │ │ └── index.js │ └── main.js └── ...所有过滤器都放在Filters文件夹下，剩下的就是webpack模版的文件结构，在这里就不完全写出来。 Filters/DataF...
本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，分享给大家，也给自己留个笔记。在项目中尝试了mockjs，mock数据，实现前后端分离开发。 关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据，模拟各种场景。 等等优点。 总结起来就是在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据moc...
在移动应用中很多功能都是必不可少的，使用vue构建移动应用自然也就需要实现这些功能。之所以写这篇文章，是希望大家能更多的将注意力放在项目的核心业务上，而不是过多的关注通用功能。基础设置 使用vue-cli搭建项目框架在index.html文件中添加<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">，在移动端设置禁止缩放，以便显示合适大小的页面。如果要将页面封装为a...
前言最近在学习vue框架的基本原理，看了一些技术博客以及一些对vue源码的简单实现，对数据代理、数据劫持、模板解析、变异数组方法、双向绑定有了更深的理解。于是乎，尝试着去实践自己学到的知识，用vue的一些基本原理实现一个简单的todo-list，完成对深度复杂对象的双向绑定以及对数组的监听，加深了对vue基本原理的印象。 github地址：todo-list 学习链接前排感谢以下文章，对我理解vue的基本原理有很大的帮助！ 剖析vue实现原...
在Vue项目中，我们经常把某个功能模块封装起来，形成组件，下次调用时非常方便，同时也是在一些循环中进行dom操作的一种较好方式。 本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的，如何完成的组件通讯。 示例如下：这里先说一下组件设计思路： 明确整个功能场景，找出存在的事件操作，此例是一个简单的评价功能，即点击某一个星星时左边以及当前为选中的黄色星，右边为未选中的白色星。确定可复用的组件，即具有重复...
浏览器上传图片到服务端，我用过两种方法： 1.本地图片转换成base64，然后通过普通的post请求发送到服务端。 操作简单，适合小图，以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提交。 form表单提交图片会刷新页面，也可以时form绑定到一个隐藏的iframe上，可以实现无刷新提交数据。但是如果想传输多条form表单数据，需要写很多dom，同时还要写iframe，太麻烦。 目前感觉比较干净的办法就是通过axios的post请求，发送for...
本文介绍了vue中七牛插件使用，我也正在学习，分享给大家，顺便留个笔记，废话不说了，如下：<template><div id="cxUpload" class="cx-upload"><button id="pickfiles" class="uploadBtn">上传</button> </div> </template><script>// import $ from jquery// import "../../common/plugin/qiniu/moxie"// import "../../common/plugin/qiniu/plupload.dev"// import "../../common/plugin/qiniu/qiniu"import * as tools from ../...
数据结构为数组中包含对象--树形结构，用Vue组件的写法实现以下的效果：树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 html代码<div id="table-component-div"><table-component v-for="item in data1" v-bind:list="item"></table-component></div>组件模板代码 <script type="text/x-template" id="table-component-template"><div clas...