Atwood定律:凡是能用JavaScript写出来的,最终都会用JavaScript写出来

 

vue-router 页面跳转后如何记录返回后的位置

前两种方法需要设置路由history模式,后两种方法貌似更合适。 方法一: 1.在router.js里面(即路由文件中),此时模式为 history const router = new VueRouter({   mode: 'history',   routes,   scrollBehavior (to, from, savedPosition) {     if (savedPosition) {       return savedPosition     } else {       if (from.meta.keepAlive) {        
ngtwewy 2018-06-22    Vue.js   

vue-router 切换页面时设置过渡动画

实现难点 如何判断切换路由时是前进还是后退 每次向左向右切换动画如何实现 解决方案 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. router/index.js import VueRouter from 'vue-router' import Home from '../components/home/home' import User from '../components/user/user' var router = new VueRouter({     routes
ngtwewy 2018-06-15    Vue.js   

vue.js 怎么给v-html指令绑定的数据添加样式

在Vue组件中,使用.foo img{max-width:100%}不会生效,解决方法如下:     .foo { height: 300px; } 而如果在组件中使用了v-html,要为myHtml中的标签添加CSS样式,我们需要在写样式的时候添加>>>: .foo >>> img { max-width: 100%; } 这样,编译时以上CSS才会被编译为 .foo[data-v-xxxxxxx] img { max-width: 100%; }
ngtwewy 2018-06-02    Vue.js   

Vuex中的信息,刷新页面后,数据没有了的解决方案

解决方案一,检查Vuex中的数据,没有的话,重新从服务器获取,该方案可以满足存储的简单信息。该方法的好处是比较干净。 mounted: function(){ var that = this; //如果登录后,刷新了,vuex里的登录数据会清空,这里重新从服务器获取数据 if(tools.getCookie('token') && !this.$store.state.user.user_type){ // 判断不需要重新获取信息的页面 var noNeed = ['/login','/register','/reset']; va
ngtwewy 2018-05-15    Vue.js   

Vue2.5中,父组件created钩子异步获取数据,子组件没有更新绑定的参数

问题描述: 父组件传如lesser和larger两个参数,并且是ajax从服务器获取的。子组件定义created阶段输出lesser和larger。但larger为空。改成延迟输出则正确。 问题来源:https://segmentfault.com/q/1010000008912491 提问者的主要问题是没有搞清楚,vue实例的生命周期,created函数只会执行一次。 父组件: export default { data(){ return { lesser:'lesser', larger:'' },
ngtwewy 2018-04-23    Vue.js   

mint-ui中的cell无法绑定原生事件

这样才能正常绑定事件test,去掉is-link也可以绑定,如下: 原因如下:Vue.js官方文档中:https://cn.vuejs.org/v2/guide/components-custom-events.html#将原生事件绑定到组件给组件绑定原生事件有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native。例如: 进一步解释,原生就类似于你直接用$element.addEventListener(click, callback); 绑定事件。router-link会阻止click事件,你可以试试只用click
ngtwewy 2018-03-13    Vue.js   

为什么Axios ajax每次patch都会有两次网络请求?

OPTIONS请求是信使请求,在跨域请求之前,浏览器会先发送OPTIONS请求去获取服务器请求访问头,如果OPTIONS请求被拒绝,则不会继续后续的GET/POST/PUT/PATCH等操作。前面请求,由于只是去探路的,只请求数据头部,所以返回空是正常的。如果前面的OPTIONS访问的头部信息被服务器拒绝,那么后面一次请求就不会被发起。这个是HTTP自身的特性,不用特意去处理,如果是自己的服务器的话,只需要在后台给所有的OPTIONS类型请求返回空就可以了(这只是以防万一,因为OPTIONS只请求数据头部,总是会返回空)。网上找到这个说法:https://segmentfault.com/q/
ngtwewy 2017-12-11    Vue.js   

vue.js国际化 vue-i18n插件

安装方法1.使用CDN直接引用 2.NPM$npminstallvue-i18n3.Yarn$yarnaddvue-i18n使用方法在这里只介绍vue的使用方法 /*国际化使用规则*/ importVuefrom'vue' importVueI18nfrom'vue-i18n' Vue.use(VueI18n) constmessages={ en:{ message:{ hello:'worldhello' } }, zh:{ message:{ hello:'世界' } } } co
ngtwewy 2017-11-19    Vue.js   

Vue.js 如何添加全局函数或变量?

插件util.js exportdefault{ install(Vue,options) { Vue.prototype.getData=function(){ console.log('我是插件中的方法'); } } }main.js 引入 并且全局注册importutilfrom'./util' Vue.use(util);其他组件中使用this.getData();参考:https://cn.vuejs.org/v2/guide/plugins.html#使用插件https://www.zhihu.com/question/4050
ngtwewy 2017-06-22    Vue.js   

实现一个属于我们自己的简易MVVM库

前言本文所有代码都已经push到本人github个人仓库overwrite->my-mvvm我们知道的,常见的数据绑定的实现方法1、数据劫持(vue):通过Object.defineProperty()去劫持数据每个属性对应的getter和setter2、脏值检测(angular):通过特定事件比如input,change,xhr请求等进行脏值检测。3、发布-订阅模式(backbone):通过发布消息,订阅消息进行数据和视图的绑定监听。具体代码实现可以参考我github个人仓库overwrite->my-observer一言不合先上代码和效果图吧codeexample{{b}}{{a}}cha
ngtwewy 2017-06-17    Vue.js   

在Vue项目中添加Stylus

三种CSS 预处理器(框架)历史:SASS 2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。LESS2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。Stylus,2010年产生,来自Node.js社
ngtwewy 2017-05-27    Vue.js   

axios跨域访问

axios 的跨域问题,分以下几种情况: 1、 server 端不支持跨域,比如遇到下面的错误就是这种情况 No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx.com' is therefore not allowed access. 解决方案:如果 server 端是自己开发的,那么修改相关代码支持跨域即可。如果不是自己开发的,那么可以自己写个后端转发该请求,用代理的方式实现。 2、 serv
ngtwewy 2017-05-24    Vue.js   

Vue和Ajax的关系,Axios简介

Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求vue官方原话:最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-r
ngtwewy 2017-05-24    Vue.js   

vue-router的几种使用方式

一,基础的vue spa入口函数是这样的:importAppfrom'./App.vue' newVue({ el:'#app', render:h=>h(App) })二,如果只需要非常简单的路由而不需要引入整个路由库,可以动态渲染一个页面级的组件像这样:来自官方文档的例子:constNotFound={template:'Pagenotfound'} constHome={template:'homepage'} constAbout={template:'aboutpage'} constr
ngtwewy 2017-05-23    Vue.js   

Vue函数式路由

如果你点击一个有样式的标签,或者是一个封装好的按钮组件,这些都不提供:to的接口的,此时就得用函数式路由了,比如这种 新歌 排行 歌单 歌手 彩铃 import{Navbar,TabItem}from'mint-ui'; exportdefault{ name:'head-nav', data(){ return{ selected:'head-nav1' } }, components:{Navbar,TabItem}, methods:{ goRouter(){ varnavItem=thi
ngtwewy 2017-01-04    Vue.js