Vue.JS
introduction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4458026/logo_vue.png)
Evan You
Vue : 2016 - present
Meteor : 2014- 2016
Google : 2012 - 2014
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4457822/even_you_vuejs.jpeg)
~ 30 y.o
Google Trends
10.2020 - trends url Vue vs Angula Vs React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/7810883/Screen_Shot_2020-10-10_at_10.30.18.png)
Google Trends
10.2020 - trends url Vue vs Angula Vs React
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/7810879/Screen_Shot_2020-10-10_at_10.18.57.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/5612009/Screen_Shot_2018-12-17_at_8.23.54_AM.png)
Why Vue.js
1. Progressive JavaScript framework
2. Incrementally adoptable (vuejs, router, vuex, vuelidate)
3. Reusable components .vue (css, js, html)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/4458033/vue_supported_browsers.png)
Getting started
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Hello Vue!
Data & Methods
<div id="app-5">
<p>{{ message }}</p>
<button @click="reverseMessage">Reverse Message</button>
</div>
//script
new Vue({
el: '#app-5',
data(){
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
![](https://s3.amazonaws.com/media-p.slid.es/uploads/806992/images/7088695/Screenshot_2020-02-20_at_13.21.33.png)
v-model
<form id="signup-form" method="post" action="#"
@submit.prevent="submit">
<input
type="email"
v-model="email"
/>
<input type="submit" value="Sign Up" />
</form>
new Vue({
el:"#signup-form",
data(){
return {
email: ''
} }
,methods:{
submit:function(){
fetch("https://httpbin.org/post",{
method:"POST",
body:{email:this.email}
})
}
});
Vue instance/component
//Vue.js instance on the html page
new Vue({
//element to mount into html page
el:"",
// JSON object containing page data
data:{},
//page clicks on the page
methods:{},
//autoupdatable properties ( filters )
computed:{},
//watcher on page properties
watch:{},
// page hooks/events
created:function(){},
mounted:function(){},
destroyed:function(){}
})
More Vue.js
Expressions
Directives
List Rendering
Binding
Actions & Events
check cheatsheet for more ->