@momsfriendlydevco/vue-template
Compile a simple HTML string via Vue style templates
Last updated 3 months ago by hash-bang .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @momsfriendlydevco/vue-template 
SYNC missed versions from official npm registry.

@MomsFriendlyDevCo/Vue-Template

Compile a simple HTML string via Vue style templates.

This package exports a single function to compile a Vue-style template and return a render function which can then be provided with data.

var vueTemplate = require('@momsfriendlydevco/vue-template');

var template = vueTemplate('<div>Hello {{name}}</div>');

template({name: 'Joe'}); //= "<div>Hello Joe</div>"
template({name: 'Jane'}); //= "<div>Hello Jane</div>"

All built in Vue directives are supported:

var vueTemplate = require('@momsfriendlydevco/vue-template');

var template = vueTemplate(`
	<body>
		<p>Hello {{user.name.first}} {{user.name.last}}</p>
		<p>
			Your favourite color
			<span v-if="user.color.toLowerCase() == 'blue'">is blue</span>
			<span v-else>is<strong>NOT</strong>blue</span>
		</p>
		<p>
			Your pets are:
			<ol v-if="user.pets && user.pets.length">
				<li v-for="pet in user.pets">
					{{pet.name}} ({{pet.type}})
				</li>
			</ol>
			<span v-else>You have no pets (aw!)</span>
		</p>
	</body>
`);

template({
	user: {
		name: {first: 'Joe', middle: 'H', last: 'Random'},
		color: 'Red',
		pets: [
			{name: 'Pepper', type: 'Cat'},
			{name: 'Meg', type: 'Dog'},
		],
	},
}) // Compiled version of the above template

Support table

The below is a non-exhaustive list of templating functions that are supported. If you find a Vue feature that isn't listed below please file an issue or add a test for it.

Feature Supported Notes
v-if :white_check_mark:
v-on :no_entry_sign: events
v-for :white_check_mark:
v-pre ?
v-bind ?
v-else :white_check_mark:
v-else-if :white_check_mark:
v-html ?
v-once :no_entry_sign: events
v-show ?
v-slot :no_entry_sign: components
v-text ?
v-cloak ?
v-model ?
:class :white_check_mark: classes
:style ?

Notes:

  • classes - All styles of class binding are supported (e.g. static, lookup, array lookup, objects, mixed)
  • components - At this point this module does not support custom components
  • events - Events are entirely unsupported as this is a "one-pass" templator that returns HTML and does not react to async states

API

vueTemplate(html, options)

Compile raw HTML into a Vue render function and return a template wrapper function. See template(data) for documentation on how to use the templator return.

Options:

Option Type Default Description
selfClosingTags Set See code A Set object initialized with all tags which support the HTML self closing spec

template(data)

Takes an object of context data to use when rendering, renders the template and returns the HTML output.

Current Tags

  • 0.0.3                                ...           latest (3 months ago)

4 Versions

  • 0.0.3                                ...           3 months ago
  • 0.0.2                                ...           4 months ago
  • 0.0.1                                ...           4 months ago
  • 0.0.0                                ...           4 months ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |