Vue Ps

You have deadlines, budget
limits, business pressures

You can successfully build
powerful apps with Vue
Vue from 20,000 Feet:
Fundamentals and Best Practices
John Papa
Developer Advocate
@john_papa
Vue from 20,000 Feet:
Fundamentals and Best Practices
John Papa
Developer Advocate
@john_papa
Resources
Vue Docs https://vuejs.org
VS Code https://aka.ms/psv-code
Vue Dev Tools https://jpapa.me/vuedevtools
Vue Extensions https://aka.ms/psv-vueext

Vue Heroes Demo https://jpapa.me/heroes-vue
Vue: Getting Started Course https://jpapa.me/vuegs
Free Azure Trial https://aka.ms/psv-free
@john_papa
Real Developer Stories Every Week
http://realtalkjs.com
@john_papa
Vue
@john_papa
Vue
@john_papa
Vue
@john_papa
Easy
Running in minutes
Learn a ton in a week
Seriously!
@john_papa
index.html
Make Progress Quickly <html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vu
e"></script>
Drop a script tag </head>
<body>
Set a data value <div id="app">
<input type="text" v-model="name" />
<p>Hello {{ name }}</p>
</div>
<script>
new Vue({
el: '#app’,
data() {
return { name: 'John’ };
}
});
</script>
</body>
</html>
@john_papa
What Makes Starting a New App Difficult?
Starting from a blank slate

Organizing the project structure
Following the style guide
Creating an optimized build (or any build)
Customizing according to team
conventions
Configuring unit and end to end testing
Adding plugins
@john_papa
Vue CLI
Built-in Features
Stylus PWA
Linting Nightwatch
Webpack Babel
Jest
Cypress.io
Modern mode
Mocha Sass
Less
TypeScript Web components
@john_papa
The Vue CLI makes it easy to
create an application that
works and follows best
practices,
right out of the box.
@john_papa
Installing Node.js and the Vue CLI
Go to https://nodejs.org
LTS represents
Long Term Support
Download and install the LTS version for your Operating System
Run npm install –g @vue/cli from the terminal

Test Driving the Vue CLI
$ vue create hello-world
$ cd hello-world Generate a new app, follow the prompts,

then serve it
$ npm run serve
@john_papa
Vue CLI’s Main Commands
$ vue create Create a new Vue app
$ vue --help Display help commands
$ npm run lint Lint the app
$ npm run build Build the app
$ npm run serve Serve the app
@john_papa
Vue CLI UI
A Visual Way to:

Create
Configure
Add plugins
Build
Serve
@john_papa
@john_papa
heroes.vue
<template> Displaying Text

<div>Hello {{ name }}</div> Display models with {{ model }}
</template> Can also use v-text="model"
<script>
Also known as interpolation
export default {
data() {
The data() function identifies the
return { data models
name: "John"
};
};
</script>
header-bar-links.vue
<a v-bind:href="github" target="_blank">

Full v-bind syntax
<i class="fab fa-github fa-2x"></i>
</a> Shortcut syntax

<a :href="twitter" target="_blank">
<i class="fab fa-twitter fa-2x"></i>
</a>
Property Binding
Bind to an HTML property
Two-way Binding
The hero.firstName is shown in the input
The user types and the value of hero.firstName changes
heroes.vue
<div class="field">
<label class="label" for="firstName">first name</label>
<input class="input" id="firstName" v-model="hero.firstName" />
</div>
Two-way binding
Vue has several shortcuts
for template syntax
@john_papa
heroes.vue
<ul> Unique identifier
<li v-for="hero in heroes" :key="hero.id">

Iterate
{{ hero.name }}
</li>
</ul>
Render a List
Iterate over a list of items in a model with v-for="item in item-list"
Repeats the HTML content for each item in the list
Bind to a unique :key, for faster rendering
Indexing Loops
Reference an iterator and the index
@john_papa
Conditionals
Display content based on an expression
Content is added or removed from the DOM
Set the v-if directive to an expression that evaluates to truthy or falsey
heroes.vue
Add the content to the DOM if
there is a selectedHero
<div v-if="selectedHero">
You selected {{selectedHero.firstName}}
</div>
heroes.vue
Event Bindings <template>
<div>
Execute when an event occurs
<input v-model="name" type="text">
v-on:event=”method-name" <button @click="ok">OK</button>
</div>
</template>
@ is the shortcut syntax
for v-on <script>
export default {
data() { return { name: "John" }; },
methods: {
ok() { /* do something */ }
};
</script>
heroes.vue
<select id="power” v-model="hero.power” :class="{ invalid: !hero.power }">
<option disabled value>Select one</option>
<option>Speed</option>
<option>Invisibility</option> Bind the class name

to a model
</select>
Class Bindings
Class binding syntax :class="{classname: expression}"
Object literal
Class on the left
Expression on the right
Template Syntax
v-on:click Click handler
@click Shortcut for click handler
v-bind Bind to an attribute
v-model 2 way data binding
v-if Conditional element
v-for Loop
@john_papa
@john_papa
Life Cycle Hooks
beforeCreate created
beforeMount mounted
beforeUpdate updated
beforeDestroy destroyed
https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks
@john_papa
Computed Properties
Watchers
@john_papa
Computed Properties
Fire when any dependency value changes
Cached based on its reactive dependencies
Only re-evaluates when any of its reactive dependencies have
changed
heroes.vue
When either dependency
changes, the computed
computed: { evaluates
fullName() {
return `${this.hero.firstName} ${this.hero.lastName}`;
},
},
heroes.vue
Watchers
React when this model changes
watch: { React to data changes
hero(newValue, oldValue) { Named same as reactive value
console.log(`old=${oldValue}, new=${newValue}`); Accepts new and old values

// execute logic Ideal for asynchronous operations
},
},
When both work,
computed are often a
better choice
@john_papa
Component Organization
Heroes
HeroesList HeroesSearch HeroDetail
HeroListItem CustomButton
heroes.vue
We pass values from parent to a
child, using bindings and props
<HeroDetail export default { hero-detail.vue
v-if="selectedHero" props: {
:hero="selectedHero" hero: {
/> type: Object,
default: () => {},
},
},
}
Component Communication - In
Props
Pass values in
@john_papa
Component Communication - Out
Emit values out
@john_papa
Rich Ecosystem
Axios for http https://github.com/axios/axios
Vue router https://router.vuejs.org/en/
Vue CLI https://vuejs.org/v2/guide/installation.html#CLI
Vuex https://vuex.vuejs.org/en/
UX https://vuetifyjs.com
Debugging https://vuejs.org/v2/cookbook/debugging-in-vscode.html
@john_papa
Resources
Vue Docs https://vuejs.org
VS Code https://aka.ms/psv-code
Vue Dev Tools https://jpapa.me/vuedevtools
Vue Extensions https://aka.ms/psv-vueext

Vue Heroes Demo https://jpapa.me/heroes-vue
Vue: Getting Started Course https://jpapa.me/vuegs
Free Azure Trial https://aka.ms/psv-free
@john_papa
You can successfully build
powerful apps with Vue
John Papa
Developer Advocate
@john_papa

Vue Ps

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Vue Ps

Transféré par

Droits d'auteur :

Formats disponibles

You have deadlines, budget

limits, business pressures

Vue Docs https://vuejs.org

Vue Dev Tools https://jpapa.me/vuedevtools

Vue Extensions https://aka.ms/psv-vueext

Vue: Getting Started Course https://jpapa.me/vuegs

Free Azure Trial https://aka.ms/psv-free

Starting from a blank slate

Run npm install –g @vue/cli from the terminal

$ vue create hello-world

$ cd hello-world Generate a new app, follow the prompts,

$ vue create Create a new Vue app

$ vue --help Display help commands

$ npm run lint Lint the app

$ npm run build Build the app

$ npm run serve Serve the app

A Visual Way to:

<template> Displaying Text

<a v-bind:href="github" target="_blank">

</a> Shortcut syntax

<i class="fab fa-twitter fa-2x"></i>

<label class="label" for="firstName">first name</label>

<input class="input" id="firstName" v-model="hero.firstName" />

<ul> Unique identifier

<li v-for="hero in heroes" :key="hero.id">

Reference an iterator and the index

You selected {{selectedHero.firstName}}

v-on:event=”method-name" <button @click="ok">OK</button>

data() { return { name: "John" }; },

<select id="power” v-model="hero.power” :class="{ invalid: !hero.power }">

<option disabled value>Select one</option>

<option>Invisibility</option> Bind the class name

v-on:click Click handler

@click Shortcut for click handler

v-bind Bind to an attribute

v-model 2 way data binding

v-if Conditional element

return `${this.hero.firstName} ${this.hero.lastName}`;

watch: { React to data changes

hero(newValue, oldValue) { Named same as reactive value

console.log(`old=${oldValue}, new=${newValue}`); Accepts new and old values

HeroesList HeroesSearch HeroDetail

<HeroDetail export default { hero-detail.vue

Emit values out

Axios for http https://github.com/axios/axios

Vue router https://router.vuejs.org/en/

Vue CLI https://vuejs.org/v2/guide/installation.html#CLI

Vue Docs https://vuejs.org

Vue Dev Tools https://jpapa.me/vuedevtools

Vue Extensions https://aka.ms/psv-vueext

Vue: Getting Started Course https://jpapa.me/vuegs

Free Azure Trial https://aka.ms/psv-free

Vous aimerez peut-être aussi