As a self-study front just hired a small white, in the first article about his life experiences and the first half from the beginning to understand the front and through self-study to step into this industry experience, is also received many comments and encouragement, and also actively respond to some preparation and front-end is self-study friend’s question, hope can help you little detours quick into the pit.

And as I said in an article, write their own blog reason just to make a summary to the knowledge of the self-study and record the problems in the development process, help them deepen memory of knowledge, and develop a good habit, now there are a lot of the technology of blog on the depth of relevant knowledge to do the summary, I just sum up the knowledge points I have learned with the identity of a scholar, if there is a wrong place to write, welcome the big guy criticism and correction, thank you!

Without further ado, let’s go

(1) Common instructions of VUE

  • v-html / v-text: Renders the label in the value
  • v-model: placed on form elements to implement two-way data binding
  • v-bind(abbreviated:) : used to bind inline properties
  • v-if / v-showThe value can be displayed if the value is true or false
  • v-onceThe corresponding label is rendered only once
  • v-for: Loops to display elements
  • v-onevent

(2) VUE template syntax

Vue template syntax has two main categories: interpolation syntax and instruction syntax

  1. Interpolation syntax:
  • Function: Used to parse label body content.
  • {{XXX}}, XXX is a JS expression, and can read all attributes in data directly.
  1. Instruction syntax:
  • Function: Used to parse tags (including tag attributes, tag body contents, and binding events…..) .
  • For example, v-bind:href=” XXX “or abbreviation :href=” XXX”, XXX also needs to write js expressions and can read all attributes in data directly.
  • Note: There are many instructions in Vue, and they are all in the form of: V-???? V-bind is just an example here.
<template> <div> <h1> Interpolation syntax </h1> <h3> Hello, {{name}} < / h3 > < h1 > command syntax < / h1 > < v - bind: a href = "school. Url" > point I to study 1 {{school. The name}} < / a > < a 2</a> </div> </template> <script> export default {** **data(){return{ Name: 'Joe' school: {name: "wu3 da4, url: 'http://www.baidu.com'}}}} < / script >Copy the code

(3) Data binding

There are two ways to bind data in Vue:

  1. V-bind: Data can only flow from data to pages.
  2. Two-way binding (V-Model) : Data flows not only from data to pages, but also from pages to data.

Remark:

  • 1. Bidirectional binding is usually applied to form elements (input, SELECT, etc.)
  • 2. V-model: Value can be shortened to V-model because v-model collects value values by default.
<! <input type="text" V-bind :value="name"><br/> <br/> <br/> <br/> <input type="text" :value="name"><br/> Two-Way data binding: <input type="text" V-model ="name"><br/> <! The following code is incorrect because the V-model can only be applied to form elements (input elements) --> <! -- <h2 v-model:x="name">Copy the code

(4) Data agent

Object.defineProperty()

The object.defineProperty () method is at the heart of vue2, including data hijacking, data proxying, and calculating attributes. Data proxying is the operation (read/write) of a property in another object through one object proxying. Today we will review the use of this method.

<script type="text/javascript" > let number = 18 let person = {name:' zhang3 ', sex:' male ', } // Add an age attribute to person object.defineProperty (person,'age',{// value:18, // set it to 18 // Enumerable :true, // Control whether the attribute can be enumerable, // The control property can be deleted without any additional information, and the default value is false and works without any additional control system. Get (){console.log(' someone read the age property ') return number}, // When someone changes the age property of the person, Set (value){console.log(' someone modified the age property and the value is ',value) number = value}}) </script>Copy the code

Data broker in Vue

  1. Data proxy in Vue: Proxy operations (read/write) of properties in data objects through VM objects
  2. Data broker benefits in Vue: Easier manipulation of data in data
  3. Basic Principles:
  • Add all attributes from the data Object to the VM via Object.defineProperty().
  • Specify a getter/setter for each property added to the VM.
  • To manipulate (read/write) the corresponding property in data inside the getter/setter.
<! DOCTYPE HTML > < HTML > <head> <meta charset="UTF-8" /> <title> </title> <! <script type="text/javascript" SRC =".. / js/vue. Js "> < / script > < / head > < body > < div id =" root "> < h2 > name: {{name}} < / h2 > < h2 > address: {{address}}</h2> </div> </body> <script type="text/javascript"> vue.config. productionTip = false // Prevents Vue from generating production prompts at startup. Const vm = new Vue ({el: '# root, data: {name:' Joe ', address: 'hubei - wuhan'}}) < / script > < / HTML >Copy the code

(5) Event processing

1. Basic use of events

  1. Bind events with V-on: XXX or @xxx, where XXX is the event name;
  2. Callbacks to events need to be configured in the Methods object, which will eventually be on the VM;
  3. Functions configured in methods, do not use arrow functions! Otherwise this would not be vm;
  4. All functions configured in Methods are functions managed by Vue. This refers to vm or component instance objects.
  5. @click=”demo” and @click=”demo($event)” have the same effect, but the latter can pass arguments;
<! DOCTYPE HTML > < HTML > <head> <meta charset="UTF-8" /> <title> Basic use of events </title> <! <script type="text/javascript" SRC =".. /js/vue.js"></script> </head> <body> <div id="root"> V-on :click=@click <button @click="showInfo1" </button> </div> </body> < type="text/javascript"> Vue.config.productionTip = false // Prevents Vue from generating production prompts at startup. Const vm = new Vue({el:'#root', data:{name:' zhang SAN ',}, Methods :{showInfo1(event){console.log(event.target.innertext) console.log(this) // this is vm}, showInfo2(event,number){ console.log(event,number) // console.log(event.target.innerText) // console.log(this) }}}) </script> </ HTML >Copy the code

2. Event modifiers

  1. Prevent: prevent default events.
  2. Stop: Stops events from bubbling.
  3. Once: The event is triggered only once (common).
  4. Capture: Capture mode using events;
  5. Self: Fires an event only if event.target is an element of the current operation;
<div id="root"> <! Prevents the default event (common) - * * * * -- > < a href = "http://www.baidu.com" @ click. Prevent = "showInfo" > I < / a > <! <div class="demo1" @click="showInfo"> <button @click.stop="showInfo"> </button> <! - modifier can continuous write * * * * -- > < a href = "http://www.baidu.com" @ click. Prevent. Stop = "showInfo" > me < / a > < / div > <! < [email protected] ="showInfo"> </ [email protected] ="showInfo"> </button> <! <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <! -- ** Events are triggered only if event.target is an element of the current operation; <div class="demo1" @click.self="showInfo"> </div>Copy the code