Article Directory
foreword
Overview : Vue is a front-end progressive framework that can improve the efficiency of front-end development.
Features :
Vue can realize the two-way binding between the view and the model through the MVVM mode.
Simply put, when the data changes, the page will automatically refresh, and when the page changes, the data will also automatically change.
1. What is Vue?
Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces . [5] Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to use, but also easy to integrate with third-party libraries or existing projects. On the other hand, Vue is also fully capable of powering complex single-page applications ( SPAs ) when combined with a modern toolchain and various supporting libraries .
2. Use steps
1. Install Vue
We can download vue.js directly from the official website of Vue.js, and reference it in the <script> tag in .html. -> <script src = ../vue.js> </script> Do not use the minimal compressed version in the development environment, otherwise there will be no error prompts and warnings! (Directly use vue multi-page development in the page:
1. Introduce vue.js
2. Create a vue root instance new Vue({option})
2. Instantiation
1. The content in the app is called a template
2. The attributes starting with v- are called template instructions
3. Link html templates and js through instructions
3. Built-in commands
The special attribute at the beginning of the built-in instruction v-, which is related to the html template and the JavaScript data type
Text rendering: v-text, v-html, { {}}
Attribute rendering: v-bind: attribute name = 'value' / : attribute name = 'value'
Conditional rendering: v-if, v-else-if, v-else, v-show, v-if
Notice:
1. v-show hides nodes through css method
2. v-if directly removes nodes to hide
3. If you frequently switch between display and hide, use v-show
4. Occasionally switch between display and hide with v-if
List rendering:
v-for='(item,index) in list' :key='item' (the current data of the item variable, the current subscript of the index)
The key attribute is to allow Vue to give a unique identifier to the traversed nodes internally, so as to better go (sorting, filtering and other operations). For performance optimization, the value of the key must be unique 
Traverse objects
v-for='(value,key) in obj'
When using v-for and v-if at the same time, you need to use template
