vue-append
vue-append, like v-html directive, but it can call javascript function
Install
npm install vue-append --save
# or
yarn add vue-append
Es6 module
- Available through npm as
vue-append.
import VueAppend from 'vue-append'
Vue.use(VueAppend)CommonJS
var VueAppend = require('vue-append')
Vue.use(VueAppend)Direct include
- You can also directly include it with a
<script>tag. It will automatically install itself, and will add a globalVueAppend.
Event
appended
- if html append , script downloaded and no throw error, it will fire
appendedevent.
appenderr
- if throw error when html appended, it will fire
appenderrevent.
Usage
Using the v-append directive
template:
<div id="app">
<div v-append="html" @appended="appended"></div>
</div><div id="app">
<div v-append.sync="html" @appended="appended"></div>
</div>js:
import Vue from 'vue/dist/vue.esm'
import VueAppend from 'vue-append'
// use the plugin
Vue.use(VueAppend);
const html = `
<div id="test">1</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
var i = 1;
setInterval(function() {
document.getElementById("test").innerHTML = ++i;
}, 1000);
</script>
`;
new Vue({
el: '#app',
data: {
html: html
},
methods: {
appended() {
console.log('appended!');
// could use jQuery 😊
alert(window.jQuery);
}
}
});See /example for a timer demo. To build it, run npm install && npm run build.