vue-append, like v-html directive, but it can call javascript function.
vue-append, like v-html directive, but it can call javascript function
npm install vue-append --save
# or
yarn add vue-append
vue-append
. import VueAppend from 'vue-append'
Vue.use(VueAppend)
var VueAppend = require('vue-append')
Vue.use(VueAppend)
<script>
tag. It will automatically install itself, and will add a global VueAppend
.appended
event.appenderr
event.v-append
directivetemplate:
<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
.