Vue.js Create Application

Installing vue.js

Creating skeleton for application

Ways of debugging and testing the application

Installing vue.js

HTML: Download the standalone vue.js
1. https://vuejs.org/js/vue.js
2. https://vuejs.org/js/vue.min.js
CDN: Link to maybe a non updated version. Recommended, third option.
Bower
1. ```
bower install vue
```
CSP https://github.com/vuejs/vue/tree/csp/dist
1. It is CSP Compliance (content security policy) prevent security attacks
2. Example: in Chrome applications

npm: for large scale applications

npm install vue
npm install vue@csp

Files:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue.js NPM Installation</title>
</head>
<body>
  <div id="app">
    <h2></h2>
    <script src="main.js"></script>
</body>
</html>

package.json

{
  "name": "sample",
  "scripts": {
    "build": "browserify script.js -o main.js"
  },
  "version": "0.0.1",
  "devDependencies": {
    "browserify": "^13.0.1",
    "vue": "^2.0.3"
  }
}

script.js

import Vue from 'vue';
//var Vue = require('vue/dist/vue.js');

var data = {
  message: "Hello"
};

new Vue({
  el: '#app',
  data: data
});

Install browserify and vue in --save-dev mode using npm

vue-cli
1. Run: vue init webpack learn-vue
2. Run: npm install & npm run dev
3. More options:

Debugging Vue.js

Install Vue.js dev tools for Chrome.

In order to debug local files is required the http-server from npm

Scaffolding Application

Using Vue-CLI create a webpack application.

Integrated tools into the generated project:

ESLint plugin. This avoids to run the application if a JS error exists
Automatic reload. No need to restart server to view changes
Testing integrated: npm run unit , npm run e2e. The last one is not allowed to run it in paralel with the application
Run: npm run dev

Directory structure:

First Vue.js Application

Creating component

Scope of data and methods
Reusability
Create Vue.extend({})
Register Vue.component()
Declaring templates with HTML. Complex HTML. Tag <template>

Handling data

Component template, scope, preprocessor

Example of using <template>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello component</title>
</head>
<body>
  <template id="hello">
    <h1>Hello</h1>
  </template>

  <div id="app">
    <hello-component></hello-component>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <script>
  // creating component
  var HelloComponent = Vue.extend({
    template: '#hello'
  });
  // registering component
  Vue.component('hello-component', HelloComponent);
  // initializing the vue application
  new Vue({
    el: '#app'
  });
  </script>
</body>
</html>

Example of customizing a component

  // creating component
  var HelloComponentX = Vue.component('hello-component', {
    el: function() {
      return '#hello';
    },
    data: function() {
      return { msg: 'Hello'};
    }
  });

Scope of components

Local scope - inaccessible
Global scope - accessible
Components - Local scope
Application - Global scope
Using prop attribute

Example of passing data to components

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello component</title>
</head>
<body>
<template id="hello">
<h1>{{msg}} {{user}}</h1>
</template>

<div id="app">
  <hello-component v-bind:user="user"></hello-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script>
Vue.component('hello-component', {
  template: '#hello',
  data: function() {
    return {
      msg: 'Hello Hero'
    };
  },
  props: ['user']
});
// initializing the vue application
new Vue({
  el: '#app',
  data: {
    user: 'hero'
  }
});
</script>
</body>
</html>

Vue.js Create Application

Vue.js Create Application

Contents

Installing vue.js

Debugging Vue.js

Scaffolding Application

First Vue.js Application

Example of using <template>

Example of customizing a component

Scope of components

Example of passing data to components

results matching ""

No results matching ""