本文为我的学习笔记，适合有 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事件，你可以试试

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

安装方法1.使用CDN直接引用 2.NPM$ npm install vue-i18n3.Yarn$ yarn add vue-i18n使用方法在这里只介绍vue的使用方法 /* 国际化使用规则 */ import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const messages = { en: { message: { hello: 'world hello' } }, zh: {

插件util.js export default{ install(Vue,options) { Vue.prototype.getData = function () { console.log('我是插件中的方法'); } } }main.js 引入 并且全局注册import util from './util' Vue.use(util);其他组件中使用this.getData();参考：https://cn.vuejs.org/v2/guide/plugins.html#使用插件https:/

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

三种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、 se

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入口函数是这样的：import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })二，如果只需要非常简单的路由而不需要引入整个路由库，可以动态渲染一个页面级的组件像这样：来自官方文档的例子：const NotFound = { template: 'Page not found' } const Home = { template: 'home page' } const About = { templa

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

首先安装 vue-cli，npm install -g vue-cli创建程序模板vue init webpack my-project安装 vue-routernpm install vue-router安装Mint-UInpm install mint-ui -S执行 npm run dev 会有demo 运行页面结果：生成如下内容：引入路由：main.jsimport Vue from 'vue' import App from './App' import router from './router' /* eslint-d

很多React/React Native的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。模块引用在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：//ES5var React = require("react"); var {