.',
21 | el.rawAttrsMap['class']
22 | )
23 | }
24 | }
25 | if (staticClass) {
26 | el.staticClass = JSON.stringify(staticClass)
27 | }
28 | const classBinding = getBindingAttr(el, 'class', false /* getStatic */)
29 | if (classBinding) {
30 | el.classBinding = classBinding
31 | }
32 | }
33 |
34 | function genData (el: ASTElement): string {
35 | let data = ''
36 | if (el.staticClass) {
37 | data += `staticClass:${el.staticClass},`
38 | }
39 | if (el.classBinding) {
40 | data += `class:${el.classBinding},`
41 | }
42 | return data
43 | }
44 |
45 | export default {
46 | staticKeys: ['staticClass'],
47 | transformNode,
48 | genData
49 | }
50 |
--------------------------------------------------------------------------------
/day-3/src/platforms/weex/compiler/modules/recycle-list/recycle-list.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { parseFor } from 'compiler/parser/index'
4 | import { getAndRemoveAttr, addRawAttr } from 'compiler/helpers'
5 |
6 | /**
7 | * Map the following syntax to corresponding attrs:
8 | *
9 | *
10 | * ...
11 | * ...
12 | *
13 | */
14 |
15 | export function preTransformRecycleList (
16 | el: ASTElement,
17 | options: WeexCompilerOptions
18 | ) {
19 | const exp = getAndRemoveAttr(el, 'for')
20 | if (!exp) {
21 | if (options.warn) {
22 | options.warn(`Invalid
syntax: missing "for" expression.`)
23 | }
24 | return
25 | }
26 |
27 | const res = parseFor(exp)
28 | if (!res) {
29 | if (options.warn) {
30 | options.warn(`Invalid syntax: ${exp}.`)
31 | }
32 | return
33 | }
34 |
35 | addRawAttr(el, ':list-data', res.for)
36 | addRawAttr(el, 'binding-expression', res.for)
37 | addRawAttr(el, 'alias', res.alias)
38 | if (res.iterator2) {
39 | // (item, key, index) for object iteration
40 | // is this even supported?
41 | addRawAttr(el, 'index', res.iterator2)
42 | } else if (res.iterator1) {
43 | addRawAttr(el, 'index', res.iterator1)
44 | }
45 |
46 | const switchKey = getAndRemoveAttr(el, 'switch')
47 | if (switchKey) {
48 | addRawAttr(el, 'switch', switchKey)
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/day-3/src/compiler/codeframe.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | const range = 2
4 |
5 | export function generateCodeFrame (
6 | source: string,
7 | start: number = 0,
8 | end: number = source.length
9 | ): string {
10 | const lines = source.split(/\r?\n/)
11 | let count = 0
12 | const res = []
13 | for (let i = 0; i < lines.length; i++) {
14 | count += lines[i].length + 1
15 | if (count >= start) {
16 | for (let j = i - range; j <= i + range || end > count; j++) {
17 | if (j < 0 || j >= lines.length) continue
18 | res.push(`${j + 1}${repeat(` `, 3 - String(j + 1).length)}| ${lines[j]}`)
19 | const lineLength = lines[j].length
20 | if (j === i) {
21 | // push underline
22 | const pad = start - (count - lineLength) + 1
23 | const length = end > count ? lineLength - pad : end - start
24 | res.push(` | ` + repeat(` `, pad) + repeat(`^`, length))
25 | } else if (j > i) {
26 | if (end > count) {
27 | const length = Math.min(end - count, lineLength)
28 | res.push(` | ` + repeat(`^`, length))
29 | }
30 | count += lineLength + 1
31 | }
32 | }
33 | break
34 | }
35 | }
36 | return res.join('\n')
37 | }
38 |
39 | function repeat (str, n) {
40 | let result = ''
41 | if (n > 0) {
42 | while (true) { // eslint-disable-line
43 | if (n & 1) result += str
44 | n >>>= 1
45 | if (n <= 0) break
46 | str += str
47 | }
48 | }
49 | return result
50 | }
51 |
--------------------------------------------------------------------------------
/day-3/analyze/看别人的包 package.json中看.md:
--------------------------------------------------------------------------------
1 | ### 1.看别人的包 package.json中看
2 |
3 | ### 2.看执行的脚背 run build
4 |
5 | ### 3.找到 scripts/build.js
6 |
7 | - 作用是使用rollup打包源代码
8 |
9 | ### 4.当前打包的入口文件 src/platform/web
10 |
11 | ### 5.src
12 |
13 | - compiler 编译相关的
14 | - core 核心文件
15 | - platforms 平台
16 | - server 服务端渲染相关
17 | - sfc 解析.vue文件
18 | - shared
19 |
20 | ### 6.入口文件
21 |
22 | entry-runtime-with-compiler
23 |
24 | - Vue.prototype.\$mount 函数劫持
25 |
26 | runtime/index
27 |
28 | - Vue.prototype.__patch__ 比对dom
29 | - Vue.prototype.\$mount 真实的$mount
30 |
31 | ### 7.core/index vue核心
32 |
33 | - initGlobalAPI 初始化全局api
34 | - Vue.util
35 | - defineReactive
36 | - set
37 | - delete
38 | - nextTick
39 | - initUse
40 | - extend方法
41 | - initMixin
42 |
43 | ### 8.'./instance/index'
44 |
45 | 真正的vue的构造函数
46 |
47 | - initMixin(Vue) // 初始化mixin
48 |
49 | - initLifecycle(vm)
50 |
51 | initEvents(vm)
52 |
53 | initRender(vm)
54 |
55 | callHook(vm, 'beforeCreate')
56 |
57 | initInjections(vm) // resolve injections before data/props
58 |
59 | initState(vm)
60 |
61 | initProvide(vm) // resolve provide after data/props
62 |
63 | callHook(vm, 'created')
64 |
65 | stateMixin(Vue) // $set $delete $watch
66 |
67 | eventsMixin(Vue) // 实现vue的发布订阅模式
68 |
69 | lifecycleMixin(Vue) // Vue.prototype._update $forceUpdate $destroy
70 |
71 | renderMixin(Vue) // Vue.prototype._render
72 |
73 |
74 |
75 | mountComponent 挂载组件
76 |
77 |
78 |
79 | ### 9.挂载逻辑
80 |
81 | core/instance/lifecycle
--------------------------------------------------------------------------------
/day-3/src/platforms/web/server/modules/dom-props.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import VNode from 'core/vdom/vnode'
4 | import { renderAttr } from './attrs'
5 | import { isDef, isUndef, extend } from 'shared/util'
6 | import { propsToAttrMap, isRenderableAttr } from '../util'
7 |
8 | export default function renderDOMProps (node: VNodeWithData): string {
9 | let props = node.data.domProps
10 | let res = ''
11 |
12 | let parent = node.parent
13 | while (isDef(parent)) {
14 | if (parent.data && parent.data.domProps) {
15 | props = extend(extend({}, props), parent.data.domProps)
16 | }
17 | parent = parent.parent
18 | }
19 |
20 | if (isUndef(props)) {
21 | return res
22 | }
23 |
24 | const attrs = node.data.attrs
25 | for (const key in props) {
26 | if (key === 'innerHTML') {
27 | setText(node, props[key], true)
28 | } else if (key === 'textContent') {
29 | setText(node, props[key], false)
30 | } else if (key === 'value' && node.tag === 'textarea') {
31 | setText(node, props[key], false)
32 | } else {
33 | // $flow-disable-line (WTF?)
34 | const attr = propsToAttrMap[key] || key.toLowerCase()
35 | if (isRenderableAttr(attr) &&
36 | // avoid rendering double-bound props/attrs twice
37 | !(isDef(attrs) && isDef(attrs[attr]))
38 | ) {
39 | res += renderAttr(attr, props[key])
40 | }
41 | }
42 | }
43 | return res
44 | }
45 |
46 | function setText (node, text, raw) {
47 | const child = new VNode(undefined, undefined, undefined, text)
48 | child.raw = raw
49 | node.children = [child]
50 | }
51 |
--------------------------------------------------------------------------------
/day-3/src/platforms/web/compiler/modules/style.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { parseText } from 'compiler/parser/text-parser'
4 | import { parseStyleText } from 'web/util/style'
5 | import {
6 | getAndRemoveAttr,
7 | getBindingAttr,
8 | baseWarn
9 | } from 'compiler/helpers'
10 |
11 | function transformNode (el: ASTElement, options: CompilerOptions) {
12 | const warn = options.warn || baseWarn
13 | const staticStyle = getAndRemoveAttr(el, 'style')
14 | if (staticStyle) {
15 | /* istanbul ignore if */
16 | if (process.env.NODE_ENV !== 'production') {
17 | const res = parseText(staticStyle, options.delimiters)
18 | if (res) {
19 | warn(
20 | `style="${staticStyle}": ` +
21 | 'Interpolation inside attributes has been removed. ' +
22 | 'Use v-bind or the colon shorthand instead. For example, ' +
23 | 'instead of , use
.',
24 | el.rawAttrsMap['style']
25 | )
26 | }
27 | }
28 | el.staticStyle = JSON.stringify(parseStyleText(staticStyle))
29 | }
30 |
31 | const styleBinding = getBindingAttr(el, 'style', false /* getStatic */)
32 | if (styleBinding) {
33 | el.styleBinding = styleBinding
34 | }
35 | }
36 |
37 | function genData (el: ASTElement): string {
38 | let data = ''
39 | if (el.staticStyle) {
40 | data += `staticStyle:${el.staticStyle},`
41 | }
42 | if (el.styleBinding) {
43 | data += `style:(${el.styleBinding}),`
44 | }
45 | return data
46 | }
47 |
48 | export default {
49 | staticKeys: ['staticStyle'],
50 | transformNode,
51 | genData
52 | }
53 |
--------------------------------------------------------------------------------
/day-3/src/core/instance/render-helpers/resolve-slots.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import type VNode from 'core/vdom/vnode'
4 |
5 | /**
6 | * Runtime helper for resolving raw children VNodes into a slot object.
7 | */
8 | export function resolveSlots (
9 | children: ?Array
,
10 | context: ?Component
11 | ): { [key: string]: Array } {
12 | if (!children || !children.length) {
13 | return {}
14 | }
15 | const slots = {}
16 | for (let i = 0, l = children.length; i < l; i++) {
17 | const child = children[i]
18 | const data = child.data
19 | // remove slot attribute if the node is resolved as a Vue slot node
20 | if (data && data.attrs && data.attrs.slot) {
21 | delete data.attrs.slot
22 | }
23 | // named slots should only be respected if the vnode was rendered in the
24 | // same context.
25 | if ((child.context === context || child.fnContext === context) &&
26 | data && data.slot != null
27 | ) {
28 | const name = data.slot
29 | const slot = (slots[name] || (slots[name] = []))
30 | if (child.tag === 'template') {
31 | slot.push.apply(slot, child.children || [])
32 | } else {
33 | slot.push(child)
34 | }
35 | } else {
36 | (slots.default || (slots.default = [])).push(child)
37 | }
38 | }
39 | // ignore slots that contains only whitespace
40 | for (const name in slots) {
41 | if (slots[name].every(isWhitespace)) {
42 | delete slots[name]
43 | }
44 | }
45 | return slots
46 | }
47 |
48 | function isWhitespace (node: VNode): boolean {
49 | return (node.isComment && !node.asyncFactory) || node.text === ' '
50 | }
51 |
--------------------------------------------------------------------------------
/day-1/vue-jwt/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 |
3 | const app = express();
4 | const bodyParser = require('body-parser');
5 | const jwt = require('jsonwebtoken');
6 |
7 | app.use((req, res, next) => {
8 | res.header('Access-Control-Allow-Origin', 'http://localhost:8081');
9 | res.header('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT');
10 | res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');
11 | if (req.method.toLowerCase() === 'options') {
12 | return res.end();
13 | }
14 | next();
15 | });
16 | app.use(bodyParser.json());
17 | const secret = 'zfjg';
18 | app.get('/test', (req, res) => {
19 | res.send({ test: 'test' });
20 | });
21 | app.post('/login', (req, res) => {
22 | const { username } = req.body;
23 | if (username === 'admin') { // 如果访问的是admin 种植cookie
24 | res.json({
25 | code: 0,
26 | username: 'admin',
27 | token: jwt.sign({ username: 'admin' }, secret, {
28 | expiresIn: 20,
29 | }),
30 | });
31 | } else {
32 | res.json({
33 | code: 1,
34 | data: '用户名不存在',
35 | });
36 | }
37 | });
38 | app.get('/validate', (req, res) => {
39 | const token = req.headers.authorization;
40 | jwt.verify(token, secret, (err, decode) => { // 验证token的可靠性
41 | if (err) {
42 | return res.json({
43 | code: 1,
44 | data: 'token失效了',
45 | });
46 | }
47 | res.json({
48 | username: decode.username,
49 | code: 0, // 延长tokne的过期时间
50 | token: jwt.sign({ username: 'admin' }, secret, {
51 | expiresIn: 20,
52 | }),
53 | });
54 | });
55 | });
56 |
57 | app.listen(3000);
58 |
--------------------------------------------------------------------------------
/day-3/src/core/observer/dep.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import type Watcher from './watcher'
4 | import { remove } from '../util/index'
5 | import config from '../config'
6 |
7 | let uid = 0
8 |
9 | /**
10 | * A dep is an observable that can have multiple
11 | * directives subscribing to it.
12 | */
13 | export default class Dep {
14 | static target: ?Watcher;
15 | id: number;
16 | subs: Array;
17 |
18 | constructor () {
19 | this.id = uid++
20 | this.subs = []
21 | }
22 |
23 | addSub (sub: Watcher) {
24 | this.subs.push(sub)
25 | }
26 |
27 | removeSub (sub: Watcher) {
28 | remove(this.subs, sub)
29 | }
30 |
31 | depend () {
32 | if (Dep.target) {
33 | Dep.target.addDep(this)
34 | }
35 | }
36 |
37 | notify () {
38 | // stabilize the subscriber list first
39 | const subs = this.subs.slice()
40 | if (process.env.NODE_ENV !== 'production' && !config.async) {
41 | // subs aren't sorted in scheduler if not running async
42 | // we need to sort them now to make sure they fire in correct
43 | // order
44 | subs.sort((a, b) => a.id - b.id)
45 | }
46 | for (let i = 0, l = subs.length; i < l; i++) {
47 | subs[i].update()
48 | }
49 | }
50 | }
51 |
52 | // The current target watcher being evaluated.
53 | // This is globally unique because only one watcher
54 | // can be evaluated at a time.
55 | Dep.target = null
56 | const targetStack = []
57 |
58 | export function pushTarget (target: ?Watcher) {
59 | targetStack.push(target)
60 | Dep.target = target
61 | }
62 |
63 | export function popTarget () {
64 | targetStack.pop()
65 | Dep.target = targetStack[targetStack.length - 1]
66 | }
67 |
--------------------------------------------------------------------------------
/day-3/src/platforms/web/server/modules/attrs.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { escape } from '../util'
4 |
5 | import {
6 | isDef,
7 | isUndef,
8 | extend
9 | } from 'shared/util'
10 |
11 | import {
12 | isBooleanAttr,
13 | isEnumeratedAttr,
14 | isFalsyAttrValue,
15 | convertEnumeratedValue
16 | } from 'web/util/attrs'
17 |
18 | import { isSSRUnsafeAttr } from 'web/server/util'
19 |
20 | export default function renderAttrs (node: VNodeWithData): string {
21 | let attrs = node.data.attrs
22 | let res = ''
23 |
24 | const opts = node.parent && node.parent.componentOptions
25 | if (isUndef(opts) || opts.Ctor.options.inheritAttrs !== false) {
26 | let parent = node.parent
27 | while (isDef(parent)) {
28 | if (isDef(parent.data) && isDef(parent.data.attrs)) {
29 | attrs = extend(extend({}, attrs), parent.data.attrs)
30 | }
31 | parent = parent.parent
32 | }
33 | }
34 |
35 | if (isUndef(attrs)) {
36 | return res
37 | }
38 |
39 | for (const key in attrs) {
40 | if (isSSRUnsafeAttr(key)) {
41 | continue
42 | }
43 | if (key === 'style') {
44 | // leave it to the style module
45 | continue
46 | }
47 | res += renderAttr(key, attrs[key])
48 | }
49 | return res
50 | }
51 |
52 | export function renderAttr (key: string, value: string): string {
53 | if (isBooleanAttr(key)) {
54 | if (!isFalsyAttrValue(value)) {
55 | return ` ${key}="${key}"`
56 | }
57 | } else if (isEnumeratedAttr(key)) {
58 | return ` ${key}="${escape(convertEnumeratedValue(key, value))}"`
59 | } else if (!isFalsyAttrValue(value)) {
60 | return ` ${key}="${escape(String(value))}"`
61 | }
62 | return ''
63 | }
64 |
--------------------------------------------------------------------------------
/day-3/src/core/instance/render-helpers/render-static.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | /**
4 | * Runtime helper for rendering static trees.
5 | */
6 | export function renderStatic (
7 | index: number,
8 | isInFor: boolean
9 | ): VNode | Array {
10 | const cached = this._staticTrees || (this._staticTrees = [])
11 | let tree = cached[index]
12 | // if has already-rendered static tree and not inside v-for,
13 | // we can reuse the same tree.
14 | if (tree && !isInFor) {
15 | return tree
16 | }
17 | // otherwise, render a fresh tree.
18 | tree = cached[index] = this.$options.staticRenderFns[index].call(
19 | this._renderProxy,
20 | null,
21 | this // for render fns generated for functional component templates
22 | )
23 | markStatic(tree, `__static__${index}`, false)
24 | return tree
25 | }
26 |
27 | /**
28 | * Runtime helper for v-once.
29 | * Effectively it means marking the node as static with a unique key.
30 | */
31 | export function markOnce (
32 | tree: VNode | Array,
33 | index: number,
34 | key: string
35 | ) {
36 | markStatic(tree, `__once__${index}${key ? `_${key}` : ``}`, true)
37 | return tree
38 | }
39 |
40 | function markStatic (
41 | tree: VNode | Array,
42 | key: string,
43 | isOnce: boolean
44 | ) {
45 | if (Array.isArray(tree)) {
46 | for (let i = 0; i < tree.length; i++) {
47 | if (tree[i] && typeof tree[i] !== 'string') {
48 | markStaticNode(tree[i], `${key}_${i}`, isOnce)
49 | }
50 | }
51 | } else {
52 | markStaticNode(tree, key, isOnce)
53 | }
54 | }
55 |
56 | function markStaticNode (node, key, isOnce) {
57 | node.isStatic = true
58 | node.key = key
59 | node.isOnce = isOnce
60 | }
61 |
--------------------------------------------------------------------------------
/day-3/src/compiler/parser/text-parser.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { cached } from 'shared/util'
4 | import { parseFilters } from './filter-parser'
5 |
6 | const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g
7 | const regexEscapeRE = /[-.*+?^${}()|[\]\/\\]/g
8 |
9 | const buildRegex = cached(delimiters => {
10 | const open = delimiters[0].replace(regexEscapeRE, '\\$&')
11 | const close = delimiters[1].replace(regexEscapeRE, '\\$&')
12 | return new RegExp(open + '((?:.|\\n)+?)' + close, 'g')
13 | })
14 |
15 | type TextParseResult = {
16 | expression: string,
17 | tokens: Array
18 | }
19 |
20 | export function parseText (
21 | text: string,
22 | delimiters?: [string, string]
23 | ): TextParseResult | void {
24 | const tagRE = delimiters ? buildRegex(delimiters) : defaultTagRE
25 | if (!tagRE.test(text)) {
26 | return
27 | }
28 | const tokens = []
29 | const rawTokens = []
30 | let lastIndex = tagRE.lastIndex = 0
31 | let match, index, tokenValue
32 | while ((match = tagRE.exec(text))) {
33 | index = match.index
34 | // push text token
35 | if (index > lastIndex) {
36 | rawTokens.push(tokenValue = text.slice(lastIndex, index))
37 | tokens.push(JSON.stringify(tokenValue))
38 | }
39 | // tag token
40 | const exp = parseFilters(match[1].trim())
41 | tokens.push(`_s(${exp})`)
42 | rawTokens.push({ '@binding': exp })
43 | lastIndex = index + match[0].length
44 | }
45 | if (lastIndex < text.length) {
46 | rawTokens.push(tokenValue = text.slice(lastIndex))
47 | tokens.push(JSON.stringify(tokenValue))
48 | }
49 | return {
50 | expression: tokens.join('+'),
51 | tokens: rawTokens
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/day-3/src/server/template-renderer/create-async-file-mapper.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | /**
4 | * Creates a mapper that maps components used during a server-side render
5 | * to async chunk files in the client-side build, so that we can inline them
6 | * directly in the rendered HTML to avoid waterfall requests.
7 | */
8 |
9 | import type { ClientManifest } from './index'
10 |
11 | export type AsyncFileMapper = (files: Array) => Array;
12 |
13 | export function createMapper (
14 | clientManifest: ClientManifest
15 | ): AsyncFileMapper {
16 | const map = createMap(clientManifest)
17 | // map server-side moduleIds to client-side files
18 | return function mapper (moduleIds: Array): Array {
19 | const res = new Set()
20 | for (let i = 0; i < moduleIds.length; i++) {
21 | const mapped = map.get(moduleIds[i])
22 | if (mapped) {
23 | for (let j = 0; j < mapped.length; j++) {
24 | res.add(mapped[j])
25 | }
26 | }
27 | }
28 | return Array.from(res)
29 | }
30 | }
31 |
32 | function createMap (clientManifest) {
33 | const map = new Map()
34 | Object.keys(clientManifest.modules).forEach(id => {
35 | map.set(id, mapIdToFile(id, clientManifest))
36 | })
37 | return map
38 | }
39 |
40 | function mapIdToFile (id, clientManifest) {
41 | const files = []
42 | const fileIndices = clientManifest.modules[id]
43 | if (fileIndices) {
44 | fileIndices.forEach(index => {
45 | const file = clientManifest.all[index]
46 | // only include async files or non-js, non-css assets
47 | if (clientManifest.async.indexOf(file) > -1 || !(/\.(js|css)($|\?)/.test(file))) {
48 | files.push(file)
49 | }
50 | })
51 | }
52 | return files
53 | }
54 |
--------------------------------------------------------------------------------
/day-3/src/platforms/web/runtime/class-util.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | const whitespaceRE = /\s+/
4 |
5 | /**
6 | * Add class with compatibility for SVG since classList is not supported on
7 | * SVG elements in IE
8 | */
9 | export function addClass (el: HTMLElement, cls: ?string) {
10 | /* istanbul ignore if */
11 | if (!cls || !(cls = cls.trim())) {
12 | return
13 | }
14 |
15 | /* istanbul ignore else */
16 | if (el.classList) {
17 | if (cls.indexOf(' ') > -1) {
18 | cls.split(whitespaceRE).forEach(c => el.classList.add(c))
19 | } else {
20 | el.classList.add(cls)
21 | }
22 | } else {
23 | const cur = ` ${el.getAttribute('class') || ''} `
24 | if (cur.indexOf(' ' + cls + ' ') < 0) {
25 | el.setAttribute('class', (cur + cls).trim())
26 | }
27 | }
28 | }
29 |
30 | /**
31 | * Remove class with compatibility for SVG since classList is not supported on
32 | * SVG elements in IE
33 | */
34 | export function removeClass (el: HTMLElement, cls: ?string) {
35 | /* istanbul ignore if */
36 | if (!cls || !(cls = cls.trim())) {
37 | return
38 | }
39 |
40 | /* istanbul ignore else */
41 | if (el.classList) {
42 | if (cls.indexOf(' ') > -1) {
43 | cls.split(whitespaceRE).forEach(c => el.classList.remove(c))
44 | } else {
45 | el.classList.remove(cls)
46 | }
47 | if (!el.classList.length) {
48 | el.removeAttribute('class')
49 | }
50 | } else {
51 | let cur = ` ${el.getAttribute('class') || ''} `
52 | const tar = ' ' + cls + ' '
53 | while (cur.indexOf(tar) >= 0) {
54 | cur = cur.replace(tar, ' ')
55 | }
56 | cur = cur.trim()
57 | if (cur) {
58 | el.setAttribute('class', cur)
59 | } else {
60 | el.removeAttribute('class')
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/day-3/src/platforms/weex/util/element.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | // These util functions are split into its own file because Rollup cannot drop
4 | // makeMap() due to potential side effects, so these variables end up
5 | // bloating the web builds.
6 |
7 | import { makeMap, noop } from 'shared/util'
8 |
9 | export const isReservedTag = makeMap(
10 | 'template,script,style,element,content,slot,link,meta,svg,view,' +
11 | 'a,div,img,image,text,span,input,switch,textarea,spinner,select,' +
12 | 'slider,slider-neighbor,indicator,canvas,' +
13 | 'list,cell,header,loading,loading-indicator,refresh,scrollable,scroller,' +
14 | 'video,web,embed,tabbar,tabheader,datepicker,timepicker,marquee,countdown',
15 | true
16 | )
17 |
18 | // Elements that you can, intentionally, leave open (and which close themselves)
19 | // more flexible than web
20 | export const canBeLeftOpenTag = makeMap(
21 | 'web,spinner,switch,video,textarea,canvas,' +
22 | 'indicator,marquee,countdown',
23 | true
24 | )
25 |
26 | export const isRuntimeComponent = makeMap(
27 | 'richtext,transition,transition-group',
28 | true
29 | )
30 |
31 | export const isUnaryTag = makeMap(
32 | 'embed,img,image,input,link,meta',
33 | true
34 | )
35 |
36 | export function mustUseProp (): boolean {
37 | return false
38 | }
39 |
40 | export function getTagNamespace (): void { }
41 |
42 | export function isUnknownElement (): boolean {
43 | return false
44 | }
45 |
46 | export function query (el: string | Element, document: Object) {
47 | // document is injected by weex factory wrapper
48 | const placeholder = document.createComment('root')
49 | placeholder.hasAttribute = placeholder.removeAttribute = noop // hack for patch
50 | document.documentElement.appendChild(placeholder)
51 | return placeholder
52 | }
53 |
--------------------------------------------------------------------------------
/day-3/vue-router-vux/src/vue-router.js:
--------------------------------------------------------------------------------
1 | let Vue;
2 | class Router{
3 | constructor({routes}){
4 | this.routeMap = routes.reduce((memo,current)=>(memo[current.path]=current.component,memo),{});
5 | // # / h5 api
6 | Vue.util.defineReactive(this,'route',{current:'/'});
7 | window.addEventListener('load',()=>{
8 | location.hash?'':location.hash = '/'; // 默认就跳转到 首页
9 | });
10 | window.addEventListener('hashchange',()=>{
11 | this.route.current = location.hash.slice(1);
12 | })
13 | }
14 | }
15 | // Vue.prototype.xxx = 'a'
16 | Router.install = (_Vue)=>{
17 | // 扩展属性 或者 组件 或者 指令
18 | Vue = _Vue
19 | Vue.mixin({ // 内部会把 这个对象给每个组件的属性 混在一起
20 | beforeCreate() {
21 | // 判断根组件是谁
22 | if(this.$options&&this.$options.router){
23 | this._router = this.$options.router;
24 | }else{
25 | // 让所有的子组件 都有这个_router属性 指向当前 router
26 | this._router = this.$parent && this.$parent._router
27 | }
28 | // 每个组件 $route $router
29 | Object.defineProperty(this,'$route',{
30 | value:{}
31 | });
32 | Object.defineProperty(this,'$router',{
33 | value:{}
34 | });
35 | },
36 | })
37 | // router-link router-view
38 | Vue.component('router-link',{
39 | props:{
40 | to:String
41 | },
42 | render(){
43 | return {this.$slots.default}
44 | }
45 | });
46 | Vue.component('router-view',{
47 | render(h){
48 |
49 | return h(this._router.routeMap[this._router.route.current]);
50 | }
51 | })
52 | }
53 | export default Router
--------------------------------------------------------------------------------
/day-3/src/platforms/web/runtime/node-ops.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { namespaceMap } from 'web/util/index'
4 |
5 | export function createElement (tagName: string, vnode: VNode): Element {
6 | const elm = document.createElement(tagName)
7 | if (tagName !== 'select') {
8 | return elm
9 | }
10 | // false or null will remove the attribute but undefined will not
11 | if (vnode.data && vnode.data.attrs && vnode.data.attrs.multiple !== undefined) {
12 | elm.setAttribute('multiple', 'multiple')
13 | }
14 | return elm
15 | }
16 |
17 | export function createElementNS (namespace: string, tagName: string): Element {
18 | return document.createElementNS(namespaceMap[namespace], tagName)
19 | }
20 |
21 | export function createTextNode (text: string): Text {
22 | return document.createTextNode(text)
23 | }
24 |
25 | export function createComment (text: string): Comment {
26 | return document.createComment(text)
27 | }
28 |
29 | export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
30 | parentNode.insertBefore(newNode, referenceNode)
31 | }
32 |
33 | export function removeChild (node: Node, child: Node) {
34 | node.removeChild(child)
35 | }
36 |
37 | export function appendChild (node: Node, child: Node) {
38 | node.appendChild(child)
39 | }
40 |
41 | export function parentNode (node: Node): ?Node {
42 | return node.parentNode
43 | }
44 |
45 | export function nextSibling (node: Node): ?Node {
46 | return node.nextSibling
47 | }
48 |
49 | export function tagName (node: Element): string {
50 | return node.tagName
51 | }
52 |
53 | export function setTextContent (node: Node, text: string) {
54 | node.textContent = text
55 | }
56 |
57 | export function setStyleScope (node: Element, scopeId: string) {
58 | node.setAttribute(scopeId, '')
59 | }
60 |
--------------------------------------------------------------------------------
/day-3/src/core/instance/render-helpers/bind-object-props.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import config from 'core/config'
4 |
5 | import {
6 | warn,
7 | isObject,
8 | toObject,
9 | isReservedAttribute,
10 | camelize,
11 | hyphenate
12 | } from 'core/util/index'
13 |
14 | /**
15 | * Runtime helper for merging v-bind="object" into a VNode's data.
16 | */
17 | export function bindObjectProps (
18 | data: any,
19 | tag: string,
20 | value: any,
21 | asProp: boolean,
22 | isSync?: boolean
23 | ): VNodeData {
24 | if (value) {
25 | if (!isObject(value)) {
26 | process.env.NODE_ENV !== 'production' && warn(
27 | 'v-bind without argument expects an Object or Array value',
28 | this
29 | )
30 | } else {
31 | if (Array.isArray(value)) {
32 | value = toObject(value)
33 | }
34 | let hash
35 | for (const key in value) {
36 | if (
37 | key === 'class' ||
38 | key === 'style' ||
39 | isReservedAttribute(key)
40 | ) {
41 | hash = data
42 | } else {
43 | const type = data.attrs && data.attrs.type
44 | hash = asProp || config.mustUseProp(tag, type, key)
45 | ? data.domProps || (data.domProps = {})
46 | : data.attrs || (data.attrs = {})
47 | }
48 | const camelizedKey = camelize(key)
49 | const hyphenatedKey = hyphenate(key)
50 | if (!(camelizedKey in hash) && !(hyphenatedKey in hash)) {
51 | hash[key] = value[key]
52 |
53 | if (isSync) {
54 | const on = data.on || (data.on = {})
55 | on[`update:${key}`] = function ($event) {
56 | value[key] = $event
57 | }
58 | }
59 | }
60 | }
61 | }
62 | }
63 | return data
64 | }
65 |
--------------------------------------------------------------------------------
/day-2/src/components/CascaderItem.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
--------------------------------------------------------------------------------
/day-3/src/platforms/weex/util/parser.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | // import { warn } from 'core/util/index'
4 |
5 | // this will be preserved during build
6 | // $flow-disable-line
7 | const acorn = require('acorn') // $flow-disable-line
8 | const walk = require('acorn/dist/walk') // $flow-disable-line
9 | const escodegen = require('escodegen')
10 |
11 | export function nodeToBinding (node: Object): any {
12 | switch (node.type) {
13 | case 'Literal': return node.value
14 | case 'Identifier':
15 | case 'UnaryExpression':
16 | case 'BinaryExpression':
17 | case 'LogicalExpression':
18 | case 'ConditionalExpression':
19 | case 'MemberExpression': return { '@binding': escodegen.generate(node) }
20 | case 'ArrayExpression': return node.elements.map(_ => nodeToBinding(_))
21 | case 'ObjectExpression': {
22 | const object = {}
23 | node.properties.forEach(prop => {
24 | if (!prop.key || prop.key.type !== 'Identifier') {
25 | return
26 | }
27 | const key = escodegen.generate(prop.key)
28 | const value = nodeToBinding(prop.value)
29 | if (key && value) {
30 | object[key] = value
31 | }
32 | })
33 | return object
34 | }
35 | default: {
36 | // warn(`Not support ${node.type}: "${escodegen.generate(node)}"`)
37 | return ''
38 | }
39 | }
40 | }
41 |
42 | export function generateBinding (exp: ?string): any {
43 | if (exp && typeof exp === 'string') {
44 | let ast = null
45 | try {
46 | ast = acorn.parse(`(${exp})`)
47 | } catch (e) {
48 | // warn(`Failed to parse the expression: "${exp}"`)
49 | return ''
50 | }
51 |
52 | let output = ''
53 | walk.simple(ast, {
54 | Expression (node) {
55 | output = nodeToBinding(node)
56 | }
57 | })
58 | return output
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/day-3/vue-auth 2/src/store.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import Vuex from "vuex";
3 | import {authRoutes} from './router';
4 | Vue.use(Vuex);
5 | import axios from "axios";
6 | axios.defaults.baseURL = "http://localhost:3000";
7 | axios.interceptors.response.use(res => {
8 | return res.data;
9 | });
10 | // 权限相关的
11 | const getTreeList = menuList => {
12 | let menu = []; // 用来渲染菜单的
13 | let routeMap = {};
14 | let auths = [];
15 | menuList.forEach(m => {
16 | auths.push(m.auth);
17 | m.children = []; // 增加一个孩子列表
18 | routeMap[m.id] =m ;
19 | if(m.pid == -1){ // 是根节点
20 | menu.push(m);
21 | }else{
22 | if(routeMap[m.pid]){ //找到对应的父亲 将值 塞进去
23 | routeMap[m.pid].children.push(m);
24 | }
25 | }
26 | });
27 | return {menu,auths}
28 | };
29 | const formatList = (authRoutes,auths)=>{
30 | return authRoutes.filter(route=>{
31 | if(auths.includes(route.name)){
32 | if(route.children){
33 | route.children = formatList(route.children,auths)
34 | }
35 | return true
36 | }
37 | })
38 | }
39 | export default new Vuex.Store({
40 | state: {
41 | hasPermission: false,
42 | menuList:[],
43 | btnPermission:{
44 | 'edit':true,
45 | 'add':false
46 | }
47 | },
48 | mutations: {
49 | setMenuList(state,menu){
50 | state.menuList = menu
51 | },
52 | setPermission(state){
53 | state.hasPermission = true;
54 | }
55 | },
56 | actions: {
57 | async getNewRoute({commit,dispatch}) {
58 | // 发起请求 请求后端数据
59 | // 需要 把刚才的扁平的数据
60 | // 获取权限
61 | let { menuList } = await axios.get("/roleAuth");
62 | let {auths,menu} = getTreeList(menuList);
63 | commit('setMenuList',menu);
64 |
65 | let needRoutes = formatList(authRoutes,auths);
66 | commit('setPermission')
67 | return needRoutes;
68 | }
69 | }
70 | });
71 |
--------------------------------------------------------------------------------
/day-3/src/platforms/web/runtime/directives/show.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { enter, leave } from '../modules/transition'
4 |
5 | // recursively search for possible transition defined inside the component root
6 | function locateNode (vnode: VNode): VNodeWithData {
7 | return vnode.componentInstance && (!vnode.data || !vnode.data.transition)
8 | ? locateNode(vnode.componentInstance._vnode)
9 | : vnode
10 | }
11 |
12 | export default {
13 | bind (el: any, { value }: VNodeDirective, vnode: VNodeWithData) {
14 | vnode = locateNode(vnode)
15 | const transition = vnode.data && vnode.data.transition
16 | const originalDisplay = el.__vOriginalDisplay =
17 | el.style.display === 'none' ? '' : el.style.display
18 | if (value && transition) {
19 | vnode.data.show = true
20 | enter(vnode, () => {
21 | el.style.display = originalDisplay
22 | })
23 | } else {
24 | el.style.display = value ? originalDisplay : 'none'
25 | }
26 | },
27 |
28 | update (el: any, { value, oldValue }: VNodeDirective, vnode: VNodeWithData) {
29 | /* istanbul ignore if */
30 | if (!value === !oldValue) return
31 | vnode = locateNode(vnode)
32 | const transition = vnode.data && vnode.data.transition
33 | if (transition) {
34 | vnode.data.show = true
35 | if (value) {
36 | enter(vnode, () => {
37 | el.style.display = el.__vOriginalDisplay
38 | })
39 | } else {
40 | leave(vnode, () => {
41 | el.style.display = 'none'
42 | })
43 | }
44 | } else {
45 | el.style.display = value ? el.__vOriginalDisplay : 'none'
46 | }
47 | },
48 |
49 | unbind (
50 | el: any,
51 | binding: VNodeDirective,
52 | vnode: VNodeWithData,
53 | oldVnode: VNodeWithData,
54 | isDestroy: boolean
55 | ) {
56 | if (!isDestroy) {
57 | el.style.display = el.__vOriginalDisplay
58 | }
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/day-1/vue-component/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/day-3/src/platforms/weex/compiler/modules/recycle-list/index.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { preTransformRecycleList } from './recycle-list'
4 | import { postTransformComponent } from './component'
5 | import { postTransformComponentRoot } from './component-root'
6 | import { postTransformText } from './text'
7 | import { preTransformVBind } from './v-bind'
8 | import { preTransformVIf } from './v-if'
9 | import { preTransformVFor } from './v-for'
10 | import { postTransformVOn } from './v-on'
11 | import { preTransformVOnce } from './v-once'
12 |
13 | let currentRecycleList = null
14 |
15 | function shouldCompile (el: ASTElement, options: WeexCompilerOptions) {
16 | return options.recyclable ||
17 | (currentRecycleList && el !== currentRecycleList)
18 | }
19 |
20 | function preTransformNode (el: ASTElement, options: WeexCompilerOptions) {
21 | if (el.tag === 'recycle-list') {
22 | preTransformRecycleList(el, options)
23 | currentRecycleList = el
24 | }
25 | if (shouldCompile(el, options)) {
26 | preTransformVBind(el)
27 | preTransformVIf(el, options) // also v-else-if and v-else
28 | preTransformVFor(el, options)
29 | preTransformVOnce(el)
30 | }
31 | }
32 |
33 | function transformNode (el: ASTElement, options: WeexCompilerOptions) {
34 | if (shouldCompile(el, options)) {
35 | // do nothing yet
36 | }
37 | }
38 |
39 | function postTransformNode (el: ASTElement, options: WeexCompilerOptions) {
40 | if (shouldCompile(el, options)) {
41 | // mark child component in parent template
42 | postTransformComponent(el, options)
43 | // mark root in child component template
44 | postTransformComponentRoot(el)
45 | // : transform children text into value attr
46 | if (el.tag === 'text') {
47 | postTransformText(el)
48 | }
49 | postTransformVOn(el)
50 | }
51 | if (el === currentRecycleList) {
52 | currentRecycleList = null
53 | }
54 | }
55 |
56 | export default {
57 | preTransformNode,
58 | transformNode,
59 | postTransformNode
60 | }
61 |
--------------------------------------------------------------------------------
/day-3/src/core/global-api/index.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import config from '../config'
4 | import { initUse } from './use'
5 | import { initMixin } from './mixin'
6 | import { initExtend } from './extend'
7 | import { initAssetRegisters } from './assets'
8 | import { set, del } from '../observer/index'
9 | import { ASSET_TYPES } from 'shared/constants'
10 | import builtInComponents from '../components/index'
11 | import { observe } from 'core/observer/index'
12 |
13 | import {
14 | warn,
15 | extend,
16 | nextTick,
17 | mergeOptions,
18 | defineReactive
19 | } from '../util/index'
20 |
21 | export function initGlobalAPI (Vue: GlobalAPI) {
22 | // config
23 | const configDef = {}
24 | configDef.get = () => config
25 | if (process.env.NODE_ENV !== 'production') {
26 | configDef.set = () => {
27 | warn(
28 | 'Do not replace the Vue.config object, set individual fields instead.'
29 | )
30 | }
31 | }
32 | Object.defineProperty(Vue, 'config', configDef)
33 |
34 | // exposed util methods.
35 | // NOTE: these are not considered part of the public API - avoid relying on
36 | // them unless you are aware of the risk.
37 | Vue.util = {
38 | warn,
39 | extend,
40 | mergeOptions,
41 | defineReactive // Object.defineProperty
42 | }
43 |
44 | Vue.set = set // set 调用的defineReactve
45 | Vue.delete = del
46 | Vue.nextTick = nextTick // nextTick下一事件环 Vue.nextTick(()=>{}) // eventLoop
47 |
48 | // 2.6 explicit observable API
49 | Vue.observable = (obj: T): T => {
50 | observe(obj)
51 | return obj
52 | }
53 |
54 | Vue.options = Object.create(null)
55 | ASSET_TYPES.forEach(type => {
56 | Vue.options[type + 's'] = Object.create(null)
57 | })
58 |
59 | // this is used to identify the "base" constructor to extend all plain-object
60 | // components with in Weex's multi-instance scenarios.
61 | Vue.options._base = Vue
62 |
63 | extend(Vue.options.components, builtInComponents)
64 |
65 | initUse(Vue)
66 | initMixin(Vue) Vue.mixin 合并
67 | initExtend(Vue) Vue.extend
68 | initAssetRegisters(Vue)
69 | }
70 |
--------------------------------------------------------------------------------
/day-3/src/server/webpack-plugin/server.js:
--------------------------------------------------------------------------------
1 | import { validate, isJS, onEmit } from './util'
2 |
3 | export default class VueSSRServerPlugin {
4 | constructor (options = {}) {
5 | this.options = Object.assign({
6 | filename: 'vue-ssr-server-bundle.json'
7 | }, options)
8 | }
9 |
10 | apply (compiler) {
11 | validate(compiler)
12 |
13 | onEmit(compiler, 'vue-server-plugin', (compilation, cb) => {
14 | const stats = compilation.getStats().toJson()
15 | const entryName = Object.keys(stats.entrypoints)[0]
16 | const entryInfo = stats.entrypoints[entryName]
17 |
18 | if (!entryInfo) {
19 | // #5553
20 | return cb()
21 | }
22 |
23 | const entryAssets = entryInfo.assets.filter(isJS)
24 |
25 | if (entryAssets.length > 1) {
26 | throw new Error(
27 | `Server-side bundle should have one single entry file. ` +
28 | `Avoid using CommonsChunkPlugin in the server config.`
29 | )
30 | }
31 |
32 | const entry = entryAssets[0]
33 | if (!entry || typeof entry !== 'string') {
34 | throw new Error(
35 | `Entry "${entryName}" not found. Did you specify the correct entry option?`
36 | )
37 | }
38 |
39 | const bundle = {
40 | entry,
41 | files: {},
42 | maps: {}
43 | }
44 |
45 | stats.assets.forEach(asset => {
46 | if (isJS(asset.name)) {
47 | bundle.files[asset.name] = compilation.assets[asset.name].source()
48 | } else if (asset.name.match(/\.js\.map$/)) {
49 | bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source())
50 | }
51 | // do not emit anything else for server
52 | delete compilation.assets[asset.name]
53 | })
54 |
55 | const json = JSON.stringify(bundle, null, 2)
56 | const filename = this.options.filename
57 |
58 | compilation.assets[filename] = {
59 | source: () => json,
60 | size: () => json.length
61 | }
62 |
63 | cb()
64 | })
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/day-3/src/platforms/web/util/attrs.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { makeMap } from 'shared/util'
4 |
5 | // these are reserved for web because they are directly compiled away
6 | // during template compilation
7 | export const isReservedAttr = makeMap('style,class')
8 |
9 | // attributes that should be using props for binding
10 | const acceptValue = makeMap('input,textarea,option,select,progress')
11 | export const mustUseProp = (tag: string, type: ?string, attr: string): boolean => {
12 | return (
13 | (attr === 'value' && acceptValue(tag)) && type !== 'button' ||
14 | (attr === 'selected' && tag === 'option') ||
15 | (attr === 'checked' && tag === 'input') ||
16 | (attr === 'muted' && tag === 'video')
17 | )
18 | }
19 |
20 | export const isEnumeratedAttr = makeMap('contenteditable,draggable,spellcheck')
21 |
22 | const isValidContentEditableValue = makeMap('events,caret,typing,plaintext-only')
23 |
24 | export const convertEnumeratedValue = (key: string, value: any) => {
25 | return isFalsyAttrValue(value) || value === 'false'
26 | ? 'false'
27 | // allow arbitrary string value for contenteditable
28 | : key === 'contenteditable' && isValidContentEditableValue(value)
29 | ? value
30 | : 'true'
31 | }
32 |
33 | export const isBooleanAttr = makeMap(
34 | 'allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,' +
35 | 'default,defaultchecked,defaultmuted,defaultselected,defer,disabled,' +
36 | 'enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,' +
37 | 'muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,' +
38 | 'required,reversed,scoped,seamless,selected,sortable,translate,' +
39 | 'truespeed,typemustmatch,visible'
40 | )
41 |
42 | export const xlinkNS = 'http://www.w3.org/1999/xlink'
43 |
44 | export const isXlink = (name: string): boolean => {
45 | return name.charAt(5) === ':' && name.slice(0, 5) === 'xlink'
46 | }
47 |
48 | export const getXlinkProp = (name: string): string => {
49 | return isXlink(name) ? name.slice(6, name.length) : ''
50 | }
51 |
52 | export const isFalsyAttrValue = (val: any): boolean => {
53 | return val == null || val === false
54 | }
55 |
--------------------------------------------------------------------------------
/day-3/src/core/vdom/helpers/extract-props.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import {
4 | tip,
5 | hasOwn,
6 | isDef,
7 | isUndef,
8 | hyphenate,
9 | formatComponentName
10 | } from 'core/util/index'
11 |
12 | export function extractPropsFromVNodeData (
13 | data: VNodeData,
14 | Ctor: Class,
15 | tag?: string
16 | ): ?Object {
17 | // we are only extracting raw values here.
18 | // validation and default values are handled in the child
19 | // component itself.
20 | const propOptions = Ctor.options.props
21 | if (isUndef(propOptions)) {
22 | return
23 | }
24 | const res = {}
25 | const { attrs, props } = data
26 | if (isDef(attrs) || isDef(props)) {
27 | for (const key in propOptions) {
28 | const altKey = hyphenate(key)
29 | if (process.env.NODE_ENV !== 'production') {
30 | const keyInLowerCase = key.toLowerCase()
31 | if (
32 | key !== keyInLowerCase &&
33 | attrs && hasOwn(attrs, keyInLowerCase)
34 | ) {
35 | tip(
36 | `Prop "${keyInLowerCase}" is passed to component ` +
37 | `${formatComponentName(tag || Ctor)}, but the declared prop name is` +
38 | ` "${key}". ` +
39 | `Note that HTML attributes are case-insensitive and camelCased ` +
40 | `props need to use their kebab-case equivalents when using in-DOM ` +
41 | `templates. You should probably use "${altKey}" instead of "${key}".`
42 | )
43 | }
44 | }
45 | checkProp(res, props, key, altKey, true) ||
46 | checkProp(res, attrs, key, altKey, false)
47 | }
48 | }
49 | return res
50 | }
51 |
52 | function checkProp (
53 | res: Object,
54 | hash: ?Object,
55 | key: string,
56 | altKey: string,
57 | preserve: boolean
58 | ): boolean {
59 | if (isDef(hash)) {
60 | if (hasOwn(hash, key)) {
61 | res[key] = hash[key]
62 | if (!preserve) {
63 | delete hash[key]
64 | }
65 | return true
66 | } else if (hasOwn(hash, altKey)) {
67 | res[key] = hash[altKey]
68 | if (!preserve) {
69 | delete hash[altKey]
70 | }
71 | return true
72 | }
73 | }
74 | return false
75 | }
76 |
--------------------------------------------------------------------------------
/day-3/src/platforms/web/util/style.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | import { cached, extend, toObject } from 'shared/util'
4 |
5 | export const parseStyleText = cached(function (cssText) {
6 | const res = {}
7 | const listDelimiter = /;(?![^(]*\))/g
8 | const propertyDelimiter = /:(.+)/
9 | cssText.split(listDelimiter).forEach(function (item) {
10 | if (item) {
11 | const tmp = item.split(propertyDelimiter)
12 | tmp.length > 1 && (res[tmp[0].trim()] = tmp[1].trim())
13 | }
14 | })
15 | return res
16 | })
17 |
18 | // merge static and dynamic style data on the same vnode
19 | function normalizeStyleData (data: VNodeData): ?Object {
20 | const style = normalizeStyleBinding(data.style)
21 | // static style is pre-processed into an object during compilation
22 | // and is always a fresh object, so it's safe to merge into it
23 | return data.staticStyle
24 | ? extend(data.staticStyle, style)
25 | : style
26 | }
27 |
28 | // normalize possible array / string values into Object
29 | export function normalizeStyleBinding (bindingStyle: any): ?Object {
30 | if (Array.isArray(bindingStyle)) {
31 | return toObject(bindingStyle)
32 | }
33 | if (typeof bindingStyle === 'string') {
34 | return parseStyleText(bindingStyle)
35 | }
36 | return bindingStyle
37 | }
38 |
39 | /**
40 | * parent component style should be after child's
41 | * so that parent component's style could override it
42 | */
43 | export function getStyle (vnode: VNodeWithData, checkChild: boolean): Object {
44 | const res = {}
45 | let styleData
46 |
47 | if (checkChild) {
48 | let childNode = vnode
49 | while (childNode.componentInstance) {
50 | childNode = childNode.componentInstance._vnode
51 | if (
52 | childNode && childNode.data &&
53 | (styleData = normalizeStyleData(childNode.data))
54 | ) {
55 | extend(res, styleData)
56 | }
57 | }
58 | }
59 |
60 | if ((styleData = normalizeStyleData(vnode.data))) {
61 | extend(res, styleData)
62 | }
63 |
64 | let parentNode = vnode
65 | while ((parentNode = parentNode.parent)) {
66 | if (parentNode.data && (styleData = normalizeStyleData(parentNode.data))) {
67 | extend(res, styleData)
68 | }
69 | }
70 | return res
71 | }
72 |
--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2 | # yarn lockfile v1
3 |
4 |
5 | commander@~2.13.0:
6 | version "2.13.0"
7 | resolved "https://registry.npm.taobao.org/commander/download/commander-2.13.0.tgz?cache=0&sync_timestamp=1565398176321&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcommander%2Fdownload%2Fcommander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
8 | integrity sha1-aWS8pnaF33wfFDDFhPB9dZeIW5w=
9 |
10 | source-list-map@^2.0.0:
11 | version "2.0.1"
12 | resolved "https://registry.npm.taobao.org/source-list-map/download/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
13 | integrity sha1-OZO9hzv8SEecyp6jpUeDXHwVSzQ=
14 |
15 | source-map@^0.5.6:
16 | version "0.5.7"
17 | resolved "https://registry.npm.taobao.org/source-map/download/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
18 | integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
19 |
20 | source-map@~0.6.1:
21 | version "0.6.1"
22 | resolved "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
23 | integrity sha1-dHIq8y6WFOnCh6jQu95IteLxomM=
24 |
25 | uglify-es@^3.0.21:
26 | version "3.3.9"
27 | resolved "https://registry.npm.taobao.org/uglify-es/download/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
28 | integrity sha1-DBxPBwC+2NvBJM2zBNJZLKID5nc=
29 | dependencies:
30 | commander "~2.13.0"
31 | source-map "~0.6.1"
32 |
33 | uglifyjs-webpack-plugin@1.0.0-beta.1:
34 | version "1.0.0-beta.1"
35 | resolved "https://registry.npm.taobao.org/uglifyjs-webpack-plugin/download/uglifyjs-webpack-plugin-1.0.0-beta.1.tgz#595c14d8b85bedd708ab7a6e811894fbe0e69890"
36 | integrity sha1-WVwU2Lhb7dcIq3pugRiU++DmmJA=
37 | dependencies:
38 | source-map "^0.5.6"
39 | uglify-es "^3.0.21"
40 | webpack-sources "^1.0.1"
41 |
42 | webpack-sources@^1.0.1:
43 | version "1.4.3"
44 | resolved "https://registry.npm.taobao.org/webpack-sources/download/webpack-sources-1.4.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwebpack-sources%2Fdownload%2Fwebpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
45 | integrity sha1-7t2OwLko+/HL/plOItLYkPMwqTM=
46 | dependencies:
47 | source-list-map "^2.0.0"
48 | source-map "~0.6.1"
49 |
--------------------------------------------------------------------------------
/day-1/vue-jwt/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
9 |
Installed CLI Plugins
10 |
14 |
Essential Links
15 |
22 |
Ecosystem
23 |
30 |