Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class 。 <div v-bind:class...
vue中的交互（ajax，jsonp） vue中也存在像ajax和jsonp的数据交互，实现向服务器获取数据，但是他本身框架当中没有这样的方法，需要一个新的小东西叫vue-resouce.js 地址：https://github.com/pagekit/vue-resource/blob/master/README.md<meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-resource.js"></script><style type="text/c...
最近vue更新的2.0版本，唉，我是在2.0版本前学习的，现在更新了又要看一遍了，关键是我之前看了3个星期2.0就更新了，vux还没同步更新，导致我用vux时要将vue的版本降回1.x，vue-router也要降回1.0才能使用~~~所以今天就写一个单页的下方tabbar的实例来记录一下吧，也希望各位在用vue全家桶时少点坑吧，当然不是用vux= =…只是仿造而已 这里的demo我会使用vue2.0的simple-template作为脚手架，vue-router版本也是2.0的，如果想使用v...
最近在用vue做项目，学习了不少东西，但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得，因为是新手，所以可能会有错误的地方，欢迎指出和交流呀~~~关于父子组件以及非父子组件之间的数据通信1 父子组件之间数据通信 一般父组件向子组件传递数据用prop进行传递，注意，子组件不能对prop中的数据进行更改，vue中规定是防止子组件对父组件中的数据进行窜改。而子组件向父组件进行数据传递则可以通过事件触发父组...
整理文档，搜刮出一个vue中将网页打印成pdf的代码，稍微整理精简一下做下分享。<template> <div class="pdf-wrap" id="pdfWrap"><button v-on:click="getPdf">点击下载PDF</button><div class="pdf-dom" id="pdfDom"></div> </div> </template> <style lang="scss" scoped></style> <script type="text/ecmascript-6">import html2Canvas from @/components/html2canvas.jsimport JsPDF from @/components/jsPdf.debug.jsexport de...
整理文档，搜刮出一个vue时间格式化实例代码，稍微整理精简一下做下分享。export function formatDate(date, fmt) {if (/(y+)/.test(fmt)) {fmt = fmt.replace(RegExp.$1, (date.getFullYear() + ).substr(4 - RegExp.$1.length));}let o = {M+: date.getMonth() + 1,d+: date.getDate(),h+: date.getHours(),m+: date.getMinutes(),s+: date.getSeconds()};for (let k in o) {if (new RegExp(`(${k})`).test(fmt)) {let str = o[k...
这段代码用到vuejs和vue-resouece。实现对接智能提示接口，并通过上下键选择提示项，按enter进行搜索 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="vue.js"></script><script type="text/javascript" src="vue-resource.js"></script><script type="text/javascript">window.onload = function() {var app = new Vue({el: #box,data: {myData: [],tt...
这是一个mini-project，主要是基于vue2.0的一个移动端的机器自动回复小项目，下面是我的一个回顾总结https://github.com/xuweikang/rebotChat 1. 项目搭建 在开始该项目之前，使用vue-cli脚手架搭建整个projec //安装vue-cli npm install vue-cli //初始化项目 rebotChat是我的项目名称 vue init webpack-simple rebotChat 这样我的项目结构就出来了，如下：2. 模拟数据，命名为mockdata.json，该数据包括用户基本信息数据和聊天记...
最近项目中遇到的需求是要操作大量的表单，之前的项目中有做过这方的研究，只不过是用jquery来操作。 项目A先简单说说以前项目A中的应用场景，可能有小伙伴儿也遇到相同的需求。A项目是公司的OA系统中有的项目，是用java的jsp渲染的页面，需求是要改成：嵌入APP中显示，前后端分离， 后端返回的内容，还不能修改， 只是后端同事做了下接口处理，返回给前端的是一大堆的表单数据。 每个表单都有多个字段表示它的属性： 是否可编辑表...
最近使用echarts来开发某系统的图表功能，先申明我以前用的ext.js，ext.js对图表有自己的一套组件，用起来也很方便。但是由于ext.js过于臃肿，公司决定使用echarts来开发图表功能。当我们使用的时候才悲催的发现，echart绘制之后，不能随着容器div的大小而变化。而我们所开发的图表是需要有放大缩小功能，于是在网上找了很久，也没有找到合适的答案，大部分是通过监听窗口大小改变事件来设置，然而并不是我们所需要的。于是自己用了...
在扯废话浪费大家的时间之前，先上个代码好了，使用vue实现起来很简单……<div class="overlayer" @touchmove.prevent ></div>对，就是这么简单，加上@touchmove.prevent就可以屏蔽滑动页面了，然后再和普通的遮罩层一样，加点样式 /*遮罩层*/ .overlayer{position:fixed;left:0;top:0;width:100%;height:100%;z-index:10; }如此，便可以了_(:з)∠)_，vue真是好用啊…… 以下是废话和原理 开发移动端页面的时候有一个很比较常见的...
想法很简单，用vue生成表格的行，datatables生成分页信息，不想过程曲折，特此记录。 datatables端代码：$(#dataTables-example).DataTable({ responsive: true, "serverSide" : true, "ajax": function (data, callback, settings) { postJson( "/AccessControlSystem/user/selectByPrimary", {pageSize:data.length,pageNo:data.start/data.length+1}, function(result){ callback({draw:data.draw,recordsTotal:userCount,reco...
首先我们假设，这里的登录组件（register.vue）是App.vue组件的子组件，是通过路由进入登录组件的。 登录组件中用户点击登录后，后台会传过来一个用户名，我的App.vue组件中需要拿到这个用户名，并将上面的“登录注册”字样变为“用户名”。 为了保证用户刷新后用户名不会消失，这里我用到了sessionStorage 代码如下:register.vue中用户点击登录触发signIn方法signIn(){this.formData = $(".form").serialize();var that = this;th...
废话不多说了，直接给大家贴代码了。具体代码如下所示： var app = new Vue({ el: "#app", data: { login: { name: "", psd: "" } }, methods: { submit: function() { //转换成自己想要的对象 var obj = JSON.stringify(this.login); console.log(obj); axios.post("/login", obj).then(function() { }) } } })以上所述是小编给大家介绍的Vue.js对象转换实例，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复...
vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法 源码： <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"><ul class="shop-brand-index" v-show="sitems.length > 0" ><li v-for="item in sitems"><div @click="linkUrl(item.code)"><img v-bind:src="item.publicImg"></div></li> </ul><div class="loading_wrap myload disn"><p>加载中...</p><i cl...