本文为我的学习笔记，适合有 Vue.js 2.0 基础的人阅读。1，下载基础设置克隆Vue-next-Webpack-preview项目，它将为我们提供包括Vue 3在内的最小的Webpack设置。$ git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-experiment $ cd vue3-experiment $ npm install 2，添加sass 支持npm install --save-dev style-loader node-sass sass-loader 在webpack.co

前两种方法需要设置路由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) {        

实现难点 如何判断切换路由时是前进还是后退 每次向左向右切换动画如何实现 解决方案 我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画. 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

在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%; }

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

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

这样才能正常绑定事件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

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

安装方法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

插件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

前言本文所有代码都已经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

三种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社

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

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

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