我们来聊一下vue中的组件参数. 1.vue中组件参数 我们可以为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 我们来看下最为简单和常见的vue代码 <div id="root"><item content="hello"></item></div><script>Vue.component("item",{props:["content"],template:"<div>{{content}}</div>"})new Vue({el:"#root"})</scr...
项目开发中,前端在配置后端api域名时很困扰,常常出现:本地开发环境: api-dev.demo.com测试环境: api-test.demo.com线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx ,根据传递参数xxx来判定不同的环境,给出不同的域名配置。 1.项目中/config/dev.env.js修改: 新增:HOST: "dev" use strict const merge = require(webpack-merge) const prodEnv = require(./prod.env)mod...
用过VUE的童鞋都知道,vue在改变data里面参数可以以直接用this.XXX=XXX,并且视图层也会立即更新呈现,但是这里我想介绍一下微信小程序是怎样操作data里面参数并在视图层及时更新的 一、简单参数 XX.wxml <view><text>{{str}}</text> </view> <button bindtap="change">改变</button>XX.js Page({data: {str:早上好},change: function() {this.setData({str:"晚上好"})} })二、已知下标的数组 XX.wxml <view><text>{{array[0].text...
最近在做的需求,涉及到级联查询,需要根据上级下拉框的内容,查询出下级下拉框列表,因为级联只有两级,且后期对表中的数据几乎不会改动,所以我设计的表存的直接是中文。 菜单如下:代码如下: var url = "${basePath}/institutionConfig/getDepartmentByCenter.do?param=" + center; $.get(url, function (data) {var list = data.data;for (var i = 0; i < list.length; i++) {departmentSelector += "<option value=" + list[...
问题 今天在写页面的时候发现一个问题,就是在React Router中使用了Url传参的功能,像这样: export class MainRouter extends React.Component {render() {return (<BrowserRouter><Switch>...<Route exact path={/channel/:channelId} component={ChannelPerPage}/>...</Switch></BrowserRouter>);} } 按照官方文档的说法,可以在ChannelPerPage这个组件中使用 this.props.match.params来获取url参数的值,但是我发现如果你在这个...
什么是代理跨域 浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>、<script>、<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!。现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞...
项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx ,根据传递参数xxx来判定不同的环境,给出不同的域名配置。 1.项目中/config/dev.env.js修改: 新增:HOST: "dev" use strict const merge = require(webpack-merge) const prodEnv = require(./prod.env)...
webpack.config.js文件通常放在项目的根目录中,它本身也是一个标准的Commonjs规范的模块。 var webpack = require(webpack); module.exports = {entry: [webpack/hot/only-dev-server,./js/app.js],output: {path: ./build,filename: bundle.js},module: {loaders: [{ test: /\.js?$/, loaders: [react-hot, babel], exclude: /node_modules/ },{ test: /\.js$/, exclude: /node_modules/, loader: babel-loader},{ test: /\.css...
html的标签的属性,比如id、class、href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法:v-bind:属性=“ ‘字符串+自定义变量名”,自己试了没问题,有需要的朋友可以借鉴下! 最后需要注意一下属性一定是":属性="这种形式才会起作用<ul class="menu" v-for="(item,index) in 4"><li :class="{selected:index===clickIndex}" @click="selected(index)"><div><h3>{{item}}点...
应用场景: 1,每个请求都带上的参数,比如token,时间戳等。 2,对返回的状态进行判断,比如token是否过期 代码如下: axios.interceptors.request.use(config => {var xtoken = getXtoken()if(xtoken != null){config.headers[X-Token] = xtoken}if(config.method==post){config.data = {...config.data,_t: Date.parse(new Date())/1000,}}else if(config.method==get){config.params = {_t: Date.parse(new Date())/1000,...co...
好,下面上货。 1、安装axios npm install axios --save2、添加axios组件 import axios from axios axios.defaults.headers.post[Content-Type] = application/x-www-form-urlencoded; axios.defaults.baseURL = http://localhost:7878/zkview; Vue.prototype.$ajax = axios;3、get请求 testGet: function () {this.$ajax({method: get,url: /test/greeting,params: {firstName: Fred,lastName: Flintstone}}).then(function (resp...
axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded。 解决方法有以下三种: 1、设置axios的默认请求头 //设置全局的 axios.defaults.headers.post[Content-Type] = application/x-www-form-urlencoded; var instance = axios.create({}) // 这样创建出来的 只需要: instance.defaults.headers.post[Content-Ty...
在路由时传递参数,一般有两种形式,一种是拼接在url地址中,另一种是查询参数。如:http://localhost:8080/router/tang/101?type=spor&num=12。下面根据代码看一下,VUE 和 Spring Boot 中各自是如何处理传递和接受参数的。 Spring Boot package com.tang.demo1.controller; import org.springframework.web.bind.annotation.*; @RestController public class RouterController { @RequestMapping(path = {"/router/{name}/{cl...
Owl Carousel 是一个强大、实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器支持响应式支持 CSS3 过度支持触摸事件支持 JSON 及自定义 JSON 格式支持进度条支持自定义事件支持延迟加载支持自适应高度浏览器兼容:兼容所有浏览器,包括 IE6、IE7。 jQuery 兼容:兼容 1.7 及以上版本。 Owl Carousel 使用方法: 新建一个HTML文件 1、在HTML文件中引入Owl Carousel必须文件 <link href="css/owl.carousel.css" rel=...
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。 及通过路由配置的name属性访问 在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据在目标页面通过this.$route.query获取参数: this...