English Subtitles for Vue.js 2 Quickstart Tutorial 2017

Subtitles / Closed Captions - English

hi my name is<font color="#E5E5E5"> Dustin from coding the</font>

smart way calm and today in this<font color="#CCCCCC"> video</font> I'd like to<font color="#E5E5E5"> give</font><font color="#CCCCCC"> you a short</font> introduction into the view js2<font color="#E5E5E5"> front-end</font> framework and view is a very new framework which gains a lot of traction at the moment and in this introduction

I'll guide you through the first steps you need<font color="#CCCCCC"> to know to get started with a</font> framework and initiate a virus project so stay tuned<font color="#CCCCCC"> okay first it's always a</font> good idea to take<font color="#E5E5E5"> a look at the project</font> website and the view<font color="#CCCCCC"> jas website can be</font>

found at UJS dark and<font color="#CCCCCC"> you can see it</font> here so what exactly is vu arm view as a progressive you have a script framework that focuses on building user interfaces so it only works in<font color="#E5E5E5"> the view layer of</font> your application and it makes no

assumptions of middleware and<font color="#CCCCCC"> back and</font> technologies you are using so in fact you can work together with all of the common<font color="#E5E5E5"> back and technologies which are</font> available<font color="#CCCCCC"> for web development at the</font> moment and can be easily integrated into

your<font color="#E5E5E5"> existing projects of course and</font> that makes<font color="#E5E5E5"> it very easy to to integrate</font> view in your existing projects another main advantage of a view Jas is that it is<font color="#E5E5E5"> very performant so as you can read</font><font color="#CCCCCC"> it</font> here it's only 17 kilobyte and size and

that means the core library and that makes you application blazing fast so the overhead you are adding by including view<font color="#CCCCCC"> chairs</font><font color="#E5E5E5"> in your project is very</font> small and that makes sure<font color="#CCCCCC"> that your</font> application is performant<font color="#CCCCCC"> okay if</font><font color="#E5E5E5"> you</font>

want<font color="#CCCCCC"> to integrate view draya's into your</font> project there are<font color="#E5E5E5"> different ways of</font> doing so let's click here on the guide to get an overview of<font color="#E5E5E5"> the different options and</font> <font color="#E5E5E5">you can click on installation here on</font>

the left side menu and here you can<font color="#CCCCCC"> see</font> there<font color="#CCCCCC"> are different options</font><font color="#E5E5E5"> so for</font> <font color="#E5E5E5">example you can include it directly by</font> using a script tag in<font color="#CCCCCC"> your HTML page</font> that's<font color="#E5E5E5"> basically all what</font><font color="#CCCCCC"> is needed</font><font color="#E5E5E5"> to</font> get<font color="#CCCCCC"> going</font><font color="#E5E5E5"> with view and you can</font>

integrate<font color="#E5E5E5"> it directly by using a script</font> tag and use the resource from a content delivery network for example he run packages one of the content delivery networks which makes viewer<font color="#CCCCCC"> j/s weibull</font> and that's the<font color="#CCCCCC"> easiest option another</font>

option is<font color="#CCCCCC"> to use the</font><font color="#E5E5E5"> NPM package manager</font> to install<font color="#CCCCCC"> view by or simply typing in</font> <font color="#E5E5E5">NPM install view that is it downloading</font> the library and adding<font color="#E5E5E5"> it to the notes</font> modules folder of your project and there is<font color="#CCCCCC"> another version and that is</font><font color="#E5E5E5"> the other</font>

version which will which we will be using in this video<font color="#CCCCCC"> and that's a view</font> <font color="#CCCCCC">Jas CLI is a command-line interface and</font> with a command-line interface you are getting another commander that's the view command and by using that command

you can initiate a new project which is based on a template and is already including the view library so you do not <font color="#CCCCCC">need</font><font color="#E5E5E5"> to download it in a separate step</font> <font color="#E5E5E5">okay so let's switch to</font><font color="#CCCCCC"> the command line</font> and start installing the view command

line interface so that we can<font color="#CCCCCC"> use it to</font> <font color="#E5E5E5">initiate our first project and to do so</font> we need<font color="#E5E5E5"> to say npm install and i do it</font> as a root user minus G because we want <font color="#CCCCCC">to install the view a command-line</font> interface as a global command so we need

to give that option g for global and the package<font color="#CCCCCC"> name is</font> view dash on CL I so execute that command and the installation<font color="#E5E5E5"> is taking a</font> second ok here we are you can see the installation has been completed

successfully and now<font color="#CCCCCC"> the new view</font> command is available you can see it here it has different options and in order to generate a new project we<font color="#E5E5E5"> are using the</font> first option here the in adoption and we do it in<font color="#E5E5E5"> the following way let's save</font>

you in it web pack because<font color="#E5E5E5"> we want</font><font color="#CCCCCC"> to</font> get the project template which is using the web pack of module loader and bundler and then at<font color="#E5E5E5"> the last parameter</font> give the name of the project and we simply<font color="#E5E5E5"> call it view app 01 and now it's</font>

initiating the project you can<font color="#E5E5E5"> see it's</font> downloading the template and then it's asking some questions first we need<font color="#CCCCCC"> to</font> give a project<font color="#E5E5E5"> name here and we can</font> <font color="#E5E5E5">leave it at the default here view app</font><font color="#CCCCCC"> 01</font> a project description although if the

default here the author and now it's asking how the view built should be done we<font color="#E5E5E5"> are choosing a runtime and compile</font> that's a recommended way the years Linda feature for the<font color="#CCCCCC"> moment I'm saying</font><font color="#E5E5E5"> no and</font> here regarding the test setup was karma

and mugger although no and end-to-end tests was not watch again no so that's all what's needed now a new project folder was created view app a<font color="#E5E5E5"> one and</font> you<font color="#CCCCCC"> can see it here the next step is to</font> change into that folder and then

complete the installation by installing all the end <font color="#CCCCCC">em packages needed for our</font><font color="#E5E5E5"> project by</font> using the<font color="#E5E5E5"> NPM install command okay so</font> let's do so switch into that new project directory and then executing<font color="#E5E5E5"> NPM install</font>

in that directory and now it's fetching downloading all the packages defined in the package dot JSON file which was <font color="#E5E5E5">added to the</font><font color="#CCCCCC"> project that file is</font> containing all the dependencies and it's downloading all<font color="#CCCCCC"> the dependencies and</font>

installing the node modules into the node modules folder of<font color="#CCCCCC"> the project</font><font color="#E5E5E5"> and</font> this again<font color="#E5E5E5"> takes a second</font><font color="#CCCCCC"> to complete</font> <font color="#E5E5E5">okay here we</font><font color="#CCCCCC"> are it's completed and now</font> we can do a first test and we can start on the web server the development web

server to run the project and<font color="#CCCCCC"> that is</font> again done by using<font color="#E5E5E5"> the</font><font color="#CCCCCC"> npm command and</font> let's say npm run def here<font color="#E5E5E5"> okay you can</font> see the browser is opened automatically and it's loading on the<font color="#CCCCCC"> project here at</font> local host port 8080 and you can see the

<font color="#CCCCCC">app which was initialized with a view</font> command is already running and showing this output here<font color="#E5E5E5"> in the browser and if</font><font color="#CCCCCC"> I</font> switch back to the terminal you can<font color="#CCCCCC"> see</font> it's saying okay it was compiled successfully and now what the server is

listening at localhost 8080 and it's a live reload server so if we are implementing now any changes the<font color="#CCCCCC"> website</font> <font color="#E5E5E5">is loading automatically without any</font> manual steps look why not<font color="#E5E5E5"> okay so let's</font> keep our project running here<font color="#E5E5E5"> and i have</font>

<font color="#E5E5E5">opened another tab here at the command</font> line and I'm in the same project directory here and now let's start my code editor and<font color="#E5E5E5"> that's Adam</font> so that we can take a<font color="#E5E5E5"> look at the</font> initial project structure<font color="#CCCCCC"> okay here is</font>

so let's close it and see what's<font color="#E5E5E5"> inside</font> out of our project folder and here you <font color="#E5E5E5">can</font><font color="#CCCCCC"> see we have various files included</font> here you can see the package.json file that is<font color="#CCCCCC"> the fire well no dependencies</font> are listed and<font color="#E5E5E5"> before we have made sure</font>

that the dependencies have been downloaded<font color="#E5E5E5"> and installed into</font><font color="#CCCCCC"> the node</font> modules folder by executing the<font color="#CCCCCC"> npm in</font> style command in the project folder and then<font color="#E5E5E5"> the next file which</font><font color="#CCCCCC"> is important is</font> the index.html file because in<font color="#E5E5E5"> that file</font>

<font color="#E5E5E5">you find the starting point of the</font> application and<font color="#E5E5E5"> you can see it's a plain</font> simple ha HTML file and in the body <font color="#CCCCCC">section of that HTML file a diff section</font> is included and<font color="#E5E5E5"> that a deflection arm</font> has one attribute here the ID attribute

and the ID ID attribute gets assigned a string in our case<font color="#E5E5E5"> that's the app string</font> and<font color="#CCCCCC"> z ills arm the placeholder so that</font> the view framework knows where to insert the content which<font color="#CCCCCC"> is generated by the</font> view application ok neck next let's open

the source folder because so that is a place in our project structure where the view<font color="#CCCCCC"> jes application is implemented and</font> let's open within that folder the file main dot<font color="#CCCCCC"> jas and that's the place where</font> the<font color="#CCCCCC"> viewer application is initialized</font>

<font color="#E5E5E5">and you can see here we are importing</font> two things here first we need to<font color="#E5E5E5"> import</font> a view from view and<font color="#CCCCCC"> that</font><font color="#E5E5E5"> this is</font><font color="#CCCCCC"> the</font> main application class and you can see it here it's used<font color="#E5E5E5"> to create a new</font> instance of

framework and together with a view we are importing a second thing and that is app from the<font color="#CCCCCC"> app file and that is a</font> component we are implementing here in our project which is available<font color="#E5E5E5"> here</font><font color="#CCCCCC"> in</font> <font color="#E5E5E5">Epcot view we will take a look in a side</font>

<font color="#CCCCCC">of that implementation in a second but</font> first let's focus on the part here and the new view framework instance is created by calling them<font color="#CCCCCC"> the constructor</font> by using the new keyword and the constructor gets one parameter and

<font color="#E5E5E5">that's the object here with this</font> reconfiguration properties and the first <font color="#E5E5E5">property here you can see it's called</font><font color="#CCCCCC"> al</font> <font color="#E5E5E5">for element and that</font><font color="#CCCCCC"> gets assigned the</font> string here and that is mainly saying or a defining that the output<font color="#CCCCCC"> of the view</font>

<font color="#CCCCCC">application should be inserted into the</font> element which<font color="#CCCCCC"> is the ID app and we saw</font> it before in the index.html file we assigned the string app to<font color="#CCCCCC"> z rd property</font> and now we are connecting our view application with that div element so the

output which<font color="#CCCCCC"> is generated the HTML</font> output which is<font color="#E5E5E5"> generated</font><font color="#CCCCCC"> by our view</font> application is replacing that div element within our index HTML file so here's the template of our application and that the template<font color="#CCCCCC"> E is very simple</font>

because it's only<font color="#E5E5E5"> containing one element</font> and<font color="#CCCCCC"> that is the Z AB element which is</font> referring to<font color="#E5E5E5"> the app component and by</font> using that element here in our template we are defining that on the HTML output which<font color="#CCCCCC"> is generated by the app component</font>

should be placed here<font color="#E5E5E5"> inside of our view</font> template so it's part of the output which our view application generates and to be able to use on the<font color="#E5E5E5"> app element</font> here and including the output of the<font color="#CCCCCC"> app</font> component

we do not<font color="#CCCCCC"> only need to import up here we</font> also<font color="#E5E5E5"> need to declare up here within the</font> object we are assigning to the components property in the view configuration object so that the View application knows that we want<font color="#E5E5E5"> to make</font>

use of app component within our template <font color="#CCCCCC">okay so let's switch over to the</font> <font color="#CCCCCC">implementation of the app component and</font> the implementation is available in app toad view so here you<font color="#CCCCCC"> can see our sets</font> of the complete implementation<font color="#CCCCCC"> end as in</font>

every view<font color="#E5E5E5"> J as single file component</font> implementations as file is split up into three sections on top you can<font color="#CCCCCC"> see here</font> is<font color="#E5E5E5"> the template section of the app</font> component then we have a script section over here and<font color="#E5E5E5"> finally we have here the</font>

<font color="#CCCCCC">style section containing on CSS styling</font> code<font color="#CCCCCC"> for of the component template and</font> you can see that makes<font color="#E5E5E5"> it very easy to</font> keep the overview because everything belonging to one component is here within that one file and so let's first

take a look<font color="#E5E5E5"> at the script section you</font> can see here the script section is making a default expert of a and component configuration object for view and that configuration object is containing<font color="#E5E5E5"> two properties</font><font color="#CCCCCC"> name assigning</font>

a name to the component in our case<font color="#CCCCCC"> it's</font> app and again a components property taking an object containing all of the subsequent components which are used here in app component and we have one component included<font color="#CCCCCC"> herein that's the</font>

hello component it's listed here because if we take a<font color="#CCCCCC"> look</font><font color="#E5E5E5"> at the template you</font> can see the hello component is included <font color="#E5E5E5">in the template by using the hello LM</font> and here and now you can see<font color="#CCCCCC"> the</font> template is not so long with only one

<font color="#E5E5E5">diff section here and the diff section</font> consists of two<font color="#CCCCCC"> elements</font><font color="#E5E5E5"> one image</font> element this image element is including the logo PNG file and the output and <font color="#E5E5E5">it's including the output which is</font> generated by<font color="#E5E5E5"> the sub component hello and</font>

if<font color="#CCCCCC"> we now compare that template to the</font> output which was a<font color="#CCCCCC"> weibull here in the</font> browser you can see<font color="#CCCCCC"> its</font><font color="#E5E5E5"> label here</font> that's the<font color="#E5E5E5"> logo file and all the other</font> output which<font color="#CCCCCC"> is generated here the</font> <font color="#CCCCCC">Welcome message the essential wings the</font>

ecosystem links and so on is coming from <font color="#E5E5E5">the content or the output which</font><font color="#CCCCCC"> is</font> produced by<font color="#E5E5E5"> Z hello component and is</font> included<font color="#CCCCCC"> here in the template so let's</font> take a look<font color="#E5E5E5"> at the last part of on the</font> initial project structure and that's the

implementation of the hello component the implementation<font color="#CCCCCC"> as a weibull here in</font> the subfolder components and file hello dot view and/or open that file and here you can<font color="#CCCCCC"> see again we have the template</font> section available then we have the crew

<font color="#CCCCCC">/ script</font><font color="#E5E5E5"> section and finally use</font><font color="#CCCCCC"> the</font> Style section and as you can see if we start by taking a look at the script section again a default export is made defining a component configuration object the name in this case is hello

because we are defining the hell component and then there<font color="#CCCCCC"> is something</font> <font color="#E5E5E5">new it's a data function returning an</font> object with one property included and that's a Z msg stands<font color="#E5E5E5"> for message</font> property and msg gets assigned the

Welcome string and you can see it's welcome<font color="#E5E5E5"> to your view</font> rails app that's exactly<font color="#CCCCCC"> the string</font> which is outputted here<font color="#CCCCCC"> as the headline</font> under the logo file and now if you take <font color="#E5E5E5">a look at the template code which</font><font color="#CCCCCC"> is</font>

defined here you can see on the property msg as used herein the template in the h1 element by using the interpolation syntax which requires to use open and closing double curly braces and by using zetas syntax we are able<font color="#E5E5E5"> to include</font>

properties from the<font color="#E5E5E5"> object which is</font> returned from the data function of the component in our template and that's the reason<font color="#CCCCCC"> why the text</font><font color="#E5E5E5"> from</font><font color="#CCCCCC"> the msg</font> property is printed out here and the the rest of the template you can see it's

about printing out those links here we have the essential link section included in an h2 element and<font color="#E5E5E5"> then as a list all</font> the links<font color="#E5E5E5"> are printed out and we have</font> the ecosystem here it's that part with fallings pointing to view router<font color="#CCCCCC"> yucks</font>

view loader and awesome view so on the <font color="#CCCCCC">next step</font><font color="#E5E5E5"> I'd like</font><font color="#CCCCCC"> to make some</font><font color="#E5E5E5"> changes</font> to the initial implementation and just to give<font color="#CCCCCC"> you an impression</font><font color="#E5E5E5"> of how easy it</font> is to<font color="#CCCCCC"> use the view framework and to give</font> <font color="#E5E5E5">you a little introduction to some of the</font>

standard view<font color="#CCCCCC"> jrs directives and</font><font color="#E5E5E5"> I start</font> with with<font color="#CCCCCC"> the changes by deleting some</font> of the content here in the template of the hello component and<font color="#E5E5E5"> I'm going</font><font color="#CCCCCC"> to</font> remove everything which is<font color="#E5E5E5"> related to</font> the two<font color="#CCCCCC"> link sections here so let's</font>

delete this so that we<font color="#E5E5E5"> only are printing</font> out the<font color="#CCCCCC"> welcome message and you can see</font> I'm saving the file and instantly<font color="#E5E5E5"> it gets reloaded in the</font> browser without needing me to<font color="#E5E5E5"> do</font> anything manually here and now we can go

on with implementing for example<font color="#E5E5E5"> a list</font> print out and<font color="#E5E5E5"> I'm defining another data</font> property here in<font color="#E5E5E5"> the object</font><font color="#CCCCCC"> which is</font> returned by<font color="#CCCCCC"> the</font><font color="#E5E5E5"> data measured and i'm</font> naming that array<font color="#E5E5E5"> i would like to have</font> users and then define it as an array and

within that array let's say we have objects included in<font color="#E5E5E5"> that array which</font> consists of two properties let's use a first name property and assign first name string and a last name<font color="#CCCCCC"> okay that's</font> it so let's maybe add two more elements

here<font color="#E5E5E5"> okay assign a different first name</font> and last name for<font color="#E5E5E5"> the second user object</font> and for the cert user object let's use John as a first name<font color="#E5E5E5"> and maybe Porter as</font> a last name so now we<font color="#E5E5E5"> have three users</font> defined here in the users array and now

we are able<font color="#CCCCCC"> to use or to make use of</font> that<font color="#E5E5E5"> users array with the content</font> included in our template and I'd like<font color="#CCCCCC"> to</font> print out those users as a list so under the h1 element let's include another diff section here and this should be an

unordered list and I saying list item and now i'm using<font color="#E5E5E5"> a view</font><font color="#CCCCCC"> Jas</font> standard directive which is called<font color="#E5E5E5"> V</font> minus<font color="#E5E5E5"> 4 and I'm saying it equals some</font> the spring user in users and by applying <font color="#E5E5E5">that syntax here the view</font><font color="#CCCCCC"> Jas framework</font>

is<font color="#E5E5E5"> iterating over that array and</font> including one list item element<font color="#CCCCCC"> per</font> object<font color="#E5E5E5"> defined in our array in the</font> <font color="#E5E5E5">generated output and now we can use the</font> interpolation syntax once again to<font color="#CCCCCC"> print</font> out the values first print out the user

first<font color="#E5E5E5"> name and then print out the user</font> lastname<font color="#CCCCCC"> okay let's save it and you can</font> see on the output<font color="#CCCCCC"> is generated and</font><font color="#E5E5E5"> I and</font> getting back the names of the users<font color="#CCCCCC"> okay</font> so next thing I'd like<font color="#CCCCCC"> to include is an</font> input element and use two-way data

binding to sync the value of the input element which a property which<font color="#CCCCCC"> is</font> defined in our data model<font color="#E5E5E5"> okay let's</font> first define a new property here<font color="#CCCCCC"> in the</font> return object of the data function and let's name that property input well and

just assign an empty string here<font color="#E5E5E5"> okay</font> and within our template here under the diff section of the list of users<font color="#E5E5E5"> I'm</font> defining another diff section and within that diff section I'm including an input element and let's use

the<font color="#E5E5E5"> time text and we don't need name and</font> value here instead i'm using another <font color="#E5E5E5">view j as standard directive which is</font> called<font color="#CCCCCC"> V Model View dash model and</font><font color="#E5E5E5"> I'm</font> assigning the string input<font color="#CCCCCC"> bar which</font> corresponds<font color="#CCCCCC"> to the name of our property</font>

we have defined here and<font color="#E5E5E5"> let's output on</font> that property here under the input element and let's say or let's say our spawn and i'm using the<font color="#E5E5E5"> v dash text</font> directive and again<font color="#CCCCCC"> i'm assigning input</font> Val<font color="#CCCCCC"> okay so let's see here is our input</font>

element and now I can start<font color="#E5E5E5"> typing</font> something into the<font color="#E5E5E5"> development and you</font> can see here that's the output of our span element which<font color="#CCCCCC"> is bound to the input</font> well element by using the<font color="#CCCCCC"> v minus text</font> directive the<font color="#E5E5E5"> output of z the input here</font>

is directly reflected here as an output on the<font color="#CCCCCC"> same page</font><font color="#E5E5E5"> okay the last thing I'd</font> like<font color="#E5E5E5"> to</font><font color="#CCCCCC"> demonstrate is how you can use</font> on events with view drug trials and going to include another diff section here so the use case<font color="#E5E5E5"> I'd like to</font>

implement is a very<font color="#CCCCCC"> easy one just let us</font> <font color="#E5E5E5">implement a button which</font> is going to increment a counter by one each time the user<font color="#E5E5E5"> clicks on the button</font> so let's first define the counter data property here in our data object<font color="#E5E5E5"> I am</font>

going to call a counter and set it initially to 20 and within that new detection I'm implementing a button<font color="#CCCCCC"> and</font> this button should include and beauteous event handler and i'm using the directive<font color="#E5E5E5"> v dash on followed</font><font color="#CCCCCC"> by the</font>

event<font color="#CCCCCC"> i would like</font><font color="#E5E5E5"> to respond to and</font> that is a click event and each time<font color="#CCCCCC"> the</font> user clicks<font color="#E5E5E5"> on the button the counter</font> property should be incremented so i'm using<font color="#E5E5E5"> plus plus here and the content of</font> the button sure to reflect the<font color="#CCCCCC"> value of</font>

the counter so<font color="#CCCCCC"> i'm including a little</font> bit of text information here you have clicked this button and now i'm going<font color="#E5E5E5"> to</font> <font color="#CCCCCC">use interpolation syntax again to</font> include the value of the counter<font color="#E5E5E5"> x</font><font color="#CCCCCC"> ok</font> let's save it and see how<font color="#CCCCCC"> the output</font>

looks like so now here is a button<font color="#E5E5E5"> and I</font> can<font color="#E5E5E5"> click on the button and each time I</font> click you<font color="#CCCCCC"> can see is the counter value</font> which is printed out on the button here is incremented by one this was the same <font color="#E5E5E5">from coding the smart way</font><font color="#CCCCCC"> calm if you do</font>

like my videos please don't<font color="#CCCCCC"> forget to</font> subscribe<font color="#E5E5E5"> to my channel see you in the</font> next video bye you

Video Description

#1 Online Course: Vue JS 2 - The Complete Guide (http://codingthesmartway.com/courses/vuejs2-complete-guide/)

Vue.js 2 Quickstart Tutorial 2017

Vue is a progressive JavaScript framework that focuses on building user interfaces. As it only works in the “view layer” it makes no assumption of middleware and backend and therefore can be integrated easily into other projects and libraries. Vue.js offers a lot of functionality for the view layer and can be used for building powerful single-page webapps. In this video tutorial you'll learn how to get started with Vue.js!

This is a CodingTheSmartWay.com tutorial

Check out our ebooks on Leanpub.com:

* Angular 2 - A Practical Introduction to the new Web Development Platform

* Ionic 2 - A Practical Introduction To Hybrid Mobile Apps Development

Night Owl by Broke For Free is licensed under a Creative Commons Attribution License.