vue.js 例子 & 源代码片段
{{ todo.text }}Xvar vm = new Vue({el: '#app',data: {newTodo: '',todos: [{ text: 'Add some todos' }]},methods: {addTodo: function () {var
·
<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;
}));
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)