Practical skills of Vue Foundation


Vue has heard of it before, and has a little knowledge of it. At that time, I was still keen to write some method encapsulation in native JavaScript, which is not why. I feel so handsome. I have more or less touched the usage of jQuery. Up to now, I have forgotten some methods of native JavaScript encapsulation. The previous company needed to use Vue, so they used to learn Vue when they were off duty. Once the training of the company’s Department, a big guy summed up the practical skills, I feel good, and I record them here, which is convenient for future query and sharing with you.

Written by Mr. ruanyifeng:

1. Overview of new features of ES6

2. Vue Fundamentals

3. Vue component development

4. Practical skills of Vue

Overview of new features of ES6

1. Arrow function

var array = [1, 2, 3]; 

//Traditional writing 
array.forEach(function(v, i, a){ 

// ES6 
array.forEach(v = > console.log(v));

2. Class support

class Animal {  
  constructor(name) { = name; 
sayName() { 
    console.log('My name is ' +; 
class Programmer extends Animal { 
constructor(name) { 
    Super (name); // directly call the parent constructor for initialization 
program() { 
    console.log("I'm coding..."); 
var animal = new Animal('dummy'), wayou = new Programmer('wayou'); 
Animal. Sayname(); // output 'my name is dummy' 
Wayou. Sayname(); // output 'my name is wayou' 
Wayou. Program(); // output 'I'm coding...'

3. String template

//Generate a random number
var num = Math.random();

//Output number
console.log(`your num is ${num}`);

4, deconstruction

Var [x, y] = getval(), // deconstruction of function return value
[name, age] = ['wayou ',' male ',' secrect ']; // array deconstruction

function getVal() {
    return [ 1, 2 ];

console.log(`x:${x},y:${y}`); console.log(`name:${name},age:${age}`);

5. Default parameter value

//Traditional way of specifying default parameters
function sayHello(name){    
    var name = name || 'dude';
    console.log('Hello ' + name);

//Using the default parameters of ES6
function sayHello2(name = 'dude'){
    console.log(`Hello ${name}`);

6. Indefinite parameter

//Functions that add all parameters
function add(...x){
    return x.reduce((m,n) => m + n);

//Pass any number of parameters
Console. Log (add (1,2,3)); // output: 6
Console. Log (add (1,2,3,4,5)); // output: 15

7. Extended parameters

var peoples = ['Wayou','John','Sherlock'];

function sayHello(peo1,peo2,peo3){
    console.log(`Hello ${peo1},${peo2},${peo3}`);

Sayhello (... People); // output: Hello wayou, John, Sherlock

8. Let and const keywords

for(let i = 0; i < 2 ; i++){


9. For of value traversal

var someArray = [ "a", "b", "c" ];
for (v of someArray) {
    Console.log (V); // output: A, B, C

10. Set and map set

var s = new Set();

var m = new Map();
m.set("hello", 42);
m.set(s, 34);

Array de duplication: [ New set ([1,2,3,3])] // if the value in the array is an object, it is not allowed.

11. Proxy. Proxy can listen to what happens to an object and perform some corresponding operations after it happens

//Define the target object to listen on
var engineer = { name: 'Joe Sixpack', salary: 50 };

//Define handler
var interceptor = {
  set: function (receiver, property, value) {
    console.log(property, 'is changed to', value);
    receiver[property] = value;

Engineer = proxy (engineer, interceptor); // create a proxy to listen
Engineer. Salary = 60; // console output: salary is changed to 60

Vue Fundamentals

Template syntax:

1, text

Message: {{ msg }}
This will not change: {{MSG}}

2, characteristics

3. Modifier, event modifier, key modifier, system modifier


5. Expression

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

6, abbreviation


7 compute properties and listeners

computed: {
    reversedMessage: function () {}

watch: {
    question: function (newVal, oldVal) {}

8. Conditional rendering


//V-show simply switches the CSS attribute display of the element

9. Class and style binding

10. List rendering

{{ n }} 

Array update detection: push / Pop / shift / unshift / splice, etc

Vue component development

1. JavaScript file writing component

Vue.component("trip-nav", {
    template: ``,
    props: ['trip'],
    data: function () {
        return {
    computed: {

    mounted() {

    methods: {



2. Vue file authoring component

<span style="background-color: #f5f5f5; color: #000000;">
import {Component,Vue,Prop} from </span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">vue-property-decorator</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">;

export </span><span style="background-color: #f5f5f5; color: #0000ff;">default</span><span style="background-color: #f5f5f5; color: #000000;"> class TripNav extends Vue {
  activeNo </span><span style="background-color: #f5f5f5; color: #000000;">=</span> <span style="background-color: #f5f5f5; color: #000000;">1</span><span style="background-color: #f5f5f5; color: #000000;">;
  @Prop() trip;
  get tripList() {
    </span><span style="background-color: #f5f5f5; color: #0000ff;">return</span><span style="background-color: #f5f5f5; color: #000000;"> [];

  mounted() {


  activeTrip() {


import tripnav from "./components/tripnav.vue";
components: {tripnav}

Practical skills of Vue

1. The Vue instance will proxy all properties in the data object in the instance

var data = { a: 1 }
var vm = new Vue({
  data: data

vm.a === data.a // -> true

2. The conversion of camelCase and kebab case

Vue.component('child', {
  props: ['myMessage'],
  template: '{{ myMessage }}'

//Because HTML attributes are case insensitive, they need to be separated by dashes

3. Component instance scope

Vue.component('child', {
  props: ['msg'],
  template: '{{ msg }}'

4. Two way binding of prop from parent component to child component

5. Event binding

Use $on (eventName) to listen for events
Use $emit (eventName) to trigger events
The parent component can directly use v-on to listen for events triggered by the child component where the child component is used

6. Naming convention

7. Data transfer


8. Sync modifier

this.$emit('update:foo', newValue)



$parent indicates the instance of the parent component, which is read-only


$root represents the root Vue instance of the current component tree
If the current instance does not have a parent instance, the instance is itself, and the property is read-only



$children represents the direct subgroup of the current instance
This. $children is an array


When the number of components is large, an index ID is assigned to the subcomponent by using the ref attribute on the subcomponent


One on the official website, page life cycle diagram



Here is a brief introduction to some events in the page life cycle


Pre creation status: after instance initialization, data observer and event / watcher are called before event configuration


Pre mount state: called before mount, and the related render function is called for the first time


Status before update: called during data update, before virtual DOM re rendering and patching. You can change the state further in this hook, which will not trigger the additional re rendering process


Pre destruction state: before the instance is destroyed, the instance is still fully available.


Creation completion status: the instance is called after it has been created. The instance has completed data observation, property and method operations, and watch / event event event callback. At this time, the mount phase has not started, and the $El attribute is not currently visible


The end of the mount state: El is replaced by the newly created vm.$el, and the hook is invoked when mounted to an instance.


Update completion status: the component DOM has been updated, so you can now perform DOM dependent operations


Destroy completion status: all items indicated by the Vue instance will be unbound, all event listeners will be removed, and all sub instances will be destroyed


This page life cycle, I can only remember the commonly used three or four bar. This life cycle, every time I use it, I will go to the official website. It’s a shame…


Recommended Today

The best testing framework of selenium 4 Java

For decades, Java has been the preferred programming language for developing application server. Although JUnit has been working with developers to help them with automated unit testing, with the passage of time and the development of the testing industry, especially with the rise of automated testing, many Java based open-source frameworks have been developed, which […]