VUE basic practical skills

Vue previously heard, had to find out about it. Was still interested in native JavaScript to write some methods of packaging, not why, feeling so handsome, more or less behind contacted a number of JQuery usage, up to now, some of the ways JavaScript native packages, which are forgotten forget. The company need to use Vue, Vue so learning to use the time off work. There are training the corporate sector, a summary Gangster practical tips, feel good, here recorded, to facilitate future inquiries, but also to share with you.

1, ES6 New Features at a Glance

2, Vue basics

3, Vue component development

4, Vue practical tips

ES6 New Features at a Glance

1, arrow function

var array = [1, 2, 3]; 

// 传统写法 
array.forEach(function(v, i, a){ 
    console.log(v); 
}); 

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

2, support classes

Animal {class   
　　constructor (name) { 
    the this .name = name; 
}   
sayName () { 
    the console.log ( 'My name IS' + the this .name); 
} 
} 
 
class Programmer the extends Animal { 
constructor (name) { 
    Super (name) ; // direct call the parent class constructor initializes 
} 
Program () { 
    the console.log ( "the I'm Coding ..." ); 
} 
} 
 
var Animal = new new Animal ( 'dummy'), wayou = new new Programmer ( ' wayou ' ); 
animal.sayName (); // outputs' My name is dummy'
wayou.sayName();  // 输出 'My name is wayou' 
wayou.program();  // 输出 'I'm coding...'

3, String template

// generates a random number 
var NUM = Math.random (); 

// output digital 
console.log ( `your num is $ { num}`);

4, deconstruction

var [X, Y] = getVal (), // function returns the value of deconstruction 
[name Age ,,] = [ 'wayou', 'MALE', 'Secrect']; // array deconstruction 

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

the console.log ( `X: $ {X}, Y: $` {Y}); the console.log ( `name: $ {name}, Age: Age} {$`);

5, the default parameter values

// conventional manner default parameters specified 
function the sayHello (name) {    
     var name = name || 'Dude' ; 
    the console.log ( 'the Hello' + name); 
} 

// use the default parameters for ES6 
function sayHello2 (name = ' Dude ' ) { 
    the console.log (the Hello $ {name} ``); 
}

6, uncertain parameters

// all parameter adding function 
function the Add (... X) {
     return x.reduce ((m, n-) => m + n-); 
} 

// pass arbitrary number of arguments 
console.log (add ( 1,2,3)); // output:. 6 
the console.log (the Add (1,2,3,4,5)); // output: 15

7, extended parameter

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

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

sayHello(...peoples); // 输出：Hello Wayou,John,Sherlock

8, let the const keyword

for(let i = 0; i < 2 ; i++){
    console.log(i);
}

console.log(i);

9, for of traversal value

var someArray = [ "a", "b", "c" ];
 
for (v of someArray) {
    console.log(v); // 输出:a,b,c
}

10, Set and Map collection

var S = new new the Set (); 
s.add ( "Hello") the Add ( "Goodbye") the Add ( "Hello.". ); 
the console.log (s.size); 
the console.log (s.has ( "Hello " )); 

var m = new new the Map (); 
m.set ( " Hello ", 42 is ); 
m.set (S, 34 is ); 
the console.log (m.get (S)); 

array deduplication: [... new new the Set ([1,2,3,3])] // if the array is inside the value of an object, then, is not it.

11, Proxy, Proxy objects who can listen to what happened, and perform some appropriate action when these things happen

// definition of the listening audience 
var ENGINEER = {name: 'Joe Sixpack', the salary: 50 }; 

// definition processing program 
var Interceptor = { 
  SET: function (Receiver, Property, value) { 
    the console.log (Property , 'IS changed to' , value); 
    Receiver [Property] = value; 
  } 
}; 

ENGINEER = the proxy (ENGINEER, Interceptor); // create a proxy to listen 
engineer.salary = 60; // console output: salary is changed to 60

Vue Basics

Template syntax:

1, text

< Span > the Message: MSG {} {} </ span > 
< span V-Once > This will not change: MSG {} {} </ span >

2, characteristics

<div v-bind:id="dynamicId"></div>

3, modifiers, event modifier, modifier keys, system modifiers

4、HTML

<span v-html="rawHtml"></span>

5, the expression

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

6, abbreviations

<a :href="url">...</a>
<a @click="doSomething">...</a>

7 and the listener properties calculation

computed: {
    reversedMessage: function () {}
}

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

8, rendering conditions

< H1 of V-IF = "=== type. 1" > A </ h1 of > 
< h1 of V-the else-IF = "=== type 2" > B </ h1 of > 
< h1 of V-the else > C </ h1 of > 

// V-Show CSS properties simply display switching element 
< h1 of V-Show = "OK" > the Hello! </ h1 of >

9, class and style bindings

<div :class="{ active: isActive, 'danger': hasErr }"></div>
<div :class="[activeClass, errClass]"></div>
<div :class="[{ active: isActive }, errClass]"></div>

<div :style="{ color: actCol, fontSize: fs + 'px' }"></div>
<div :style="styleObject"></div>

10, rendering list

<ul id="example-2">
  <li v-for="(item, index) in items" :key="index">
  </li>
</ul>

<span v-for="n in 10">{{ n }} </span>

数组更新检测：push/pop/shift/unshift/splice等

Vue Component Development

1, JavaScript files written in assembly

Vue.component("trip-nav", {
    template: `<div class='step-tag'></div>`,
    props: ['trip'],
    data: function () {
        return {
     activeNo:1
        }
    },
    computed: {

    },
    mounted() {

    },
    methods: {

    }
});

HTML：<trip-nav :trip=‘tripInfo’></trip-nav>

2, Vue paper prepared components

<template>
    <div class='step-tag'></div>
</template>

<script lang="ts">
import {Component,Vue,Prop} from "vue-property-decorator";

@Component
export default class TripNav extends Vue {
  activeNo = 1;
  @Prop() trip;
   
  get tripList() {
    return [];
  }

  mounted() {

  }

  activeTrip() {

  }
}
</script>

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

Vue practical tips

1, Vue proxy instances all of the properties within the object instance data

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

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

2, camelCase and kebab-case conversion

Vue.component ( 'Child' , { 
  The props: [ 'myMessage' ], 
  Template: '<span> myMessage {{}} </ span>' 
}) 

// Since HTML attribute is case-insensitive, requires converted spaced dash 
<child my-message = "hello !"> </ child>

3. The assembly of component instances scope

Vue.component('child', {
  props: ['msg'],
  template: '<span>{{ msg }}</span>'
})

<child msg="hello!"></child>

4, prop from the parent component to a subcomponent way binding

<! - default way binding -> 
< Child : msg = "parentMsg" > </ Child > 

<! - way binding -> 
< Child : msg.sync = "parentMsg" > </ Child > 

<! - single binding: Note tied to a single incoming data after any change will not sync back up, initialization data for incoming scene -> 
< Child : msg.once = "parentMsg" > </ Child >

5, event binding

Use $ on (eventName) monitor events 
using $ emit (eventName) trigger event 
parent component v can be directly used in place using sub-assemblies -on to listen to events triggered by the subassembly

6, naming conventions

<! - custom event is part of the HTML attribute, it is preferably used in the form of dash -> 
< Child @ Pass-Data = "the getData" > </ Child >

7, the data transfer

<! - subassembly by $ EMIT triggering event, the data transfer event triggered + -> 
. EMIT the this $ ( 'Data-Pass', this.childMsg)

8, sync Modifier

<comp :foo.sync="bar"></comp>
this.$emit('update:foo', newValue)

9、

parent $ 

$ parent parent element represented example, the read-only attribute 
this. parent.parentMsg $ 


$ the root 

$ root represents the root of the current instance of the component tree VUE 
instance if the current instance has no parent, is its own this example, the read-only attribute 

this . root.rootMsg $ 

$ Children 

$ Children represents a direct subset of the current instance of 
this. $ children is an array 

$ refs 

when large number of components, by using the ref attribute on the subassembly, the subassembly to a specified index ID 

< the child1 ref = "C1" > </ the child1 > 
< child2 REF = "C2" > </ child2 > 
 
the this. $ refs.c1 
the this. $ refs.c2

Official website a page life cycle chart

The following pages on the part of these events in the life cycle of a brief introduction

1、beforeCreate

Create a former state: after being called before the instance initialization, data observed (data observer) and event / watcher event configuration

2、beforeMount

Mount before the state: to be called before beginning to mount, related render function is called for the first time

3、beforeUpdate

更新前状态：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程

4、beforeDestroy

销毁前状态：实例销毁之前调用，此时实例仍然完全可用

5、created

创建完毕状态：实例已经创建完成之后被调用，实例已完成数据观测，属性和方法的运算， watch/event 事件回调。此时挂载阶段还没开始，$el 属性目前不可见

6、mounted

挂载结束状态：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子

7、updated

更新完成状态：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作

8、destroyed

销毁完成状态：VUE实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

这个页面生命周期，我就只能记得住常用的那三四个吧。这个生命周期，每次用到的时候，我都会去官网上面看。很是惭愧。。。

VUE basic practical skills

Guess you like