Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： Vue.component(blog-post, {// 在 JavaScript 中是 camelCase 的props: [postTitle],template: <h3>{{ postTitle }}</h3> }) <!-- 在 HTML 中是 kebab-case 的 --> <blog-post pos...
这次给大家带来Vue2.0设置全局样式步奏详解，Vue2.0设置全局样式的步奏详解的注意事项有哪些，下面就是实战案例，一起来看一下。为Vue设置全局样式需要几个步骤(如果是sass将less改成sass即可)第一步：在src目录下的main.js,也就是入口文件里面添加下面代码require(!style-loader!css-loader!less-loader!./common/less/index.less)在Vue1.0版本中可以这样写，但是2.0版本中就不行，会报错提示解析错误require(./common/less/index...
在vue项目使用vue-resource的过程中，临时增加了一个需求，需要在任何一个页面任何一次http请求，增加对token过期的判断，如果token已过期，需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断，那么会是一个非常大的修改工作量。那么vue-resource是否存在一个对于任何一次请求响应捕获的的公共回调函数呢？答案是有的!vue-resource的interceptors拦截器的作用正是解决此需求的妙方。在每次http的请求响应之后，...
最近在项目中需要用到axios，所以就恶补一下这个axios到底是什么东东。越来它是vue-resource的替代品，官网也说了，以后都用axios， vue-resource不在维护。那么这个axios怎么用呢，上网搜索了一大堆，基本上都是雷同，我也不知道那些作者有没有在本地测试过。至少我按照网上的做法，总不能成功。经过几天的奋斗，我终于把它搞清楚了，为了不让其他的小伙伴们走弯路，我把我在实际操作中的例子分享给大家，希望对大家有用。 一、安...
这次给大家带来Vue.js计算与侦听器属性使用详解，Vue.js计算与侦听器属性使用的注意事项有哪些，下面就是实战案例，一起来看一下。一、 概述 计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<p id="example">{{ message.split().reverse().join() }} </p> 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变...
一、实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1、利用CSS样式实现过渡效果<transition name="fade"></transition>1.v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。 2.v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。 3.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除...
axios它是基于promise的http库，可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护，直接推荐axios库，小编我也是从vue-resource转换过来的，差别说不来，我们讲一下axios在实际开发中的用法axios特点1.从浏览器中创建 XMLHttpRequests 2.从 node.js 创建 http 请求 3.支持 Promise API 4.拦截请求和响应 （就是有interceptor） 5.转换请求数据和响应数据 6.取消请求 7.自动转换 JSON 数据 8...
这次给大家带来vue+toast弹窗组件使用案例详解，vue+toast弹窗组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢?首先,我们来分析一下弹窗组件的特性(需求):0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k)1.一般都是多处使用 --需要解决每个页面重复引用+注册1.一般都是跟js交互的 --无需 ...
这次给大家带来vue render开发实例详解，vue render开发的注意事项有哪些，下面就是实战案例，一起来看一下。简介在使用Vue进行开发的时候，大多数情况下都是使用template进行开发，使用template简单、方便、快捷，可是有时候需要特殊的场景使用template就不是很适合。因此为了很好使用render函数，我决定深入窥探一下。各位看官如果觉得下面写的有不正确之处还望看官指出，你们与我的互动就是写作的最大动力。场景官网描述的场景当...
这次给大家带来，的注意事项有哪些，下面就是实战案例，一起来看一下。使用vue-resource，设置头信息：Vue.http.interceptors.push((request, next) => {request.headers.set(Authorization, token)console.log(request.headers)next(response => {console.log(response.status)return response}) })相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：实现ajax发送异步请求方法vue中v-model动态使用详...
不知道大家对vue 挂载路由到头部导航有多少了解，本篇文章主要就介绍vue 挂载路由到头部导航的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。路由是写好了，但正确的切换路由方式不应该是我们在地址栏里面输入地址，有追求的方式是点击头部的导航菜单来切换，就像这样我们点击上面的发现、关注、消息就切换路由导航我们先把头部的导航写好打开header.vue先把vue组件的基本...
注册一个全局自定义指令 Vue.directive(upper-text, {bind: function (el, binding) {el.textContent = binding.value.toUpperCase()} }) 注册一个局部指令 directives: {lower-text: {bind: function (el, binding) {el.textContent = binding.value.toLowerCase()}} }, 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inse...
这次给大家带来vue中引入highcharts的图文详解，vue中引入highcharts的注意事项有哪些，下面就是实战案例，一起来看一下。npm进行highchars的导入，导入完成后就可以进行highchars的可视化组件开发了npm install highcharts --save1、components目录下新建一个chart.vue组件<template><p class="x-bar"><p :id="id":option="option"></p></p> </template> <script> import HighCharts from highcharts export default {// 验证类型...
本文介绍了 vue中component组件的props使用详解，分享给大家，具体如下：props使用方法 Vue.component(my-component,{ props:[message], template:<div class="tem1">{{message}}</div> }); <my-component message="hello"></my-component>注意：props 的声明需要放在template的前面 props可以使用实例中的变量赋值全局组件可以获取用使用prop 的做操作下面例子为message先先渲染为 "hello!!!" click点击事件 调用zan方法为重新为...
众所周知，vue是单向数据流，子组件不能直接改变父组件中的变量，如下：parent.vue<template><p><p>parent:{{ msg }}</p><children :msg="msg"></children></p> </template> <script>import children from @/components/childrenexport default {name: parent,data() {return {msg: from parent}},components: {children}} </script>children.vue<template><p><p>children:{{ msg }}</p><p><button @click=changeChild>点击改变chi...