The Vue philosophy
Vue
Front-end JavaScript framework
The Vue philosophy
- Onboarding should be easy
- Complexity should be opt-in
- Separation of concerns, not languages
Onboarding should be easy
🙂
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<div id="app">
<p>{{text}}</p>
</div>
<script>
new Vue({
el: '#app',
data: () => ({
text: 'Hello, world!'
})
})
</script>Simple on-boarding
Plain HTML file
Comprehensive documentation
Â
the documentation is the only tutorial you'll ever need
International core team
China, USA, Japan, UK, Vietnam, France, Russia, Poland, Germany, India
Support for different module formats
Complexity should be opt-in
(not opt-out)
declarative
rendering
component
system
client-side
routingÂ
state
management
build
system
source: http://bit.ly/2nMKlcy
Benefits
- Grows with your project
- Less decisions to make
- Deep integration between libraries
Separation of concerns, not languages
(collocation)
JS
HTML
CSS
<template>
<div>
Counter: {{counter}}
<button onClick="counter++">+</button>
</div>
</template>
<script>
export default {
data: () => ({
counter: 0
})
}
</script>
<style scoped>
div {
color: steelblue;
}
</style>Single file component
<template>
<div>
Hello, World!
</div>
</template>
<test>
import Counter from './MyComponent.js'
import { mount } from 'vue-test-utils'
test('renders div', {
const wrapper = mount(Counter)
expect(wrapper.is('div')).toBe(true)
})
</test>
<docs>
## My Component
Renders Hello, World!
</docs>Custom blocks