Introduction

 is a progressive JavaScript framework, Vue is designed to be applied layer by layer from the bottom up

MVC mode (back-end concept)
M: model data model (data storage)
V: View view (user interface)
C: controller controller (business logic)

MVVM mode (front-end concept)
M: model data model (data storage, data processing business logic)
V: View view (user interface, display data, interact with users)
VM: View Model The bridge between the data model and the view

The biggest feature of MVVM mode is to support two-way data transfer: M -> VM ->V, V -> VM -> M

Vue uses the MVVM model:
Controlled area: View
Vue instance object: View Model
Data in the instance object: Model

The plug-in Vue-devtools can be installed in the browser to cooperate with development
github URL: https://github.com/vuejs/vue-devtools

compatibility:
Vue does not support IE8 and below (ES5 features that IE8 used by Vue cannot emulate)

Official website: https://cn.vuejs.org/

Complete learning Vue: HTML+CSS, JavaScript, CSS3, HTML5, third-party libraries, network communication, ES6+ (including ES2015, ES2018,...), webpack, modularity (CommonJS, ES6 Module, AMD, CMD are common , UMD), package manager, CSS pre-compiler

Vue features: progressive, componentized, and responsive

Application scenarios of Vue: some pages in the foreground and all pages in the background

Scaffolding to build a Vue project: Vue-cli, webpack-simple, manual build

Introducing Vue.js

script tag introduction: <script src='vue.js'></script>

CDN introduction: <script src="https://cdn.jsdelivr.net/npm/vue"></script> (production environment version, optimized for size and speed)
         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> (Development environment version, including helpful command line warnings)

Declarative rendering

Vue instance object:
let vue=new Vue({ //Create a Vue instance object
    el:'xxx (id name, class name...)', //Tell Vue instance object, which area of ​​the interface needs to be controlled in the future
    data:{ //Tell the Vue instance object, what is the data of the controlled area
      ...
    },
})

e.g.
<div id="app">
    {{ message }}
</div>
var app = new Vue({
    el:'#app',
    data: {
        message:'Hello Vue!'
    }
})

Injection: Part of the content in the configuration object will be extracted to the vue instance: data, methods,...
Two purposes of injection:
1.Complete data response: How does vue know that the data has been changed? (Vue2.0 is the data response type through the Object.defineProperty method.Vue3.0 is the data response type completed through the Class Proxy)
                  Object.defineProperty cannot perceive the addition and deletion of properties.Class Proxy solves these shortcomings.
2.Binding this: this points to the vue instance

About the virtual DOM tree

In order to improve rendering efficiency, vue will compile the template into a virtual DOM tree, and then generate the real DOM
When the data changes, it will be recompiled into a virtual DOM tree, and then the two trees before and after are compared, and only the difference is reflected in the real DOM, so that the real DOM can be changed to a minimum and the page efficiency can be improved.

For Vue, there are two key points to improve efficiency:
1.Reduce new virtual DOM generation
2.Make sure that only the necessary nodes have changed after the comparison

Vue provides multiple ways to generate a virtual DOM tree:
1.Write directly inside the mounted element.At this time, the outerHTML of the element will be used as the template
2.Write in the template configuration
3.In the render configuration, use the function to directly create the virtual node tree.At this time, completely out of the template, the compilation step will be omitted: render(h){return h('element node','xxx')}, render(h){return h('element node',[h('child node','xxx')]))
The above steps are gradually increased in priority from top to bottom

The virtual node tree must be single-rooted

Place the generated real DOM tree at an element location, which is called mounting
Mounting method:
1.Configure via el:'css selector'
2.Configure via vue instance.$mount('css selector')

Vue instructions

1.v-if, v-else, v-else-if: conditional statement
    <div v-if='xxx'>
        xxxxxxx
    </div>
    <div v-else-if='xxx'>
        xxxxxxx
    </div>
    <div v-else='xxx'>
        xxxxxxx
    </div>

2.v-show: display (change display)
    <div v-show='xxx (display if the result is true, not display if false)'>
        xxxxxxx
    </div>

3.v-for: loop (array, object, number, character)
   <div v-for="item in items">
        {{ item.xxx }}
   </div>
   <div v-for="(item, index) in items1">...</div>
   <div v-for="(val, key) in object">...</div>
   <div v-for="(val, name, index) in object">...</div>
    var app = new Vue({
        el:'#app',
        data: {
            items:['1','2','3'],
            items1:[
                {
                    name:'xx',
                    age:'xx'
                },
                {
                    name:'xx',
                    age:'xx'
                },
            ],
            object:{
                name:'xxx',
                age:'xx',
                work:'xxx',
                married:'xx'
             }
        }
    })
    
    v-for note:
    1.When v-for renders elements, it will first check if there are any elements that need to be rendered in the cache
    2.If there is no element to be rendered in the cache, a new one will be created and placed in the cache.
       If there is an element that needs to be rendered in the cache, a new one will not be created, but the original one will be reused directly
    3.As long as the data changes in vue, it will automatically re-render
    
    You can bind a unique identifier in the for loop to prevent errors when re-rendering new data: <div v-for="(item, index) in items1" :key='xxx (It is better not to use index as The unique key will also change the data)'>...</div>
    
   

4.v-text and v-html: update the textContent and innerHTML of the element
   <span v-text="msg"></span> => <span>{{msg}}</span>
   <div v-html="html sentence"></div>

5.v-on: event binding event (abbreviation @)
    <button v-on:click='alert('1')'>add</button>
    <button v-on:click='add'>add</button> / <button @click='add'>add</button>
    <button @click='aa(2,$event)'>add</button>
    var app = new Vue({
        el:'#app',
        methods:{
            add(){...},
            aa(n,e){...}
        }
    })
    Modifiers on event:
  .stop-call `event.stopPropagation()` to prevent bubbling from happening
  .prevent-call `event.preventDefault()` to prevent the default event from occurring
  .capture-Make event bubbling into event capture by default
  .self-the callback is only triggered when the event is triggered from the element itself bound to the listener
  .{keyCode | keyAlias}-The callback is only triggered when the event is triggered from a specific key
  .native-listen to the native event of the root element of the component
  .once-trigger the callback only once
  .left-(2.2.0) Only triggered when the left mouse button is clicked
  .right-(2.2.0) Only triggered when the right mouse button is clicked
  .middle-(2.2.0) Only triggered when the middle mouse button is clicked
  .passive-(2.3.0) Add a listener in `{ passive: true }` mode
    Partial usage: <input @keyup.enter="xxx">
             <button v-on:click.once="xxx"></button>

6.v-model: Create two-way binding on form controls or components
   <input type='text' v-model='num'>
   var app = new Vue({
        el:'#app',
        data:{
            num:2
        }
    })
    At this time, the text value of the input box is 2
    
7.v-bind: Bind data to element attributes.Dynamically bind one or more attributes, or a component prop to an expression (abbreviation: :)
   <img :src='imgSrc'> (binding attribute)
   <img :src="'/path/xx'+filename"> (inline string splicing)
   <div :class='xxx'> (binding of class)
 ...
   Some modifiers:
 .prop-Binding as a DOM property rather than as an attribute.
 .camel-(2.1.0+) Convert the kebab-case attribute name to camelCase.(Supported since 2.1.0)
 .sync (2.3.0+) Syntactic sugar, will be expanded into a `v-on` listener that updates the binding value of the parent component.

8.v-pre: Skip the compilation process of this element and its child elements (output as it is)
   <span v-pre>{{ this will not be compiled }}</span>
   
9.v-cloak: This instruction remains on the element until the completion of the associated instance compilation (displayed after rendering is complete)
            When the network is slow and the web page is still loading Vue.js, and Vue is too late to render, then the page will display the Vue source code.We can use the v-cloak command to solve this problem
            If used with CSS `[v-cloak] {display: none }`, this command can hide uncompiled Mustache tags until the instance is ready
    css: [v-cloak] {
            display: none;
         }
         
    HTML: <div v-cloak>
              {{ message }}
           </div>
           
10.v-once: render elements and components only once
    <span v-once>This will never change: {{msg}}</span>
    
11.v-slot: Slot.Provide named slots or slots that need to receive props.(abbreviation:#)
    <!-- Named slot -->
    //When the component is called
    <MyFooter v-red :age.sync="age">
        <template v-slot:footer> //here v-slot: the value behind corresponds to the name attribute of the slot in the component, which is the name of the slot.
            <div>list</div>
        </template>
    </MyFooter>
   //When writing components
   <template>
        <div>
            {{age}}
            <div>
                <slot name='footer' /> //The value of name here is the name of this slot.
            </div>
        </div>
   </template>
   
   <!-- Named slot that receives prop -->
    //Component call
    <ul>
        <myli :title="val.title">
            <template v-slot:footer="message (custom name)">
                <div>{{message.t}}</div>
            </template>
        </myli>
    </ul>
    //When writing components
    <template>
        <li>
            <slot name='footer' :t="title">
            </slot>
        </li>
    </template>
    
12.Binding class name:
    I want to find the corresponding class in style and bind it to the element: :class=['xxx',...]
    <div :class="['xxx',...]"></div>
    The ternary operator can be used to bind the class name on demand: <div :class="['xxx',flag?'Xx':'xxxx',...]"></div>
    The object can be used to determine whether to bind the class name: <div :class="['xxx',{'xx': true/false},...]"></div>
    You can add an object to the data of the Vue instance object, including the class name value that needs to be bound: <div :class="obj"></div>
                                                         data{
                                                           obj:{
                                                                'xxx':true,
                                                                'xx':false,
                                                                'xx':true,
                                                              ...
                                                               }
                                                          }
                                                
13.Binding style:
    Similar to the binding class name (if there is a'-' in the attribute name, the attribute name must be quoted with'')
    <div :style="{Attribute name:'Attribute value',...}"></div>
    You can also define an object (including attribute name and attribute value) in data as if binding the class name: <div :style="obj"></div>
    If there are multiple objects, put them in the array: <div :style="[obj,obj1,...]"></div>

Special attributes

key: This attribute can interfere with the diff algorithm.At the same level, nodes with the same key value will be compared, but nodes with different key values ​​will not
Applicable scenarios:
1.Switch the login method (application key will not only change the label, it will change the label, the old node will be removed, and the new node will be generated)
<div v-if="loginType==='mobile'">
    <label>Mobile phone number</label>
    <input type='text' key='1'>
</div>
<div v-else>
    <label>Mailbox</label>
    <input type='text' key='2'>
</div>
2.Among the nodes generated in a loop, each node is given a unique and stable key value
<div v-for="(item, index) in items1" :key='xxx (It is better not to use index as the only key, which will also change the data)'>...</div>

Vue custom instructions

Customized global directives:
Vue.directive('command name',(el,binding,vnode)=>());
Analysis of each parameter:
el: The element bound by the instruction can be used to directly manipulate the DOM
binding: an object containing the following property: name (command name, excluding the `v-` prefix)
                                     value (the bound value of the instruction, for example: in `v-my-directive="1 + 1"`, the bound value is 2)
                                     oldValue (the previous value bound by the instruction, only available in the `update` and `componentUpdated` hooks.It is available regardless of whether the value has changed)
                                     expression (instruction expression in string form.For example, in `v-my-directive="1 + 1"`, the expression is `"1 + 1"`)
                                     arg (parameter passed to the instruction, optional.For example, in `v-my-directive:foo`, the parameter is `"foo"`)
                                     modifiers (an object containing modifiers.For example: in `v-my-directive.foo.bar`, the modifier object is `{ foo: true, bar: true }`)
vnode: the virtual node generated by Vue compilation

e.g.<div v-changecolor='red'></div>
     Vue.directive('changecolor',(el,binding,vnode)=>{el.style.background=binding.value})
     
A directive defines several hook functions provided by the object:
bind:function(){}: Called only once, when the instruction is bound to the element for the first time.One-time initialization settings can be performed here
inserted:function(){}: called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document)
update:function(){}: Called when the VNode of the component is updated, but it may happen before its child VNode is updated.The value of the instruction may or may not have changed.But you can compare before and after the update