https://github.com/hacke2/vue-append

vue-append, like v-html directive, but it can call javascript function.
https://github.com/hacke2/vue-append

vue vue-directive

Last synced: 22 days ago
JSON representation

vue-append, like v-html directive, but it can call javascript function.

• Host: GitHub
• URL: https://github.com/hacke2/vue-append
• Owner: hacke2
• License: mit
• Created: 2017-05-05T09:01:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-11-08T10:30:24.000Z (about 3 years ago)
• Last Synced: 2024-10-12T04:14:13.941Z (about 1 month ago)
• Topics: vue, vue-directive
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/vue-append
• Size: 161 KB
• Stars: 42
• Watchers: 2
• Forks: 13
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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`.

``` js

  import VueAppend from 'vue-append'

  Vue.use(VueAppend)

```

#### CommonJS

``` js

  var VueAppend = require('vue-append')

  Vue.use(VueAppend)

```

#### Direct include

- You can also directly include it with a `` tag. It will automatically install itself, and will add a global `VueAppend`.

## Event

### appended

- if html append , script downloaded and no throw error, it will fire `appended` event.

### appenderr

- if throw error when html appended, it will fire `appenderr` event.

## Usage

#### Using the `v-append` directive

template:

``` html

<div id="app">

    <div v-append="html" @appended="appended"></div>

</div>

```

``` html

<div id="app">

    <div v-append.sync="html" @appended="appended"></div>

</div>

```

js:

```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">

var i = 1;

setInterval(function() {

    document.getElementById("test").innerHTML = ++i;

}, 1000);

`;

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`.

## License

[MIT](http://opensource.org/licenses/MIT)