<html>
<head>
<script type="text/javascript" src="./global/js/vue.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todos">
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button>
    </li>
  </ul>
</div>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [
      { text: 'Add some todos' }
    ]
  },
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)
    }
  },
  created: function () { // 钩子
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
});
console.log(vm.$data);
console.log(vm.$el); // == document.getElementById('app')
</script>
</body>
</html>


源代码片段

(function (global, factory) {
	  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
	  typeof define === 'function' && define.amd ? define(factory) :
	  (global.Vue = factory());
	}(this, function () { 'use strict';
	
	function set(obj, key, val) {
	}
	function del(obj, key) {
	}
	function hasOwn(obj, key) {
        return hasOwnProperty.call(obj, key);
    }
	var nextTick = (function () {
		
	})();
	
	// Cache class
	function Cache(limit) {
	    this.size = 0;
	    this.limit = limit;
	    this.head = this.tail = undefined;
	    this._keymap = Object.create(null);
	}
	var p = Cache.prototype;
	p.put = function (key, value) {
	}
	p.shift = function () {
	}
	p.get = function (key, returnEntry) {
	}
	
	var cache$1 = new Cache(1000);
	
	var directive = Object.freeze({
	    parseDirective: parseDirective
	});
	
	var text = Object.freeze({
	    compileRegex: compileRegex,
	    parseText: parseText,
	    tokensToExp: tokensToExp
	});
	
	var config = Object.defineProperties({
		debug: false,
		async: true,
		//...
	});
	
	var transition = Object.freeze({
	    appendWithTransition: appendWithTransition,
	    beforeWithTransition: beforeWithTransition,
	    removeWithTransition: removeWithTransition,
	    applyTransition: applyTransition
	});
	
	var strats = config.optionMergeStrategies = Object.create(null);
	strats.data = function (parentVal, childVal, vm) {}
	strats.el = function (parentVal, childVal, vm) {
	
	// Dep class
	function Dep() {
	}
	Dep.target = null;
	Dep.prototype.addSub = function (sub) {}
	Dep.prototype.removeSub = function (sub) {}
	Dep.prototype.depend = function () {}
	Dep.prototype.notify = function () {}

	// Observer class
	function Observer(value) {
	}
	Observer.prototype.walk = function (obj) {
	}
	Observer.prototype.observeArray = function (items) {
	}
	Observer.prototype.convert = function (key, val) {
	}
	Observer.prototype.addVm = function (vm) {
	}
	Observer.prototype.removeVm = function (vm) {
	}

	
	var util = Object.freeze({
	  	defineReactive: defineReactive,
	  	set: set,
	  	del: del,
	  	hasOwn: hasOwn,
	  	isLiteral: isLiteral,
	  	isReserved: isReserved,
	  	_toString: _toString,
	  	toNumber: toNumber,
	  	toBoolean: toBoolean,
	  	stripQuotes: stripQuotes,
	  	camelize: camelize,
	  	hyphenate: hyphenate,
	  	classify: classify,
	  	bind: bind,
	  	toArray: toArray,
	  	extend: extend,
	  	isObject: isObject,
	  	isPlainObject: isPlainObject,
	  	def: def,
	  	debounce: _debounce,
	  	indexOf: indexOf,
	  	cancellable: cancellable,
	  	looseEqual: looseEqual,
	  	isArray: isArray,
	  	hasProto: hasProto,
	  	inBrowser: inBrowser,
	  	devtools: devtools,
	  	isIE: isIE,
	  	isIE9: isIE9,
	  	isAndroid: isAndroid,
	  	isIos: isIos,
	  	iosVersionMatch: iosVersionMatch,
	  	iosVersion: iosVersion,
	  	hasMutationObserverBug: hasMutationObserverBug,
	  	get transitionProp () { return transitionProp; },
	  	get transitionEndEvent () { return transitionEndEvent; },
	  	get animationProp () { return animationProp; },
	  	get animationEndEvent () { return animationEndEvent; },
	  	nextTick: nextTick,
	  	get _Set () { return _Set; },
	  	query: query,
	  	inDoc: inDoc,
	  	getAttr: getAttr,
	  	getBindAttr: getBindAttr,
	  	hasBindAttr: hasBindAttr,
	  	before: before,
	  	after: after,
	  	remove: remove,
	  	prepend: prepend,
	  	replace: replace,
	  	on: on,
	  	off: off,
	  	setClass: setClass,
	  	addClass: addClass,
	  	removeClass: removeClass,
	  	extractContent: extractContent,
	  	trimNode: trimNode,
	  	isTemplate: isTemplate,
	  	createAnchor: createAnchor,
	  	findRef: findRef,
	  	mapNodeRange: mapNodeRange,
	  	removeNodeRange: removeNodeRange,
	  	isFragment: isFragment,
	  	getOuterHTML: getOuterHTML,
	  	mergeOptions: mergeOptions,
	  	resolveAsset: resolveAsset,
	  	checkComponentAttr: checkComponentAttr,
	  	commonTagRE: commonTagRE,
	  	reservedTagRE: reservedTagRE,
	  	get warn () { return warn; }
    });
	
	function initMixin (Vue) {
		Vue.prototype._init = function (options) {
		}
	}
	
	// ...
	var path = Object.freeze({
	    parsePath: parsePath,
	    getPath: getPath,
	    setPath: setPath
	});
	
	// ...
	var expression = Object.freeze({
	    parseExpression: parseExpression,
	    isSimplePath: isSimplePath
	});
	// ...
	
	// Watcher class
	function Watcher(vm, expOrFn, cb, options) {
	}
	Watcher.prototype.get = function () {
	};
	Watcher.prototype.set = function (value) {
	};
	Watcher.prototype.beforeGet = function () {
	};
	Watcher.prototype.addDep = function (dep) {
	};
	Watcher.prototype.afterGet = function () {
	};
	Watcher.prototype.update = function (shallow) {
	};
	Watcher.prototype.run = function () {
	};
	Watcher.prototype.evaluate = function () {
	};
	Watcher.prototype.depend = function () {
	};
	Watcher.prototype.teardown = function () {
	};
	
	var text$1 = {
		bind: function bind() {
		},
		update: function update(value) {
		}
	};
	// ...
	var templateCache = new Cache(1000);
	var idSelectorCache = new Cache(1000);
	  
	var template = Object.freeze({
	    cloneNode: cloneNode,
	    parseTemplate: parseTemplate
	 });
	
	var html = {
		bind: function bind() {
		},
		update: function update(value) {
		},
		swap: function swap(value) {
		}
	};
	
	// Fragment class
	function Fragment(linker, vm, frag, host, scope, parentFrag) {
	}
	Fragment.prototype.callHook = function (hook) {
	};
	Fragment.prototype.beforeRemove = function () {
	};
	Fragment.prototype.destroy = function () {
	};
	
	var linkerCache = new Cache(5000);
	
	// FragmentFactory class
	function FragmentFactory(vm, el) {
	}
	FragmentFactory.prototype.create = function (host, scope, parentFrag) {
	}
	
	var vFor = {
		bind: function bind() {
		},
		update: function update(data) {
		},
		diff: function diff(data) {
		},
		create: function create(value, alias, index, key) {
		},
		insert: function insert(frag, index, prevEl, inDocument) {
		},
		remove: function remove(frag, index, total, inDocument) {
		},
		move: function move(frag, prevEl) {
		},
		unbind: function unbind() {
		}
	};
	
	var vIf = {
		priority: IF,
		bind: function bind() {
		},
		update: function update(value) {
		},
		insert: function insert() {
		},
		remove: function remove() {
		},
		unbind: function unbind() {
		}
	};
	
	var show = {
		bind: function bind() {
		},
		update: function update(value) {
		},
		apply: function apply(el, value) {
		}
	};
	
	var text$2 = {
		bind: function bind() {
		},
		update: function update(value) {
		},
		unbind: function unbind() {
		}
	};
	
	var radio = {
		bind: function bind() {
		},
		update: function update(value) {
		}
	};
	
	var select = {
		bind: function bind() {	
		},
		update: function update(value) {
		},
		unbind: function unbind() {
		}
	};
	
	var checkbox = {
		bind: function bind() {	
		},
		update: function update(value) {
		}
	};
	
	var model = {
		priority: MODEL,	
		bind: function bind() {
		},
		checkFilters: function checkFilters() {
		},
		unbind: function unbind() {
		}
	};
	
	var keyCodes = {
	    esc: 27,
	    tab: 9,
	    enter: 13,
	    space: 32,
	    'delete': [8, 46],
	    up: 38,
	    left: 37,
	    right: 39,
	    down: 40
    };
	
	var on$1 = {
		bind: function bind() {
		},
		update: function update(handler) {
		},
		reset: function reset() {
		},
		unbind: function unbind() {
		}
	}
	
	var style = {
		update: function update(value) {
		}
	}
	
	var bind$1 = {
		priority: BIND,
		bind: function bind() {	
		},
		update: function update(value) {
		}
		//...
	}
	
	var el = {
		priority: EL,
		bind: function bind() {
		},
		unbind: function unbind() {
		}
	}
	
	var directives = {
		text: text$1,
	    html: html,
	    'for': vFor,
	    'if': vIf,
	    show: show,
	    model: model,
	    on: on$1,
	    bind: bind$1,
	    el: el,
	    ref: ref,
	    cloak: cloak
    };
	
	var vClass = {
		update: function update(value) {
		},
		setClass: function setClass(value) {
		},
		cleanup: function cleanup(value) {
		}
	};
	
	var component = {
		bind: function bind() {
		},
		update: function update(value) {
		},
		setComponent: function setComponent(value, cb) {
		},
		resolveComponent: function resolveComponent(value, cb) {
		},
		mountComponent: function mountComponent(cb) {
		},
		build: function build(extraOptions) {
		},
		unbuild: function unbuild(defer) {
		},
		remove: function remove(child, cb) {
		},
		transition: function transition(target, cb) {
		},
		unbind: function unbind() {
		}
	};
	
	var propDef = {
		bind: function bind() {
		},
		unbind: function unbind() {
		}
	}
	
	// Transition class
	function Transition(el, id, hooks, vm) {
	}
	
	var p$1 = Transition.prototype;
	//...
	p$1.enterDone = function () {
	};
	p$1.leave = function (op, cb) {
	};
	p$1.leaveNextTick = function () {
	};
	p$1.leaveDone = function () {
	};
	p$1.cancelPending = function () {
	};
	p$1.callHook = function (type) {
	};
	p$1.callHookWithCb = function (type) {
	};
	p$1.getCssTransitionType = function (className) {
	};
	p$1.setupCssCb = function (event, cb) {
	};
	
	var transition$1 = {
		update: function update(id, oldId) {
				
		}
	}
	
	var compiler = Object.freeze({
		compile: compile,
	  	compileAndLinkProps: compileAndLinkProps,
	  	compileRoot: compileRoot,
	  	transclude: transclude,
	  	resolveSlots: resolveSlots
	});
	
	
	function stateMixin (Vue) {
		Vue.prototype._initState = function () {
		};
		Vue.prototype._initProps = function () {
		};
		Vue.prototype._initData = function () {
		};
		Vue.prototype._setData = function (newData) {
		};
		Vue.prototype._proxy = function (key) {
		};
		Vue.prototype._unproxy = function (key) {
		};
		Vue.prototype._digest = function () {
		};
		Vue.prototype._initComputed = function () {
		};
		Vue.prototype._initMethods = function () {
		};
		Vue.prototype._initMeta = function () {
		}
	}
	
	function eventsMixin (Vue) {
		Vue.prototype._initEvents = function () {
		};
		Vue.prototype._initDOMHooks = function () {
		};
		Vue.prototype._callHook = function (hook) {
		}
	}
	
	// Directive class	
	function Directive(descriptor, vm, el, host, scope, frag) {
	}
	
	Directive.prototype._bind = function () {
	};
	Directive.prototype._setupParams = function () {
	};
	Directive.prototype._setupParamWatcher = function (key, expression) {
	};
	Directive.prototype._checkStatement = function () {
	};
	Directive.prototype.set = function (value) {
	};
	Directive.prototype._withLock = function (fn) {
	};
	Directive.prototype.on = function (event, handler, useCapture) {
	};
	Directive.prototype._teardown = function () {
	};
	
	function lifecycleMixin (Vue) {
		Vue.prototype._updateRef = function (remove) {
		};
		Vue.prototype._compile = function (el) {
		};
		Vue.prototype._initElement = function (el) {
		};
		Vue.prototype._bindDir = function (descriptor, node, host, scope, frag) {
		};
		Vue.prototype._destroy = function (remove, deferCleanup) {
		};
		Vue.prototype._cleanup = function () {
		}
	}
	
	function miscMixin (Vue) {
		Vue.prototype._applyFilters = function (value, oldValue, filters, write) {
		};
		Vue.prototype._resolveComponent = function (value, cb) {
		}
	}
	
	function dataAPI (Vue) {
		Vue.prototype.$get = function (exp, asStatement) {
		};
		Vue.prototype.$set = function (exp, val) {
		};
		Vue.prototype.$delete = function (key) {
		};
		Vue.prototype.$watch = function (expOrFn, cb, options) {
		};
		Vue.prototype.$eval = function (text, asStatement) {
		};
		Vue.prototype.$interpolate = function (text) {
		};
		Vue.prototype.$log = function (path) {
		}
	}
	
	function domAPI (Vue) {
		Vue.prototype.$nextTick = function (fn) {
		};
		Vue.prototype.$appendTo = function (target, cb, withTransition) {
		};
		Vue.prototype.$prependTo = function (target, cb, withTransition) {
		};
		Vue.prototype.$before = function (target, cb, withTransition) {
		};
		Vue.prototype.$after = function (target, cb, withTransition) {
		};
		Vue.prototype.$remove = function (cb, withTransition) {
		};
	}
	  
	function eventsAPI (Vue) {
		  Vue.prototype.$on = function (event, fn) {
		  };
		  Vue.prototype.$once = function (event, fn) {
		  };
		  Vue.prototype.$off = function (event, fn) {
		  };
		  Vue.prototype.$emit = function (event) {
		  };
		  Vue.prototype.$broadcast = function (event) {
		  };
		  Vue.prototype.$dispatch = function (event) {
		  }
	  }
	  
	  function lifecycleAPI (Vue) {
		  Vue.prototype.$mount = function (el) {
		  };
		  Vue.prototype.$compile = function (el, host, scope, frag) {
		  }
	  }
	  
	  // Vue class	
	  function Vue(options) {
	    this._init(options);
	  }

	  // install internals
	  initMixin(Vue);
	  stateMixin(Vue);
	  eventsMixin(Vue);
	  lifecycleMixin(Vue);
	  miscMixin(Vue);

	  // install instance APIs
	  dataAPI(Vue);
	  domAPI(Vue);
	  eventsAPI(Vue);
	  lifecycleAPI(Vue);
	  
	  var slot = {
		  bind: function bind() {
		  },
		  compile: function compile(content, context, host) {
		  },
		  unbind: function unbind() {
		  }
	  };
	  
	  var partial = {
		  bind: function bind() {  
		  },
		  insert: function insert(id) {
		  },
		  unbind: function unbind() {
		  }
	  };
	  
	  var filters = {
		  json: {
		  },
		  lowercase: function lowercase(value) {
		  },
		  currency: function currency(value, _currency, decimals) {
		  }
	  };
	  
	  function installGlobalAPI (Vue) {
		  Vue.options = {
				  
		  };
		  //...
		  Vue.compiler = compiler;
		  Vue.extend = function (extendOptions) {
		  };
		  Vue.use = function (plugin) {
		  };
		  Vue.mixin = function (mixin) {
		  };
		  
		  extend(Vue.transition, transition);
	  }
	  installGlobalAPI(Vue);
		
	  return Vue;

}));






Logo

前往低代码交流专区

更多推荐