https://github.com/Haixing-Hu/vue-titlecase

A Vue.js filter used to make a string titlecased.
https://github.com/Haixing-Hu/vue-titlecase

Last synced: 3 months ago
JSON representation

A Vue.js filter used to make a string titlecased.

• Host: GitHub
• URL: https://github.com/Haixing-Hu/vue-titlecase
• Owner: Haixing-Hu
• License: mit
• Created: 2015-10-04T11:48:12.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-11-01T15:13:58.000Z (about 8 years ago)
• Last Synced: 2024-10-18T20:58:42.384Z (3 months ago)
• Language: JavaScript
• Size: 21.5 KB
• Stars: 12
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - vue-titlecase ★9 - Hu (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
• awesome-github-vue - vue-titlecase - 用于字符串titlecased的VueJS过滤器 (实用库)
• awesome - vue-titlecase - 用于字符串titlecased的VueJS过滤器 (实用库)
• awesome-vue - vue-titlecase - Hu/vue-titlecase?style=social) - 用于字符串titlecased的VueJS过滤器 (实用库)
• awesome-github-vue - vue-titlecase - 用于字符串titlecased的VueJS过滤器 (实用库)

README

        
# vue-titlecase

[![Build Status](https://circleci.com/gh/Haixing-Hu/vue-titlecase/tree/master.svg?style=shield)](https://circleci.com/gh/Haixing-Hu/vue-titlecase/tree/master)

[![Coverage Status](https://coveralls.io/repos/Haixing-Hu/vue-titlecase/badge.svg?branch=master&service=github)](https://coveralls.io/github/Haixing-Hu/vue-titlecase?branch=master)

[![bitHound Score](https://www.bithound.io/github/Haixing-Hu/vue-titlecase/badges/score.svg)](https://www.bithound.io/github/Haixing-Hu/vue-titlecase)

[![Dependency Status](https://david-dm.org/Haixing-Hu/vue-titlecase.svg)](https://david-dm.org/Haixing-Hu/vue-titlecase)

[![devDependency Status](https://david-dm.org/Haixing-Hu/vue-titlecase/dev-status.svg)](https://david-dm.org/Haixing-Hu/vue-titlecase#info=devDependencies)

A Vue.js plugin provides a filter and a function to titlecase a string.

# Requirements

- [Vue.js](https://github.com/yyx990803/vue) `^1.0.24`

# Algorithm

The algorithm is based on the gamma rule described as follows:

[Glossary of Grammatical and Rhetorical Terms: title case (capitalization)](http://grammar.about.com/od/tz/g/Title-Case.htm)

# Instllation

## npm

```shell

$ npm install vue-titlecase

```

## bower

```shell

$ bower install vue-titlecase

```

# Usage

```javascript

var Vue = require('vue')

var Titlecase = require('vue-titlecase')

// set plugin

Vue.use(Titlecase)

// create instance

new Vue({

  el: '#test-titlecase',

  data: {

    msg: "hello world! my id is starfish. I LOVE WATCHing tv.",

  }

})

```

Template the following:

```html



  
{{ msg | titlecase }}

  
{{ msg.toTitleCase() }}



```


Output the following:

```html



  
Hello World! My ID is Starfish. I Love Watching TV.

  
Hello World! My ID is Starfish. I Love Watching TV.



```


# API

## `String.prototype.toTitleCase()`

Converts a string instance to the titlecase form. Returns a new string.

## `titlecase`

This is a customized Vue filter used to converts the string representation of

an object to the titlecase form.

# 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 of `Haixing-Hu/vue-titlecase` repository !

# Building and Testing

First you should install all depended NPM packages. The NPM packages are used

for building and testing this package.

```shell

$ npm install

```

Then install all depended bower packages. The bower packages are depended by

this packages.

```shell

$ bower install

```

Now you can build the project.

```shell

$ gulp build

```

The following command will test the project.

```shell

$ gulp test

```

The following command will perform the test and generate a coverage report.

```shell

$ gulp test:coverage

```

The following command will perform the test, generate a coverage report, and

upload the coverage report to [coveralls.io](https://coveralls.io/).

```shell

$ gulp test:coveralls

```

You can also run `bower install` and `gulp build` together with the following

command:

```shell

npm run build

```

Or run `bower install` and `gulp test:coveralls` together with the following

command:

```shell

npm run test

```

# License

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