vue之router学习笔记

1.动态路由匹配我们经常需要将具有给定模式的路线映射到同一个组件.例如,我们可能有一个User应该为所有用户呈现但具有不同用户ID的组件.在vue-router我们可以在路径中使用动态段以实现: const User = { template: '<div>User</div>' } const router = new VueRouter({ routes: [ // dynamic segments start with a colon { path: '/user/:id'…

两万字Vue.js基础学习笔记

Vue.js学习笔记目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Spread / Rest 操作符 6.二进制和八进制字面量 7.对象和数组解构 8.对象超类 9.for...of 和 for...in 10.ES6中的类 1.基本认识vue MVVM 模式 View 层 Model 层 ViewModel 层 Vue实例的options vue实例的生命周期 2.…

两万字Vue.js基础学习笔记（二）

Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了首先,我们需要在HTML代码中引入两个js文件,并且类型需要设置为module import指令用于导入模块中的内容.比如main.is的代码导出方法: var name = '小明'; var age = 18; var flag = true; function sum(num1, num2) { return n…

Vue Router学习笔记

前端的路由:一个地址对应一个组件 Vue Router中文文档一.路由基本使用第1步:导入Vue Router: <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 第2步:声明(路由)组件第3步:创建路由对象重定向:使用redirect 第4步:注册路有/挂载路由二.命名路由命名路由的原因:防止在代码中硬编码URL this.$route…

vue.js路由学习笔记

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://cdn.bootcss…

从零开始学习Vue.js，学习笔记

一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上…

vue 关于vue.set的学习笔记

vue新手小白,在看vue文档的时候发现vue关于数组,对象值改变的与 ng有那么点不同. 官方表示由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 但是对于曾经使用ng的我来说,是不一样的. 比如: vue 不能检测你直接根据数组的索引对数组的某个值修改. Vue 不能检测对象属性的添…

vue.js初始学习笔记&vue-cli

笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com/zhuzhenwei918/p/6870340.html?utm_source=itdadao&utm_medium=referral (less install) https://www.zhihu.com/question/38213423 (moke.目录结构等) https://mol…

vue.js路由学习笔记二

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script src="https://cdn.bootcss…

Vue.js实战学习笔记（中）

1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component :count="1"></child-component></div>Vue.component('child-component',{ name:'child-component', props:{ count:{ type:Number, default…

Vue基础知识学习笔记

一.环境搭建1.安装nodejs ((https://nodejs.org/en/)2.安装脚手架 npm install --global vue-cli /cnmp install --global vue-cli 可以安装cnpm 用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org3.(1)复杂的创建项目,必须cd 到对应的一个目录中vue init webpack vue-demo01 cd vue-d…

Angular.js之Router学习笔记

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>angularRouter</title> </head><body>  <div ng-app="mymodule"> <!--通过ui-view属性指定路由模板的填充…

【前端vue开发】vue知识点超链接学习笔记

1.如何去除vue项目中的 # --- History模式: https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 2.三分钟教你写个Vue组件: https://www.jianshu.com/p/e731d9ad4ed1…

vue.js 源代码学习笔记 ----- helpers.js

/* @flow */ import { parseFilters } from './parser/filter-parser' export function baseWarn (msg: string) { console.error(`[Vue parser]: ${msg}`) } export function pluckModuleFunction ( modules: ?Array<Object>, key: string ): Array<Function> {…

vue.js 源代码学习笔记 ----- html-parse.js

/** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resig (ejohn.org) * Modified by Juriy "kangax" Zaytsev * Original code by Erik Arvidsson, Mozilla Public License * http://erik.eae.net/simplehtmlpars…

vue.js 源代码学习笔记 ----- instance render

/* @flow */ import { warn, nextTick, toNumber, _toString, looseEqual, emptyObject, handleError, looseIndexOf } from '../util/index' import VNode, { cloneVNodes, createTextVNode, createEmptyVNode } from '../vdom/vnode' import { createElement } from '.…

vue.js 源代码学习笔记 ----- instance event

/* @flow */ import { updateListeners } from '../vdom/helpers/index' import { toArray, tip, hyphenate, formatComponentName } from '../util/index' export function initEvents (vm: Component) { vm._events = Object.create(null) vm._hasHookEvent = false //…

vue.js 源代码学习笔记 ----- instance init

/* @flow */ import config from '../config' import { initProxy } from './proxy' import { initState } from './state' import { initRender } from './render' import { initEvents } from './events' import { mark, measure } from '../util/perf' import { initL…

vue.js 源代码学习笔记 ----- instance index

import { initMixin } from './init' import { stateMixin } from './state' import { renderMixin } from './render' import { eventsMixin } from './events' import { lifecycleMixin } from './lifecycle' import { warn } from '../util/index' function Vue (opti…

vue.js 源代码学习笔记 ----- instance state

/* @flow */ import Dep from '../observer/dep' import Watcher from '../observer/watcher' import { set, del, observe, observerState, defineReactive } from '../observer/index' import { warn, bind, noop, hasOwn, isReserved, handleError, validateProp, isP…

vue.js 源代码学习笔记 ----- core lifecycle

/* @flow */ import config from '../config' import Watcher from '../observer/watcher' import { mark, measure } from '../util/perf' import { createEmptyVNode } from '../vdom/vnode' import { observerState } from '../observer/index' import { updateCompon…

vue.js 源代码学习笔记 ----- 工具方法 option

/* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from './debug' import { set } from '../observer/index' import { extend, isPlainObject, hasOwn, camelize, capitalize, isBuiltInTag } from 'shared/util' /**…

vue.js 源代码学习笔记 ----- 工具方法 lang

/* @flow */ // Object.freeze 使得这个对象不能增加属性, 修改属性, 这样就保证了这个对象在任何时候都是空的 export const emptyObject = Object.freeze({}) /** * Check if a string starts with $ or _ ascii unicode 的区别 charcodeAt是一个字符的 unicode编码, 但是像 0x24 (代表的是 $ ) 0x5f (代表的是 _ ) 因为是字符, 先存着asc…

vue.js 源代码学习笔记 ----- 工具方法 env

/* @flow */ /* globals MutationObserver */ import { noop } from 'shared/util' // can we use __proto__? 有些浏览器不能让你明目张胆的使用 __proto__ export const hasProto = '__proto__' in {} // Browser environment sniffing 这里作者不太严谨, 直接用 navigator.userAget 判断浏览器 //利用 wi…

vue.js 源代码学习笔记 ----- 工具方法 debug

import config from '../config' import { noop } from 'shared/util' let warn = noop let tip = noop let formatComponentName //如果是在开发环境或者在测试环境 if (process.env.NODE_ENV !== 'production') { //如果有 window.console, 这里用typeof判断, 是因为如果用 if(window.console) //…

vue.js 源代码学习笔记 ----- observe

参考 vue 2.2.6版本 /* @flow */ //引入订阅者模式 import Dep from './dep' import { arrayMethods } from './array' import { def, isObject, isPlainObject, hasProto, hasOwn, warn, isServerRendering } from '../util/index' const arrayKeys = Object.getOwnPropertyNames(a…

React Router学习笔记（转自阮一峰老师博客）

React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 import {Router} from 'react-router'; render(<Router />,document.getElementById('app')); 但是需要真正使用Router,还需要定义Router组件. import { Router, Route, hashHistory…

vue.js 源代码学习笔记 ----- codegenEvents.js

/* @flow */ const fnExpRE = /^\s*([\w$_]+|$[^)]*?$)\s*=>|^function\s*\(/ const simplePathRE = /^\s*[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?']|\[".*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*\s*$/ // keyCode aliases const keyCodes = { esc: 27, tab:…

vue.js 源代码学习笔记 ----- codegen.js

/* @flow */ import { genHandlers } from './events' import { baseWarn, pluckModuleFunction } from '../helpers' import baseDirectives from '../directives/index' import { camelize } from 'shared/util' // configurable state let warn let transforms let da…