ngtwewy

本文为我的学习笔记,适合有 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

2020-09-09    Vue.js    303
ngtwewy

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

2018-06-22    Vue.js    1227
ngtwewy

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

2018-06-15    Vue.js    637
ngtwewy

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

2018-06-02    Vue.js    321
ngtwewy

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

2018-05-15    Vue.js    488
ngtwewy

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

2018-04-23    Vue.js    1403
ngtwewy

这样才能正常绑定事件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事件,你可以试试

2018-03-13    Vue.js    1937
ngtwewy

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

2017-12-11    Vue.js    427
ngtwewy

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

2017-11-19    Vue.js    291
ngtwewy

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

2017-06-22    Vue.js    264
ngtwewy

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

2017-06-17    Vue.js    273
ngtwewy

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

2017-05-27    Vue.js    314
ngtwewy

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

2017-05-24    Vue.js    265
ngtwewy

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

2017-05-24    Vue.js    356
ngtwewy

一,基础的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

2017-05-23    Vue.js    270
ngtwewy

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

2017-01-04    Vue.js    266
ngtwewy

首先安装 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

2017-01-03    Vue.js    237
ngtwewy

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

2016-10-21    Vue.js    256
随机推荐
Workerman 实现 WebSocket IM 聊天系统 【前端篇】
Javascript和jQuery获取checkbox的值
如何解决mysql delete表数据后,表空间大小不变的问题
使用 Android 调试桥 (adb) 无线调试 APP
原生javascript左右滚动特效
PHP文件上传进度:文件切片上传
Node.js 数据验证 Validator.js
在 CentOS 8 上使用 DNF 管理软件包
一个通用数据库操作类
爬虫需谨慎,你不知道的爬虫与反爬虫套路!