Awesome
vue-format
A Vue.js plugin provides a function for formatting messages.
Requirements
- Vue.js
^1.0.24
Instllation
npm
$ npm install vue-format
bower
$ bower install vue-format
Usage
var Vue = require('vue')
var format = require('vue-format')
// set plugin
Vue.use(format)
// create instance
new Vue({
el: '#test-format',
data: {
template: "Hello {0}, {1}! {0}, and {{0}}" // list formatting template
},
methods: {
foo: function(arg1, arg2) {
return this.$format(template2, arg1, arg2);
}
}
})
Template the following:
<div id="test-format" class="message">
<p>{{ foo("world", 123) }}</p>
<p>{{ $format(template, "world", 456) }}</p>
<p>{{ template | format "world" 789 }}</p>
</div>
Output the following:
<div id="test-format" class="message">
<p>Hello world, 123! world, and {0}</p>
<p>Hello world, 456! world, and {0}</p>
<p>Hello world, 789! world, and {0}</p>
</div>
Note that the double brackets, e.g., {{0}}
, will escape the brackets.
API
$format(message, arg1, arg2, ...)
This is a Vue instance method used to format the messages with arguments.
message
: the message template, which is a string contains zero or more placeholders, e.g., "{0}", "{1}", ...arg1
,arg2
, ...: zero or more arguments used to replace the corresponding placeholders in the message template.- return: the formatted message.
- If there is no formatting arguments provided, the function simply returns the message without any changes.
- If there is any argument which is
null
orundefined
, or if there is no enough argument provided, the function will treat those arguments as empty strings. - If there is no message nor arguments, the function returns an empty string.
- In order to escape a brackets, use double brackets; e.g.,
{{0}}
will be treated as a string{0}
with escaped brackets.
format
This is a customized Vue filter used to format messages.
- Usage example:
{{ message | format arg1 arg2 }}
- The effect of this filter is the same as the effect of the
$format()
function.
Contributing
- Fork it !
- Create your top branch from
dev
:git branch my-new-topic origin/dev
- Commit your changes:
git commit -am 'Add some topic'
- Push to the branch:
git push origin my-new-topic
- Submit a pull request to
dev
branch ofHaixing-Hu/vue-format
repository !
Building and Testing
First you should install all depended NPM packages. The NPM packages are used for building and testing this package.
$ npm install
Then install all depended bower packages. The bower packages are depended by this packages.
$ bower install
Now you can build the project.
$ gulp build
The following command will test the project.
$ gulp test
The following command will perform the test and generate a coverage report.
$ gulp test:coverage
The following command will perform the test, generate a coverage report, and upload the coverage report to coveralls.io.
$ gulp test:coveralls
You can also run bower install
and gulp build
together with the following
command:
npm run build
Or run bower install
and gulp test:coveralls
together with the following
command:
npm run test