🎉 Vue to build large single-page e-commerce applications open source! Click me to see the source 🚀🚀

Estimated reading time :3 minutes

What is the Vue?

By the time you read this article, you must know a little bit about the origin of Vue, the world class framework, the open source work of The Chinese programming aristocracy Yu Creek. Since its launch, the number of likes on gitHub has surpassed Angular,React and other famous frameworks, as well as the purple of 🔥. It really feels like a latcomer taking the lead. Vue draws on the excellent design patterns and ideas of the first two frameworks to present us in an incremental mode, with obvious intentions Don’t talk nonsense, next follow (DA) with (Lao) my steps, take you from small white into big guy (Chui niu)..

Vue – A progressive JavaScript framework

introduce

Big guy told: ten thousand floors of tall buildings from little acreage, as vUE white VUE official Chinese website must try to read through several times, the case must knock several times oh.

  • Vue Chinese website
  • vue github
  • Vue.js is a set of progressive JavaScript frameworks for building user interfaces (UIs)

What’s the difference between a library and a framework

What’s the difference between a front-end framework and a library?

Library

A library is essentially a collection of functions. Each time a function is called, a specific function is implemented, and control is handed over to the consumer

  • Rep: the jQuery
  • The core of jQuery library: DOM manipulation, namely: encapsulate DOM manipulation, simplify DOM manipulation
  • JQuery source code analysis series

Framework

Framework, is a complete set of solutions, the use of framework, you need to put your code in the framework of the appropriate place, the framework will call your code at the appropriate time

  • The framework defines its own way of programming and is a complete solution
  • When we use a framework, the framework controls everything and we just write code according to the rules

The main difference

  • You call Library, Framework calls you

  • Core point: Who takes the lead (Inversion of control)

    • Within the framework, it is the framework that controls the whole process
    • With libraries, it’s up to the developer to decide how to invoke methods provided in the library (helper)

  • The Hollywood principle: Don’t call us, we’ll call you.

  • Frames are very intrusive (from start to finish)

What is the MVVM?

  • MVVM, a better UI pattern solution
  • From Script to Code Blocks, Code Behind to MVC, MVP, MVVM-popular science

MVC

  • M: Model Data Model (specialized for manipulating data, CRUD of data)
  • V: View View (for the front end, pages)
  • C: Controller Controller (a bridge between view and data model, used to process business logic)

The MVC pattern is often used in the back end.

An MVVM

  • MVVM ===> M / V / VM
  • M: Model Data model
  • V: view View
  • VM: ViewModel

Advantages compared to

  • The MVC pattern, which divides the application into three parts, enables separation of responsibilities

  • In the front end often through THE JS code to carry out some logical operations, and finally put the results of these logical operations in the page. That is, you need to manipulate the DOM frequently

  • MVVM enables automatic bidirectional data synchronization through bidirectional data binding

    • V (modify data) -> M
    • M (modify data) -> V
    • Data is the core

  • Vue, an MVVM-style framework, does not recommend manual manipulation of the DOM by developers

The Vue MVVM

While not entirely following the MVVM model, the design of Vue was undoubtedly inspired by it. Therefore, the variable name VM (short for ViewModel) is often used to represent Vue instances in documentation

Learning Vue should transform old JS concepts

  • Don’t think about manipulating DOM, think about manipulating data!! Drive development with data.

Start – Hello Vue

  • Installation: NPM I-S Vue
<! <div id= -- specifies that the vUE manages the content area. The content that needs to be displayed through the VUE should be placed in an element called the boundary"app">{{ msg }}</div> <! Vue. Js --> <script SRC ="vue.js"></script> <! <script> var vm = new vue ({// el: provide an existing DOM element on the page as the mount target of the vue instance el:'#app'// Vue instance data object, used to provide data to View data: {MSG:'Hello Vue'
    }
  })
</script>
Copy the code

Vue instance

  • Note 1: Declare data in data before using it
  • Note 2: All attributes in data can be accessed via vm.$data, or vm. MSG
var vm = new Vue({
  data: {
    msg: 'Hi, I'm Geek-James'
  }
})
 
vm.$data.msg === vm.msg // true
Copy the code

Data binding

  • The most common one: Mustache, which is known as the {{}} syntax
  • {{}} gets data from the data object data
  • Note: The value of the property of the data object has changed, and the content of the interpolation will be updated
  • Note: {{}} can only appear in JavaScript expressions and cannot parse JS statements
  • Note that Mustache syntax does not work on attributes of HTML elements
<h1>Hello, {{ msg }}.</h1>
<p>{{ 1 + 2 }}</p>
<p>{{ isOk ? 'yes': 'no'}}</p> <! -!!!!!! Wrong demonstration!! --> <h1 title="{{ err }}"></h1>
Copy the code

Vue Two way Data Binding

  • Bidirectional data binding: Binding DOM and Vue instance data together to interact with each other

    • Changes to the data cause changes to the DOM
    • DOM changes also cause data changes

  • How it works: Get and set methods in Object.defineProperty

    • Getters and setters: accessors
    • Function: Specifies the operation to be performed when an object property value is read or set

  • Vue – Deep responsive principle

  • MDN – Object.defineProperty()

*/ var obj = {} object.defineProperty (obj,'msg', {
  // 设置 obj.msg = "1" 时setMethod will be called by the system with the values before and after the settingset: function(newVal, oldVal) {}, // get is called when obj. MSG is read:function ( newVal, oldVal ) {}
})
Copy the code

A minimalist implementation of Vue bidirectional binding

  • Analysis of Vue principle & implementation of bidirectional binding MVVM
<! -- Example --> <inputtype="text" id="txt" />
<span id="sp"></span>
 
<script>
var txt = document.getElementById('txt'),
    sp = document.getElementById('sp'), obj = {} // Add MSG property to Object obj and set accessor object.defineProperty (obj,'msg', {// set obj.msg when obj.msg is changedsetThe method will be calledset: functionValue = newVal sp.innertext = newVal}}) // Listen for the text box to change when the text box is entered Change the obj. MSG TXT. AddEventListener ('keyup'.function (event) {
  obj.msg = event.target.value
})
</script>
Copy the code

Notes for adding data dynamically

  • Note: Only data in data is responsive; dynamically added data defaults to non-responsive
  • You can implement responsiveness to dynamically add data in the following ways
    • 1 vue. set(Object, key, value) – Suitable for adding a single attribute
    • 2 Object.assign() – Applies to adding multiple attributes
var vm = new Vue({
  data: {
    stu: {
      name: 'jack',
      age: 19
    }
  }
})
 
/* Vue.set */
Vue.set(vm.stu, 'gender'.'male'*/ vm.stu = object. assign({}, vm.stu, {gender:'female', height: 180 })
Copy the code

Asynchronous DOM update

  • Vue performs DOM updates asynchronously, monitors all data changes, and updates the DOM once

  • Advantages: The ability to remove duplicate data is important for avoiding unnecessary calculations and avoiding duplicate DOM operations

  • NextTick (callback) : After a DOM update, perform an operation (a DOM operation).

    • $nextTick(function () {})
methods: {
  fn() {
    this.msg = 'change'
    this.$nextTick(function () {
      console.log('$nextTick prints: ', this.$el.children[0].innerText);
    })
    console.log('Print directly:', this.$el.children[0].innerText); }}Copy the code

What is a Vue? After reading this article, I don’t know whether the hero in front of me really appreciate it. Welcome to leave a message and add comments.

If my sharing has inspired the hero in front of me, please encourage me with the highest courtesy of programmers ✨ star plus share.

Concern about the public number reply: learn to receive the front end of the latest and most complete learning materials, but also into the group and big guy together to learn and exchange

Poke me with a star