• This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Start using Vue

  1. The introduction of vue. Js

    Website: vuejs.org

    Development version: includes full warning and debug modes

    Production version: Removed warning, smaller size

  2. When vue.js is introduced, we are given a constructor called vue

  3. In JS, new Vue()

  4. New Vue() returns a Vue instance object, which we follow with a variable

  5. const vm = new Vue()

  6. Pass a configuration object {} — > const VM = new Vue({})

el

Type: string

Full name: Element

What it does: Configures the control element that represents the area to be controlled by the Vue. The value is a CSS selector

<! <div id="app"></div>Copy the code
Const vm = new Vue({el: '#app' // control element with id app})Copy the code

$mount

  • The function of el is the same as that of EL, both are configuration control elements, you can use either, or two

      <div id="app"></div>
Copy the code
      const vm = new Vue({})
  vm.$mount('#app');
Copy the code

  • Q: How is it different from el?

    A: There is no difference in nature. $mount is a manual mount. Sometimes in a project you need to delay the mount, sometimes you need to do something else before the mount, such as judge, etc. (but very rarely)

data

  • Type: Object

  • Function: Store the data to be used, the data is responsive

    Const vm = new Vue({el: '#app', data: {'mrDeng': 'beautiful'}})Copy the code

Interpolation expression

  • Use method: {{}}

  • The data in vUE can be filled into interpolation expressions such as:

      <div id="app">{{ mrDeng }}</div>
Copy the code
    Const vm = new Vue({el: '#app', data: {mrDeng: 'Xiao Ming: beautiful, beautiful'}})Copy the code

  • In addition to filling in data, you can also directly fill in data values (numbers, strings, booleans, undefined, NULL, arrays, objects), such as:

    < div id = "app" > {{5201314}} {{' graceful, graceful '}} {{true}} {{[' Ming ', 'liu', 'Wang Xiaobao]}} {{{name: "xiao Ming, age: 80, height: '140cm', weight: '100kg'} }} </div>Copy the code

  • Note: When writing object type values directly in interpolation, do not join three {} together. This will cause an error, such as:

    <div id="app"> <! - but no drop - > {{{name: "xiao Ming, age: 80, height: 140 cm, weight: '100 kg'}}} < / div >Copy the code

  • You can also write expressions in interpolation, such as:

    <div id="app"> <! - operation expression - > {{' you '+' me '}} {{10-5}} {{100 * 7}} {{1000/12}} <! - the logical expression - > {{liu | | li}} {{deng && liu}} {{! wang }} <! {{1 + 1 === 3? 'Xiao Ming' : 'Normal'}} <! Function calls can also be used as expressions. --> </div>Copy the code

  • Can I fill in anything else? No, No, the following are not acceptable:

    <div id="app"> <! > {{var Deng = 'shuaige'; console.log(deng) }} <! - process control also can not - > {{if (Deng. Looks = = = 'shuai') {the console. The log (' impossible ')}}} < / div >Copy the code

  • Remember: In interpolation, you can write: data, JS data, expressions, and nothing else.

  • Note that whenever data is used in the interpolation, it must be declared in data, otherwise an error will be reported

    <! <div id="app"> {{mrCheng}} </div>Copy the code
    Const vm = new Vue({el: '#app', data: {mrDeng: 'Xiao Ming: beautiful, beautiful'}})Copy the code

  • Another possibility is to use undeclared data and not report an error:

    <! -- No error now, why? -- > <! Not found in scope, error --> <! -- undefined --> <! <div id="app"> {{mrDeng. Wife}} </div>Copy the code
    Const vm = new Vue({el: '#app', data: {mrDeng: {name: '小明', age: 80, height: '140cm', weight: '100kg'}}})Copy the code

The response formula of VUE is -1

  • The data changes and the page is re-rendered
  • How do I change the data? so easy
  <div id="app">
    {{ mrDeng }}
  </div>
Copy the code
Const vm = new Vue({el: '#app', data: {mrDeng: 'Xiao Ming: beautiful, beautiful'}}); MrDeng = 'hands like catkin, skin like fat '; // Witness the magic moment, the page changesCopy the code
  • Q: Why does data appear directly in a VM instance object?

A: When a VUE instance is created, vUE proxies members of data to the vue instance in order to be responsive, monitor data changes, and perform certain listening functions (how? Think about it, hint: Object.defineProperty, try implementing it)

  • Q: What else is in an instance besides data?

To prevent name collisions. Because the data in data will be proxy to VUE, if the data name written by ourselves conflicts with the attribute in VUE, then the attribute inside VUE will be overwritten. Therefore, VUE will add or before the attribute member name, if “or” is added, if “or” is added, if “is added, if” is added, if “is added, if” is added, if “is added, if” is added, if “is added, if” is added, if “is added, if” is added, if “is added, if” is added, if “is added, if” is added, The representation is something we can use, and if we add _, it’s a method or property that vue uses internally, we don’t need to call it

  • The changed data must be existing data, otherwise the page cannot be rerendered because it cannot listen, as in:
<! <div id="app"> {{mrDeng. Wife}} </div>Copy the code
Const vm = new Vue({el: '#app', data: {mrDeng: {name: 'xiaomin ', age: 80, height: '140cm', weight: '100kg' } } }) vm.mrDeng.wife = 'liu';Copy the code
  • The changed data must already be rendered, otherwise the page will not be rerendered for performance reasons, as in:
<! <div id="app"> {{mrDeng. Wife}} </div>Copy the code
Const vm = new Vue({el: '#app', data: {MSG: 'xiao Ming ', mrDeng: {name:' Xiao Ming ', age: 80, height: '140cm', weight: '100kg' } } }) vm.mrDeng.wife = 'liu'; Vm. MSG = 'Xiaoming: the hands are catkin and skin is congeted fat ';Copy the code
  • Will the page be rerendered immediately after changing the data?

Vue updates the DOM asynchronously. As long as it listens for changes, an asynchronous queue is opened. If a data is changed multiple times, it is pushed to the queue only once, avoiding unnecessary calculations and DOM manipulation.

After the synchronous execution stack completes, the asynchronous queue is executed

<div id="app">{{ msg }}</div>
Copy the code
Const vm = new Vue({el: '#app', data: {MSG: '#app'}}) vm. console.log(vm.msg); // Console. log(vm.$el.innerhtml); / / shanshan. The page has not yet been re-renderedCopy the code

vm.$el

  • The value is the element controlled by Vue (or the element mounted by Vue)

vm.$nextTick & Vue.nextTick

  • How do I see the values on the rendered page after changing the data?

A: With vm.nextTick or vue. nextTick, it will execute vm.nextTick or vue. nextTick as soon as the page is re-rendered and the DOM is updated. Vm. nextTick is executed immediately after the page is re-rendered and the DOM is updated

<div id="app">{{ msg }}</div>
Copy the code
Const vm = new Vue({el: '#app', data: {MSG: '#app'}}) vm. console.log(vm.msg); $nextTick(() => {console.log(vm.$el.innerhtml); NextTick Vue. NextTick (() => {console.log(vm.$el.innerhtml); })Copy the code
  • Vm. nextTick and vue. nextTick can also be used as promises
<div id="app">{{ msg }}</div>
Copy the code
Const vm = new Vue({el: '#app', data: {MSG: '#app'}}) vm. $nextTick(). Then (() => {console.log(vm.$el.innerhtml); NextTick vue.nexttick ().then(() => {console.log(vm.$el.innerhtml); })Copy the code
  • What is the difference between vm.$nextTick and vue. nextTick?

The this of vue. nextTick internal function points to the window

  Vue.nextTick(function () {
    console.log(this);  // window
  })
Copy the code

The this of the vm.$nextTick internal function points to the Vue instance object

vm.$nextTick(function () { console.log(this); // vm instance})Copy the code

  • Curious how nextTick works?

  • Asynchronous tasks are divided into macro tasks and micro tasks.

  • Macro tasks are slow (e.g. SetTimeout, etc.) and micro tasks are fast (e.g. Promise.then(), etc.)

  • Microtasks first, macros second (eventloop)

    // Console print order: promise > timeout setTimeout(() => {console.log('timeout'); }, 0) Promise.resolve().then(() => { console.log('promise'); })Copy the code

  • In the nextTick implementation source code, it will determine whether microtasks are supported first, and then execute macro tasks if they are not

    if(typeof Promise ! Const p = promise.resolve (); const p = promise.resolve (); } else if(typeof MutationObserver ! Vue == 'undefined') {// vue == 'undefined') { Else if(Typeof setImmediate!) {typeof setImmediate! == 'undefined') {// macro task // only in IE} else {// macro task // if none of the above can be executed, then setTimeout will be called.Copy the code

  • Macro tasks that have been used by VUE

    • MessageChannel MessageChannel macro task

The response formula of VUE is -2

  • Besides undeclared and unrendered data, what other data changes do not render the page?

    1. When setting an array item directly using an index:

    <! The array still displays 3 items even after the fourth item is added to the array. <div id="app">{{list}}</div>Copy the code
    Const vm = new Vue({el: '#app' data: {dengFamily: [' dengge ', 'liu ',' Wang Bao ']}}) vm. // Not responsiveCopy the code

    2. Change the length of array:

    <! - change the array length, array still shows 1 item - > < div id = "app" > {{list}} < / div >Copy the code
    Const vm = new Vue({el: '#app' data: {dengWife: ['小 小 ']}}) vm. // Not responsiveCopy the code

    3. Add or delete objects:

    <! <div id="app">{{deng}}</div>Copy the code
    Const vm = new Vue({el: '#app' data: {deng: {wife: '小 liu ', son: '王小宝', weight: '100kg', height: '140cm', age: 60}}}) vm. Deng. SecondWife = 'hammer sister '; // Not reactive delete vm.deng.height; // Not responsiveCopy the code

  • Q: How do I update arrays and objects in response?

    Change the array:

    1. Use array variation methods: push, POP, Shift, unshift, splice, sort, reverse
    2. Use the vm.$set/ vue.set instance method
    3. Use vm.$set or vue. set to remove an item from the array

    Vue. Set (object, propertyName, value) Vue. Set (object, propertyName, value)

    Vue. Delete (object, target) Vue. Delete (whose value to delete, which value to delete) Vue.

    <! - since then, three live a happy life -- -- > < div id = "app" > {{list}} < / div >Copy the code
    Const vm = new Vue({el: '#app' data: {dengFamily: ['小 小 ', '小 小 ', '小 小 ']}}) $set vm.$set(vm.dengFamily, 3, 'dengFamily ');Copy the code
    <! <div id="app">{{list}}</div>Copy the code
    Const vm = new Vue({el: '#app' data: {dengWife: ['小 liu ']}})Copy the code

    Change object: \

    1. Add method \ using vm.$set/ vue. set instance
    2. Delete using the vm.$delete/ vue. delete method
    <div id="app">{{ deng }}</div>
Copy the code
    Const vm = new Vue({el: '#app' data: {deng: {wife: '小 liu ', son: '王小宝', weight: '100kg', height: '140cm', age: 60}}}) / / add vm. $set (vm) deng, 'secondWife', 'the hammer sister'); $delete(vm. Deng, 'height')Copy the code

  • Conclusion:

    Set and vm.set and vm.set and vm.delete

  • Problem solved, but why?

    DefineProperty, let’s talk about it next class

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤

Welcome to discuss in the comments section, the excavation officials will draw 100 pieces of excavation objects in the comments section after the excavation project activity is over, see the details of the lucky draw in the event article, you like to discuss!!