Software framework - vue

1. Vue framework

• The front-end framework, the progressive framework, has a bottom-up hierarchy. There are three main frameworks on the front end, react, anglejs, and vue.

Two, the content of the vue framework

• There are many contents, and its design pattern adopts MVVM, M is the model, V is the view, VM is the model view, and the VM is closely combined together called two-way binding. Two-way binding means that the view changes when the data changes, and when the content of the view changes, the corresponding data also changes.
• An instance of vue, all content related to vue must be represented by an instance of vue, and we use vue to program in the instance of vue. Therefore, everything that needs to be learned is included in the vue example.

3. How to construct a web page designed with vue

1. Create a webpage, add a div with id="app" in the webpage as a vue template; create a vue instance object in <script>, and specify the el attribute as "#app".

2. Define the variables needed for this page in the vue instance. This method uses an object named data to represent or include various types of variables. These variables can be simple types, object types, or Arrays, etc., the data here can be used as a model of vue.

3. When the variable is determined, the variable can be used on the page, which itself is a part of page rendering.

   • Use interpolation expressions to render data. { {variable name}}
   • Use the v-text attribute to render data. For example <span v-text="age"></span>
   • Using v-model to bind data in form controls can achieve two-way binding.

4. Implement two-way binding between controls and data

5. create event function

   • Use v-on:event name="" inside the element to specify the event function or method. Can be abbreviated as @click=""
   • The event function should be written in the methods object of the vue instance, and the function can be specified by the event attribute.

6. Use the vue directive in the page.

   • conditional branch

     • <h3 v-if="age > 25">{
                
                {name}}比较老</h3>
       <h3 v-if="age <= 25">{
                
                {name}}比较小</h3>
       

   • loop or iterate

     • <h4 v-for="(item,index) in list" :key="index">{
                
                {item}}</h4>
       

     • The :key attribute is equivalent to the primary key value. When the page is rendered for the first time, the values ​​of the list have been arranged in a fixed order. Each item does not have a unique identifier to represent it. When the order of the array changes, the content on the page order will not change. If a key is added and a unique identifier is assigned to each item, when the order of the array changes, the content will also change accordingly.

7. When using the vue framework, the life cycle of the page.

   • There are several stages in the life cycle. Combining these stages, we can use the hook function provided by vue.
   • The hook function corresponds to each stage, and when the life cycle reaches a certain stage, the corresponding hook function will be executed automatically.
   • For example, after the vue instance is created, it goes to the created stage. If we specify the hook function created(), the function will be called and executed.
   • Data in vue can be manipulated in the hook function.
   • In the project, the most frequently used hook is the created() hook. At this time, the vue instance has been created, so we can use the variables in it, initialize the variables, and call other functions to complete some preliminary work. That is, if a web page needs to do some preliminary work before it can be used, a hook is used.

4. node.js and npm

• node.js is a js execution platform based on the v8 version of chrome, and the background code written in js can be executed based on node.js.
• npm is a package management tool.
• Axios is a package file of the node.js platform, which encapsulates various operations of ajax, and we can use it to realize the function of ajax.

5. elementUI framework ( https://element.eleme.cn/ )

• This is a UI framework. The UI framework will provide a large number of controls that can be used on the web page. We can directly use these components on the web page when designing.
• How to get the components we need on the official website:
  • All components are arranged in categories;
  • All components have case demonstrations;
  • All cases have source code, directly copying the source code is the fastest way.