html頁面引入vue組件之http-vue-loader.js解讀
更新時間：2023年04月22日 14:02:44 作者：Akimoto Hiroshi
這篇文章主要介紹了html頁面引入vue組件之http-vue-loader.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
html頁面引入vue組件之http-vue-loader.js
首先這種方法不推薦，日常工作中也不會在html里面引入一個vue文件，只是為了有時候方便測試才會這么做
1.創(chuàng)建my-component.vue
<template>
? ? <div class="hello">Hello {{who}}</div>
</template>
?
<script>
module.exports = {
? ? data: function() {
? ? ? ? return {
? ? ? ? ? ? who: 'world'
? ? ? ? }
? ? }
}
</script>
?
<style>
.hello {
? ? background-color: #ffe;
}
</style>2.創(chuàng)建index.html
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <!-- 引入樣式 -->
? ? <link rel="stylesheet" rel="external nofollow" >
? ? <!-- 先引入 Vue -->
? ? <script src="https://unpkg.com/vue/dist/vue.js"></script>
? ? <!-- 引入 http-vue-loader -->
? ? <script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
? ? <div id="app">
? ? ? ? <my-component></my-component>
? ? </div>
</body>
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
? ? // 使用httpVueLoader
? ? Vue.use(httpVueLoader);
? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? data: function () {
? ? ? ? ? ? return { visible: false }
? ? ? ? },
? ? ? ? components: {
? ? ? ? ? ? // 將組建加入組建庫
? ? ? ? ? ? 'my-component': 'url:./component/my-component.vue'
? ? ? ? }
? ? })
</script>
</html>這樣就可以直接在html頁面里面引用vue文件，而不需要從頭開始創(chuàng)建一個新的vue項目，方便日常測試使用
httpVueLoader的其他組件載入方式可查看這里
單頁面vue項目注冊使用組件(使用httpVueloader)
主要是最近寫的項目涉及到,就順便記錄一下,
使用的概率不是很大啊畢竟現(xiàn)在大部分都是直接搭的項目組件正常方式使用組件即可
安裝并引入插件插件
既然是單頁面使用,最簡單快捷的就是直接script引用了,這里我就直接把文件放出來自取好了,今天百度網盤有點卡分享不出來,文件又比較長,就放文章最末尾吧
<script src="./lib/httpVueLoader.js" type="text/javascript" charset="utf-8"></script>
準備組件
隨便畫個組件反正也就測試用用
<template>
<div class="test">
<p>{{name}}</p>
<p>{{state}}</p>
</div>
</template>
<script>
module.exports = {
name:'test',
data(){
return{
name:222
}
},
props:{
state:{
type:String
}
}
}
</script>
<style>
</style>引用
引用方法有好幾種 這里我就拿我用的來舉例吧,直接上父組件代碼,首先是html頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<title></title>
<link rel="stylesheet" type="text/css" href="PCdemo/src/js&css/mainPage.css" rel="external nofollow" />
</head>
<body>
<!-- 容器 -->
<div id="mainpage">
<p>這是父組件頁面</p>
<!--組件測試 -->
<test></test>
</div>
<!-- vue2.6.11 -->
<script src="./lib/vue.js"></script>
<!-- 組件測試 -->
<script src="./lib/httpVueLoader.js" type="text/javascript" charset="utf-8"></script>
<!-- 自定義js -->
<script src="PCdemo/src/js&css/mainPage.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>然后是js頁面,當然全寫一個html也行啊看個人喜好,這里因為項目需求兼容ie,所以寫的比較原始
var appVue = new Vue({
el: "#mainpage",
components:{
'test': httpVueLoader('../PCdemo/src/components/test.vue')
},
data: function() {
return {
state:'1111'
}
}
})那么效果就完成了
插件的其他注冊使用組件方法
組件官網 還提供了其他注冊引入方法,講的比較細致啊這里就不贅述了 有興趣可以自己去看看
插件js文件
(function umd(root,factory){
if(typeof module==='object' && typeof exports === 'object' )
module.exports=factory()
else if(typeof define==='function' && define.amd)
define([],factory)
else
root.httpVueLoader=factory()
})(this,function factory() {
'use strict';
var scopeIndex = 0;
StyleContext.prototype = {
withBase: function(callback) {
var tmpBaseElt;
if ( this.component.baseURI ) {
// firefox and chrome need the <base> to be set while inserting or modifying <style> in a document.
tmpBaseElt = document.createElement('base');
tmpBaseElt.href = this.component.baseURI;
var headElt = this.component.getHead();
headElt.insertBefore(tmpBaseElt, headElt.firstChild);
}
callback.call(this);
if ( tmpBaseElt )
this.component.getHead().removeChild(tmpBaseElt);
},
scopeStyles: function(styleElt, scopeName) {
function process() {
var sheet = styleElt.sheet;
var rules = sheet.cssRules;
for ( var i = 0; i < rules.length; ++i ) {
var rule = rules[i];
if ( rule.type !== 1 )
continue;
var scopedSelectors = [];
rule.selectorText.split(/\s*,\s*/).forEach(function(sel) {
scopedSelectors.push(scopeName+' '+sel);
var segments = sel.match(/([^ :]+)(.+)?/);
scopedSelectors.push(segments[1] + scopeName + (segments[2]||''));
});
var scopedRule = scopedSelectors.join(',') + rule.cssText.substr(rule.selectorText.length);
sheet.deleteRule(i);
sheet.insertRule(scopedRule, i);
}
}
try {
// firefox may fail sheet.cssRules with InvalidAccessError
process();
} catch (ex) {
if ( ex instanceof DOMException && ex.code === DOMException.INVALID_ACCESS_ERR ) {
styleElt.sheet.disabled = true;
styleElt.addEventListener('load', function onStyleLoaded() {
styleElt.removeEventListener('load', onStyleLoaded);
// firefox need this timeout otherwise we have to use document.importNode(style, true)
setTimeout(function() {
process();
styleElt.sheet.disabled = false;
});
});
return;
}
throw ex;
}
},
compile: function() {
var hasTemplate = this.template !== null;
var scoped = this.elt.hasAttribute('scoped');
if ( scoped ) {
// no template, no scopable style needed
if ( !hasTemplate )
return;
// firefox does not tolerate this attribute
this.elt.removeAttribute('scoped');
}
this.withBase(function() {
this.component.getHead().appendChild(this.elt);
});
if ( scoped )
this.scopeStyles(this.elt, '['+this.component.getScopeId()+']');
return Promise.resolve();
},
getContent: function() {
return this.elt.textContent;
},
setContent: function(content) {
this.withBase(function() {
this.elt.textContent = content;
});
}
};
function StyleContext(component, elt) {
this.component = component;
this.elt = elt;
}
ScriptContext.prototype = {
getContent: function() {
return this.elt.textContent;
},
setContent: function(content) {
this.elt.textContent = content;
},
compile: function(module) {
var childModuleRequire = function(childURL) {
return httpVueLoader.require(resolveURL(this.component.baseURI, childURL));
}.bind(this);
var childLoader = function(childURL, childName) {
return httpVueLoader(resolveURL(this.component.baseURI, childURL), childName);
}.bind(this);
try {
Function('exports', 'require', 'httpVueLoader', 'module', this.getContent()).call(this.module.exports, this.module.exports, childModuleRequire, childLoader, this.module);
} catch(ex) {
if ( !('lineNumber' in ex) ) {
return Promise.reject(ex);
}
var vueFileData = responseText.replace(/\r?\n/g, '\n');
var lineNumber = vueFileData.substr(0, vueFileData.indexOf(script)).split('\n').length + ex.lineNumber - 1;
throw new (ex.constructor)(ex.message, url, lineNumber);
}
return Promise.resolve(this.module.exports)
.then(httpVueLoader.scriptExportsHandler.bind(this))
.then(function(exports) {
this.module.exports = exports;
}.bind(this));
}
};
function ScriptContext(component, elt) {
this.component = component;
this.elt = elt;
this.module = { exports:{} };
}
TemplateContext.prototype = {
getContent: function() {
return this.elt.innerHTML;
},
setContent: function(content) {
this.elt.innerHTML = content;
},
getRootElt: function() {
var tplElt = this.elt.content || this.elt;
if ( 'firstElementChild' in tplElt )
return tplElt.firstElementChild;
for ( tplElt = tplElt.firstChild; tplElt !== null; tplElt = tplElt.nextSibling )
if ( tplElt.nodeType === Node.ELEMENT_NODE )
return tplElt;
return null;
},
compile: function() {
return Promise.resolve();
}
};
function TemplateContext(component, elt) {
this.component = component;
this.elt = elt;
}
Component.prototype = {
getHead: function() {
return document.head || document.getElementsByTagName('head')[0];
},
getScopeId: function() {
if ( this._scopeId === '' ) {
this._scopeId = 'data-s-' + (scopeIndex++).toString(36);
this.template.getRootElt().setAttribute(this._scopeId, '');
}
return this._scopeId;
},
load: function(componentURL) {
return httpVueLoader.httpRequest(componentURL)
.then(function(responseText) {
this.baseURI = componentURL.substr(0, componentURL.lastIndexOf('/')+1);
var doc = document.implementation.createHTMLDocument('');
// IE requires the <base> to come with <style>
doc.body.innerHTML = (this.baseURI ? '<base href="'+this.baseURI+'" rel="external nofollow" >' : '') + responseText;
for ( var it = doc.body.firstChild; it; it = it.nextSibling ) {
switch ( it.nodeName ) {
case 'TEMPLATE':
this.template = new TemplateContext(this, it);
break;
case 'SCRIPT':
this.script = new ScriptContext(this, it);
break;
case 'STYLE':
this.styles.push(new StyleContext(this, it));
break;
}
}
return this;
}.bind(this));
},
_normalizeSection: function(eltCx) {
var p;
if ( eltCx === null || !eltCx.elt.hasAttribute('src') ) {
p = Promise.resolve(null);
} else {
p = httpVueLoader.httpRequest(eltCx.elt.getAttribute('src'))
.then(function(content) {
eltCx.elt.removeAttribute('src');
return content;
});
}
return p
.then(function(content) {
if ( eltCx !== null && eltCx.elt.hasAttribute('lang') ) {
var lang = eltCx.elt.getAttribute('lang');
eltCx.elt.removeAttribute('lang');
return httpVueLoader.langProcessor[lang.toLowerCase()].call(this, content === null ? eltCx.getContent() : content);
}
return content;
}.bind(this))
.then(function(content) {
if ( content !== null )
eltCx.setContent(content);
});
},
normalize: function() {
return Promise.all(Array.prototype.concat(
this._normalizeSection(this.template),
this._normalizeSection(this.script),
this.styles.map(this._normalizeSection)
))
.then(function() {
return this;
}.bind(this));
},
compile: function() {
return Promise.all(Array.prototype.concat(
this.template && this.template.compile(),
this.script && this.script.compile(),
this.styles.map(function(style) { return style.compile(); })
))
.then(function() {
return this;
}.bind(this));
}
};
function Component(name) {
this.name = name;
this.template = null;
this.script = null;
this.styles = [];
this._scopeId = '';
}
function identity(value) {
return value;
}
function parseComponentURL(url) {
var comp = url.match(/(.*?)([^/]+?)\/?(\.vue)?(\?.*|#.*|$)/);
return {
name: comp[2],
url: comp[1] + comp[2] + (comp[3] === undefined ? '/index.vue' : comp[3]) + comp[4]
};
}
function resolveURL(baseURL, url) {
if (url.substr(0, 2) === './' || url.substr(0, 3) === '../') {
return baseURL + url;
}
return url;
}
httpVueLoader.load = function(url, name) {
return function() {
return new Component(name).load(url)
.then(function(component) {
return component.normalize();
})
.then(function(component) {
return component.compile();
})
.then(function(component) {
var exports = component.script !== null ? component.script.module.exports : {};
if ( component.template !== null )
exports.template = component.template.getContent();
if ( exports.name === undefined )
if ( component.name !== undefined )
exports.name = component.name;
exports._baseURI = component.baseURI;
return exports;
});
};
};
httpVueLoader.register = function(Vue, url) {
var comp = parseComponentURL(url);
Vue.component(comp.name, httpVueLoader.load(comp.url));
};
httpVueLoader.install = function(Vue) {
Vue.mixin({
beforeCreate: function () {
var components = this.$options.components;
for ( var componentName in components ) {
if ( typeof(components[componentName]) === 'string' && components[componentName].substr(0, 4) === 'url:' ) {
var comp = parseComponentURL(components[componentName].substr(4));
var componentURL = ('_baseURI' in this.$options) ? resolveURL(this.$options._baseURI, comp.url) : comp.url;
if ( isNaN(componentName) )
components[componentName] = httpVueLoader.load(componentURL, componentName);
else
components[componentName] = Vue.component(comp.name, httpVueLoader.load(componentURL, comp.name));
}
}
}
});
};
httpVueLoader.require = function(moduleName) {
return window[moduleName];
};
httpVueLoader.httpRequest = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'text';
xhr.onreadystatechange = function() {
if ( xhr.readyState === 4 ) {
if ( xhr.status >= 200 && xhr.status < 300 )
resolve(xhr.responseText);
else
reject(xhr.status);
}
};
xhr.send(null);
});
};
httpVueLoader.langProcessor = {
html: identity,
js: identity,
css: identity
};
httpVueLoader.scriptExportsHandler = identity;
function httpVueLoader(url, name) {
var comp = parseComponentURL(url);
return httpVueLoader.load(comp.url, name);
}
return httpVueLoader;
});總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
我們知道使用webpack打包vue項目后會生成一個dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運行呢?這篇文章主要給大家介紹了關于vue打包之后的dist文件如何運行的相關資料,需要的朋友可以參考下2023-05-05
vue3使用el-table實現(xiàn)新舊數據對比的代碼詳解
這篇文章主要為大家詳細介紹了在vue3中使用el-table實現(xiàn)新舊數據對比,文中的示例代碼講解詳細,具有一定的參考價值,需要的小伙伴可以參考一下2023-12-12
本篇文章主要介紹了Vuejs 組件——props數據傳遞的實例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
this.$nextTick是在下次dom更新循環(huán)之后執(zhí)行延遲回調,在修改數據之后立即使用這個方法,獲取更新后的dom,下面這篇文章主要給大家介紹了關于Vue中this.$nextTick()的理解與使用的相關資料,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue.js動畫中的js鉤子函數的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
Nuxt.js 是一個基于 Vue.js 的通用應用框架。 通過對客戶端/服務端基礎架構的抽象組織， Nuxt.js 主要關注的是應用的 UI渲染,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue路由跳轉了但界面不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue+iview框架實現(xiàn)左側動態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實現(xiàn)左側動態(tài)菜單功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
在一般業(yè)務中監(jiān)聽的最多的就是 Click 事件，但是在一些業(yè)務比如 Alert 和 Pop 效果時，需要監(jiān)聽在元素外部的點擊來關閉彈窗。2020-11-11