vue

<template> <div> <header-vue :msg="msg" ref="header">heheh</header-vue> <body-vue></body-vue> <footer-vue></footer-vue> <div ref="div">{{msg}}</div> </div> </template> <script> export default{ data(){ return{ msg:"这是一个aaa" } }, methods:{ },created(){//数据装载之前获取DOM //获取不到DOM }, mounted(){//数据装载完成获取DOM console.log(this.$refs.div.innerHTML);//获取原生DOM console.log(this.$refs.header.$el.innerHTML);//获取组件DOM } } </script> <style> </style> 来源： https://www.cnblogs.com/zhousen34/p/7643955.html

由于后台接收的参数格式为FormData格式 ， 在axios中参数格式默认为 ， 在传参数前，将原先官方提供的格式 改为如下： axios({ url: '../../../room/listRoomPage', method: 'post', data: {offset: 0, limit: 9999, roomCode: "", roomtypeId: 0, floorId: 0}, transformRequest: [function (data) { var oMyForm = new FormData(); oMyForm.append("offset", 0); oMyForm.append("limit", 9999); oMyForm.append("roomCode", ""); oMyForm.append("roomtypeId", 0); oMyForm.append("floorId", 0); console.info(oMyForm); return oMyForm; }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(function (response) { console.log(response); }) .catch(function

vue 脚本架里axios post是不能本地json，GET可以 解决这个问题需要自己在node里写脚本: 在build里新建立fakedata.js var express = require('express') var app = express() // 本地json-server服务器搭建代码 // 引入数据库文件 var appData = require('../static/data/1.json'); var apiRoutes = express.Router() // 使用api的方法来创建连接时候的请求 apiRoutes.post('/test', function (req, res) { res.json({ errno: 0 , data: appData }); }) apiRoutes.post('/test2', function (req, res) { res.json({ errno: 0 , data: appData.data.slide }); }) module.exports = apiRoutes; // 调用api //app.use('/api', apiRoutes); //axios.post('/api/test2,{"abc":234}); 这样的形式调用 然后在dev-server.js最后加上： var

使用jqgrid做一个项目 var page = $("#jqGrid").jqGrid('getGridParam','page'); var postData = $('#jqGrid').jqGrid("getGridParam", "postData"); $("#jqGrid").jqGrid('setGridParam',{ postData:{ 'startAt': vm.q.startAt, 'endAt': vm.q.endAt, 'customer': vm.q.customer, 'productLine': vm.q.productLine, 'projectType': vm.q.projectType, 'project_manager':vm.q.pm }, page:page }).trigger("reloadGrid"); 在参数里面传了多个数据.发现的问题是假如先用一个数据,比如 vm.q.projectType = 1,这样去查询了一次然后再把 vm.q.projectType置为null,这样,还是会传之前的数据1到后台,查了很久的资料,发现原因是这样的.jqgrid会存储上一次请求的数据,如果本次传了,那么就会覆盖.如果为null,那么就会仍然使用上一次的数据,就会早上上面的情况解决方案:每次传以前,把数据给清了修改后的代码 var

1.查看浏览器的报错，如果有html的错误，按照错误提示修改一下。 2.如果报的错误为下面图片的错误，应该就是es6的语法没有转为es5，浏览器识别不了。 解决办法 　　安装: npm instatll babel-polyfill -save / yarn add babel-polyfill 　　main.js最顶部引入 import 'babel-polyfill' 　　找到webpack的入口文件，vue-cli创建的目录build/webpack.base.conf.js 　　entry: { 　　　　app: './src/main.js' 　　} 　　改为如图 　　 { test: /\.js$/, loader: 'babel-loader', include: [ resolve('node_modules/vue-echarts'), //如果使用了这个组件添加上去，没使用可以不放 resolve('node_modules/resize-detector') ] }, 　　配置.babelrc文件 　　根目录下创建.babelrc文件 { // 此项指明，转码的规则 "presets": [ // env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码，并且设置amd,commonjs这样的模块化文件

下载及引入 ： 　　 GitHub: https://github.com/surmon-china/vue-awesome-swiper 　　 思否： https://segmentfault.com/a/1190000014609379 swiper的相关配置 参数 类型（swiper3） 默认值（swiper3） 类型（swiper4） 默认值（swiper4） 说明 autoplay Number/Boolean 0/false Object autoplay 自动切换 speed Number 300 Number 300 切换速度 loop Boolean false Boolean false loop模式 loopAdditionalSlides Number 0 Number 0 loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。 loopedSlides Number 1 Number 1 在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。 direction String horizontal String horizontal Slides的滑动方向 autoplayDisableOnInteraction Boolean true - - 用户操作swiper之后

使用这个插件做轮播需要的js应该知道，就是vue.js和jquery.SuperSlide.2.1.1.js 下载地址： 　　vue: https://vuejs.org/js/vue.js 这里直接Ctrl+S保存到电脑某个位置就行了 　　SuperSlide: http://www.superslide2.com/downLoad.html 这里比较简单，就不一一解释了，直接上代码，样式的话自己注意一下哦 首先是HTML代码 <div class="pageRecommend"> <div class="recommendList"> <div class="hd" style="padding-bottom: 10px"> <div class="RecommendTitle fl">为您推荐</div> <ul class="fr" ></ul> </div> <div class="bd"> <ul class="picList" > <li v-for="(item,index) in hotList"> <a :href="goBookDetail(item.bibrecno)"> <div class="img">　　　　　　　　　　　　　　　　　　　　　　　<img :src="getImageUrl(item.imageurl)">　　　　　　　　　　　　　　　

1.创建一个基于”webpack“模板的项目 d: cd nodejs vue init webpack my-project 2.安装依赖 cd my-project cnpm install 3.运行 npm run dev //‘dev’在 package.json中 来源： oschina 链接： https://my.oschina.net/u/4245910/blog/3223144

虽然vue-cli提供了很方便的脚手架来构建自己的项目，但是在实际开发过程中，我还是遇到了一些问题，现将其摘要如下： 1、使用npm run build命令后会将我们的代码压缩至dist文件夹内，dist文件夹内目录如下： 此时直接打开index.html是无法打开的，我的解决办法是将其放在本地tomcat服务器内，然后通过启动bin/startup.bat启动服务器，即可以在浏览器正常调试。 2、打开后发现有一些图片没有显示，有一些压缩为base64，一些没有被压缩，检查后发现是图片文件过大，与build文件夹内webpack.base.conf.js配置不匹配有问题， { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, 将此处的limit值变大后正常显示 3、index.html内的js文件路径报错， src=/static/js/manifest.4556eb0998075bdd0762.js> 此处将static前面的“/"删掉，解决。 本文所提的方法只是我在项目中的处理，如果有更好的办法，望指正 来源： https://www

1.使用下列任命令安装Vue CLI npm install -g @vue/cli 2.检查是否安装成功 vue --version 3.初始化Vue Ui vue ui 发现一个有趣的事情：使用vue ui 无效,vue -h发现根本无法使用 vue ui，卸载老版本 npm uninstall vue-cli -g 重新安装 npm install @vue/cli -g 至此，安装成功 来源： https://www.cnblogs.com/zhuomuniao/p/12650884.html