Vue.js part1

Vue.js - part 1
Vue.js - inswave systems, 2018 1

Concept overview
Vue (pronounced /vjuː/, like view) is a progressive framework
for building user interfaces. Unlike other monolithic
frameworks, Vue is designed from the ground up to be
incrementally adoptable. The core library is focused on the
view layer only, and is easy to pick up and integrate with
other libraries or existing projects.

MVVM
Backend Client & MVC .
DB , Model View
.

MVVM in Vue

View Instance - ViewModel
Every Vue application starts by creating a new Vue instance with the Vue
function:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
Although not strictly associated with the MVVM pattern, Vue’s design was
partly inspired by it.

View Instance(Option)
el DOM
data
template HTML, CSS
method
created View Instance

View
The actual DOM that is managed by Vue instances.
vm.$el // The View

Model
A slightly modiﬁed plain JavaScript
object.
vm.$data // The Model

Directive
Preﬁxed HTML attributes that tell Vue.js to do something about
a DOM element.
<div v-text="message"></div>

Mustache Bindings
You can also use mustache-style bindings, both in text and in
attributes. They are translated into v-text and v-attr directives
under the hood. For example:
<div id="person-{{id}}">Hello {{name}}!</div>

Filters
Filters are functions used to process the raw values before
updating the View. They are denoted by a “pipe” inside
directives or bindings:
<div>{{message | capitalize}}</div>

Quick example
<div id="demo">
<h1>{{title | uppercase}}</h1>
<ul>
<li v-repeat="todos" v-on="click: done = !done"
class="{{done ? 'done' : ''}}">
{{content}}
</li>
</ul>
</div>
( ...)

Quick example
var demo = new Vue({
el: '#demo',
data: {
title: 'todos',
todos: [
{done: true, content: 'JavaScript'},
{done: false, content: 'Vue.js'}
]
}
})

View Instance View Instance DOM
.

Lifecycle
1. new Vue()
2. => beforeCreate
3. => created
4. el, template => beforeMount
5. $el el => mounted
6.
7. => beforeUpdate
8. => updated
9.
10. => beforeDestroy
11. , => destroyed
12.

Vue.component()
<script>Vue.component('my-global-component', {})</script>
<div id="app">
<my-global-component></my-global-component>
</div>

components
<script>
new Vue({
el: '#app',
components: {
'my-local-component' : { template: '<div>local component</div>'}
}
});
</script>
<div id="app">
<my-local-component></my-local-component>
</div>

• (props )
•
•

• props
• HTML v-bind:
<script>
Vue.component('child-component', {
props: ['propsdata'],
});
</script>
<child-component v-bind:props =" data ">
</child-component>

<div id="app">
<my-local-component v-on:show-log="printText"></my-local-component>
</div>
<script>
new Vue({
el: '#app',
components: {
'my-local-component' : {
template: '<button v-on:click="showLog">showLog</button>',
methods: {showLog: function() {this.$emit('show-log');}}
}
},
methods: {printText: function() {console.log('recevied an event');}}
});
</script>

.
.
//
var eventBus = new Vue();
//
methods: {
method : function() { eventBus.$emit(' ', ); }
}
//
methods: {
created: function() { eventBus.$on(" ", function( ) { ... }); }
}

<div id="app">
<my-local-component></my-local-component>
</div>
<script>
var eventBus = new Vue();
new Vue({
el: '#app',
components: {
'my-local-component' : {
template: '<button v-on:click="showLog">showLog</button>',
methods: {
showLog: function() {eventBus.$emit('sendEvent', 'data');}
}
}
},
created: function() {
eventBus.$on('sendEvent', function(retVal) {
console.log('recevied an event : ' + retVal);
});
}
});
</script>

v-bind Shorthand

<a v-bind:href="url"> ... </a>

<a :href="url"> ... </a>

v-on Shorthand

<a v-on:click="doSomething"> ... </a>

<a @click="doSomething"> ... </a>

• : SPA .
• :
<router-link to="URL " . <a>
to URL
<router-view> . URL

<div id="app">
<h1> </h1>
<p>
<router-link to="/main"> </router-link>
</p>
<router-view></router-view>
</div>
<script>
var Main = { template : '<div>main</div>' };
var routes = [
{ path: '/main', component: Main }
];
var router = new VueRouter({routes});
var app = new Vue({router}).$mount('#app');
</script>

<router-view> . route children
.
<div id="app"><router-view></router-view></div>
<script>
var User = {template: '<div>User<router-view></router-view></div>';};
var UserProfile = { template: '<p>User Profile Component</p>'};
var routes = [{
path: '/user', component: User,
children: [{path: 'profile',component: UserProfile}]
}];
var app = new Vue({router}).$mount('#app');
</script>

name <router-view> . default .
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>
</div>
<script>
var Header = {template: '<div>Header Component</div>'};
var Footer = {template: '<div>Footer Component</div>'};
var Body = {template: '<div>Body Component</div>'};
var routes = [{path: '/',
components: {default:Body, header:Header, footer:Footer}}];

vs

Vue.js part1

More Related Content

What's hot (20)

Similar to Vue.js part1 (20)

More from 욱래 김 (8)

Recently uploaded (20)

Vue.js part1