vue代码
<template>
<el-row style="padding: 15px">
<el-button size="mini">默认按钮</el-button>
<el-button type="primary" size="mini">主要按钮</el-button>
<el-button type="success" size="mini">成功按钮</el-button>
<el-button type="info" size="mini">信息按钮</el-button>
<el-button type="warning" size="mini">警告按钮</el-button>
<el-button type="danger" size="mini">危险按钮</el-button>
</el-row>
<el-row style="padding: 15px">
<el-button size="mini" @click="onEvent1">弹出提示信息</el-button>
</el-row>
<el-row style="padding: 15px">
<el-col :span="24"><div>{{data}}</div></el-col>
</el-row>
</template>
<script type="text/javascript">
(() => {
/**
* @description 动态加载JS
* @param {String} url 脚本地址
* @param {Function} callback 回调函数
*/
function dynamicLoadJs( url, callback ) {
let head = document.getElementsByTagName( 'head' )[0];
let script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
if ( typeof (callback) == 'function' ) {
script.onload = script.onreadystatechange = function () {
if ( !this.readyState || this.readyState === 'loaded' || this.readyState === 'complete' ) {
callback();
script.onload = script.onreadystatechange = null;
}
};
}
head.appendChild( script );
}
/**
* @description 动态加载CSS
* @param {String} url 样式地址
*/
function dynamicLoadCss( url ) {
let head = document.getElementsByTagName( 'head' )[0];
let link = document.createElement( 'link' );
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = url;
head.appendChild( link );
}
//动态加载JS
dynamicLoadJs( '//cdn.jsdelivr.net/npm/vue@2.6.14', () => {
//动态加载CSS
dynamicLoadCss( '//unpkg.com/element-ui/lib/theme-chalk/index.css' )
//动态加载JS
dynamicLoadJs( '//unpkg.com/element-ui/lib/index.js', () => {
let obj = {
el : '#post_content',
data: () => {
return {
data: 'wordpress 内嵌 vue+element-ui'
}
},
created() {
console.log( '创建成功' )
},
mounted() {
console.log( '挂载成功' )
},
methods: {
onEvent1() {
this.$message( '这是一条消息提示' );
}
}
}
//挂载当前页面元素
new Vue( obj );
} )
} )
})()
</script>