Practical skills of Vue Foundation

Time:2020-1-15

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: http://es6.ruanyifeng.com/

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){ 
    console.log(v); 
}); 

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

2. Class support

class Animal {  
  constructor(name) { 
    this.name = name; 
}  
sayName() { 
    console.log('My name is ' + this.name); 
} 
}
 
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++){
    console.log(i);
}

console.log(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();
s.add("hello").add("goodbye").add("hello");
console.log(s.size);
console.log(s.has("hello"));

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

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

4、HTML

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

A
B
C

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

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 {
     activeNo:1
        }
    },
    computed: {

    },
    mounted() {

    },
    methods: {

    }
});

HTML:

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;">;

@Component
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() {

  }
}
</span>

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


this.$emit('pass-data',this.childMsg)

8. Sync modifier

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

9、

$parent

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


$root

$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

this.$root.rootMsg

$children

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

$refs

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



 
this.$refs.c1
this.$refs.c2

One on the official website, page life cycle diagram

 

 

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

1、beforeCreate

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

2、beforeMount

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

3、beforeUpdate

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

4、beforeDestroy

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

5、created

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

6、mounted

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.

7、updated

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

8、destroyed

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 […]