npm install
npm start
@cj on Denver Devs
cj@null.computer
git.io/w3cj
w3cj.now.sh
YouTube.com/c/CodingGardenWithCJ
- whoami
- Who are you?
- What is Vue.js?
- A Brief History of Vue.js
- An OverVue of Vue.js
- Vue.js Community
Hello friends! 👋
My name is CJ 👽.
I am a Full Stack Developer 🥞,
Educator 🏫, and
Maker 🛠
based in the Denver 🏔 area.
I have worn many 🎩s in my career including Instructor 👨🏫, Software Engineer 🚂, QA Analyst 🚨, System Administrator 🔥, and Help Desk Consultant ⛑.
YouTube.com/c/CodingGardingWithCJ
Live stream schedule at https://coding.garden
I am a co-organizer of the Den
er ue Meetup
er ue Meetup
We are currently looking for food and drink sponsors.
We're always looking for full talk and lightning talk speakers.
- 2+ years working with Angular 1.x
- 3 Angular 1.x apps in production
- ~1 year working with React/Redux
- 1 React/Redux Application in Production
- ~1.5 years working with Vue.js 2.x
- 4 Vue.js 2.x apps in production
- 10+ toy projects playing around with frontend frameworks
Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!
Simple, minimal core with an incrementally adoptable stack that can handle apps of any scale.
- 20kb min+gzip Runtime
- Blazing Fast Virtual DOM
- Minimal Optimization Efforts
My job at Google involved a lot of prototyping in the browser. We had this idea and we wanted to get something tangible as fast as possible. Some of the projects used Angular at that time. For me, Angular offered something cool which is data binding and a data driven way of dealing with a DOM, so you don’t have to touch the DOM yourself. It also brought in all these extra concepts that forced you to structure the code the way it wanted you to. It just felt too heavy for the use case that I had at that time.
- Evan You, Interview 2017
Between the Wires: An interview with Vue.js creator Evan You
I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?
- Evan You, Interview 2017
Between the Wires: An interview with Vue.js creator Evan You
- February 2014 - Released on github
- April 2015 - Tweet from Taylor Otwell (Creator of Laravel - PHP Framework)
- September 2016 - Vue.js 2.0 released
- June 2017 - The first official VueConf in Poland
- 2017 - Single most starred repo on Github
- February 2018 - VueConf Amsterdam
- March 2018 - VueConf US - New Orleans
- VueJS (v0.6.0 released on 8 Dec 2013)
- Animatrix (v0.9.0 released on 25 feb 2014)
- Blade Runner (v0.10.0 released on 23 Mar 2014)
- Cowboy Bepob (v.0.11.0 released on 7 Nov 2014)
- Dragon Ball (v.0.12.0 released on 12 Jun 2015)
- Evangelion (v.1.0.0 released on 27 Oct 2015)
- Ghost in the Shell (v.2.0.0 released on 30 Sep 2016)
- Hunter X Hunter (v.2.1.0 released on 22 Nov 2016)
- Initial D (v.2.2.0 released on 26 Feb 2017)
- JoJo's Bizarre Adventure (v.2.3.0 released on 27 Apr 2017)
- Kill la Kill (v.2.4.0 released on 13 Jul 2017)
- Level E (v.2.5.0 released on 12 Oct 2017)
- Getting Started
- Vue.js CLI
- Vue.js Directives
- Vue.js Components
- Vue.js Router*
- Vue.js Reactivity*
- Vue.js State Management*
new Vue({
el: '#app',
data: {
message: 'Hello Friends!'
}
})<main id="app">
<h2>{{message}}</h2>
</main>To the Docs!
# install vue-cli v2
$ npm install -g vue-cli
# create a project using the webpack template
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev- simple - The simplest possible Vue setup in a single HTML file
- webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
- browserify-simple - A simple Browserify + vueify setup for quick prototyping.
- webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
- pwa - PWA template for vue-cli based on the webpack template
- browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
vue init username/repo my-project# install vue-cli v3
$ npm install -g @vue/cli
# create a project and choose your plugins
$ vue create my-project- Conditionals
- v-if/v-else
- v-show
- Loops
- v-for
- Handling User Input
- v-on:event
- v-model
- Class and Style
- v-bind:class
- v-bind:style
<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a><!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>Vue.component('talk-item', {
template: '<li>OverVue of Vue.js</li>'
});<ul>
<talk-item></talk-item>
</ul>new Vue({
el: '#app',
data: {
talks: [
'OverVue of Vue.js',
'VueConf Re-Cap'
]
}
})Vue.component('talk-item', {
props: ['talk'],
template: '<li>{{talk}}</li>'
});<main id="app">
<ul>
<talk-item
v-for="talk in talks"
:talk="talk">
</talk-item>
</ul>
</main>
- Imported as an ES2015 module
- Collocation of Template, Logic and Style
- Use what you know: HTML, CSS, JavaScript
- Embedded pre-processor support: seamlessly use Babel, SASS, Less or even Pug in the same file
- Hot-reload out of the box
- Scoped CSS
$ npm install vue-routerimport Vue from 'vue';
import VueRouter from 'vue-router';
import router from './router';
Vue.use(VueRouter);
new Vue({
...
router,
...
});<router-view></router-view>- Officially-supported by Vue.js
- Nested route/view mapping
- Modular, component-based router configuration
- Route params, query, wildcards
- View transition effects powered by Vue.js' transition system
- Fine-grained navigation control
- Links with automatic active CSS classes
- HTML5 history mode or hash mode, with auto-fallback in IE9
- Customizable Scroll Behavior
<router-link :to="{ name: 'user', params: { userId: 123 }}">
User
</router-link>
- Vue cannot detect property addition
// Vue.set(object, key, value)
this.$set(this.someObject, 'b', 2)const sourceOfTruth = {}
const vmA = new Vue({
data: sourceOfTruth
})
const vmB = new Vue({
data: sourceOfTruth
})
- Vuex - Elm-inspired (flux/redux) state management library
- Based on the idea that POJOs can be reactive
- Denver Vue.js Meetup
- Forum: The best place to ask questions and get answers about Vue and its ecosystem.
- Chat: A place for Vue devs to meet and chat in real time.
- The “Show and Tell” Subforum: Another great place to check out what others have built with and for the growing Vue ecosystem.
@cj on Denver Devs
cj@null.computer
git.io/w3cj
w3cj.now.sh
YouTube.com/c/CodingGardenWithCJ