Vue JS
// #1 Installation
//Install vue-2-boilerplate and run : https://github.com/petervmeijgaard/vue-2-boilerplate
npm i && npm run dev
//To run development
npm run dev
// To build files after editing (dist)
npm run build
//If you use gulp to build, you may tweak the package.json, npm run build to combined gulp
"scripts": {
"dev": "node build/dev-server.js",
"start": "npm run dev",
"build": "gulp css && node build/build.js",
// #2 Import SCSS
To import scss from app.vue; Add the following code into bottom part of app.vue
<style lang="scss">
@import "./css/main.scss";
</style>
// #3 Using Bootstrap
//Do not use all bootstrap materials i.e .js since were using virtual DOM of vue.
//Method 1: Manual
//Download bootstrap CDN at https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
// Save bootstrap into scss/vendor/bootstrap/bootstrap.min.css
// in main.scss
//vendor
@import "../../node_modules/fotorama/fotorama";
@import "../../node_modules/vue-nav-tabs/dist/vue-tabs.min";
@import "vendor/bootstrap/bootstrap.min.css";
//Method 2: NPM package
//npm i bootstrap@3
//import bootstrap from node_modules into main.js (global registration area)
import 'bootstrap/dist/css/bootstrap.min.css';
// # Devtools
//Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
//https://vuejs-tips.github.io/cheatsheet/
<template>
.....
<alert>A book was created !!!</alert>
//Create book form
<form> .... </form>
</template>
<script>
import Alert from './Alert.vue';
export default{
components:{
'alert':Alert
}
}
</script>
//Add subcomponent into component
export default {
name: 'app',
components: {
Header,
Footer,
},
data() {
return {};
}
}
1. Install gulp in directory : npm i gulp
2. Setup and configure gulp in your project directory.
3. Gulpfile.js - edit the build directory to static/ since its native path in Vue.
// folders
folder = {
src: 'src/',
build: 'static/'
}
4. Gulpfile.js - Edit the source of .scss path
return gulp.src(folder.src + 'scss/main.scss')
5. App.vue - Remove the following style tags from src/App.vue (if you did so)
<style lang="scss">
@import 'scss/main.scss';
</style>
6. Main.js - Remove load class from src/main.js ( if you did so)
7. Index.html - Add the class to <head> in your index.html
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
8. src/main.scss node_modules dependencies - gulp css task
Do not import the src with .vue method e.g @import "~vue-nav-tabs/themes/vue-tabs";
Instead use full path e.g @import "../../node_modules/vue-nav-tabs/dist/vue-tabs.min";
9. gulp css in shell, follow by npm run dev to view the changes.
10. Done.
|- src/
|- router/
|- scss/
|- App.vue
|- main.js
Vue.component('modal', {
template: '#modal-template'
})
|- components/
|- MainPanel.vue (show only trigger button)
<template>
<button class="btn btn-primary btn-block" id="show-modal" @click="showModal = true">Buy</button>
<modal v-if="showModal" @close="showModal = false">
<h3 slot="header">Header of modal</h3>
</modal>
</template>
<script>
import Modal from './Modal.vue';
export default {
components: {
Modal
},
data () {
return {
showModal: false
}
}
}
</script>
|- Modal.vue (the modal component)
<template>
<div id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
|- dist/
|- index.html
|- static/
|- css/
|- fonts/
|- images/
|- js/
|- static/ (for gulp)
|- css/
|- fonts/
|- images/
|- gulpfile.js
|- node_modules/
|- package.json
########################################################
//show more/less
//use type="html" to remove any HTML characters
<truncate clamp="+ Show more" :length="200" less=" - Show Less" :text="propertyData['property-detail']" type="html"></truncate>
<script>
import truncate from "vue-truncate-collapsed";
export default {
components: {
truncate: truncate
}
};
</script>
########################################################
//toggle
<div class="col-md-12 border-bottom-1">
<span class="value-lg">- RM25,620</span>
<span v-on:click="toggleContent = !toggleContent" class="label">Costs</span>
<div v-show="toggleContent" class="content">cost expand goes here!!!!</div>
</div>
<script>
export default {
data () {
return {
toggleContent: false,
imgSrc: "https://lazacode.org/images/logo.jpg"
}
},
}
</script>
########################################################
//mobile menu expand
<div class="left">
<div id="mobile-nav-toggle"
@click="isShow = !isShow">
</div>
<transition name="slide-fade">
<div v-if="isShow" class="mobile-menu-wrapper">
<span class="close" @click="isShow = !isShow"></span>
<nav>
<ul class="mobile-menu">
<li><a href="/properties">Properties</a></li>
<li class=""><a href="/invest">Auto-invest</a></li>
<li class=""><a href="/how-it-works">How it Works</a></li>
<li class=""><a href="/about-us">About Us</a></li>
</ul>
</nav>
</div>
</transition>
</div>
<script>
export default {
name: 'hello',
data () {
return {
showMobileMenu: false,
isShow: false,
inputTest: "",
imgSrc: "http://gantry-1927.kxcdn.com/user/pages/02.blog/gantry-logo-competition/grav-logo.png",
}
}
}
</script>
| Category | Item | JS | HTML |
|---|---|---|---|
| Event Handling | Use the binding and listeners to listen to DOM events. | new Vue({ el: '#app', data() { return { counter: 0 } }, methods: { increment() { this.counter++; } } }); | |
Template Syntax
A Vue.js introduction for people who know just enough jQuery to get by
React.js Introduction For People Who Know Just Enough jQuery To Get By
Vue.js vs jQuery: Use Cases and Comparison with Examples