Introduction to Vue basics

Vue. Js is introduced

What is vue.js?

• Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up.
• Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.
• Bottom-up application: The goal of an incremental framework is to facilitate incremental project development (plug and play).
• Official website: cn.vuejs.org/v2/guide/ Author You Yuxi is Chinese.

Why use Vue?

1. Declarative rendering: Front and back end separation is the future
2. Progressive framework: Suitable for a variety of business needs
3. Simple and easy to learn: Chinese developed, Chinese documents, no language barrier, easy to understand and learn

Vue. Js

The use of Vue. Js

1. In HTML pages using script to introduce vue.js library can be used.

Remote CDN <script SRC ="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> Local <script SRC ="vue.min.js"></script>
Copy the code

2.Vue-cli scaffolding: It is easy to create vue.js prototypes using the CLI script scaffolding provided by vue.jsCopy the code

• {{}}: interpolation
  1. What does interpolation do? Interpolation cannot be used in nodes that are normally used to retrieve data attributes defined in Vue instances
• El: the mount point
  1. What does EL do? Defines the element node to which the Vue instance is mounted, indicating that Vue takes over the region
  2. What is the scope of Vue? Vue manages the elements hit by the EL option, as well as the internal elements
  3. El Can other selectors be used when selecting mount points? Yes, but the ID selector is recommended
  4. Can other DOM elements be associated? You can, but it is recommended to use DIV instead of HTML and Body tags
• Data: indicates a data object
  1. The data used in Vue is defined in Data
  2. Complex types can be written to data
  3. Follow THE JS syntax when rendering complex type data

Benefits of declarative rendering

Declarative rendering in Vue simply means that we declare data and Vue renders it to HTML for us.

Vue common commands

Directives are special attributes with a V – prefix, according to the website. DOM elements are manipulated by instructions

• The v-text command is used to obtain data and set the label content. Note: The default is to replace everything, but you can use the interpolation {{}} to replace anything specified.

• The V-HTML directive sets the innerHTML of an element (you can write new tags to the element).

• The V-ON directive binds events to elements, such as V-on :click, which can be shortened to @click=” method “. The bound methods are defined in the method property of the VUE instance

• Function of the v-show command: the v-show command, according to the true or false value, switch the display state of the element

• The V-if directive toggles the display and hide of elements (manipulating DOM elements), depending on whether the values expressed are true or false.

• The v-bind directive sets the attributes of an element (e.g. SRC,title,class).

• The V-for directive generates a list structure based on data

• The V-ON directive complements the passing of custom parameters: function calls pass parameters event modifiers: limits how events can be fired

• The MVVM pattern

  • MVVM, short for Model-View-ViewModel, is an architectural pattern based on front-end development.
  • The MVVM pattern interprets the page, layered with M, V, and VM, as:
    • Model: Responsible for data storage
    • View: Responsible for page display
    • View Model: Handles business logic (such as Ajax requests), processes data and presents it to the View

• The v-mode directive gets and sets the value of a form element (two-way data binding).

  • Two-way data binding
    • One-way binding: We bind the Model to the View, and when we update the Model with JavaScript code, the View updates automatically.
    • Two-way binding: When the user updates the View, the Model’s data is automatically updated. This is called two-way binding.
  • When can a user update a View?
    • Filling out forms is the most straightforward example. When the user fills in the form, the View’s state is updated. If the MVVM framework can automatically update the Model’s state, then we have bidirectionally bound the Model and View:

axios

Axios introduction

VUE combined with network data for application development

• Web request libraries are very popular right now, specifically for sending requests, but they are also ajax inside, which makes them easier to use when wrapped
• What AXIos does: It helps you send asynchronous Ajax requests in the browser.
• After Vue2.0, Yu Creek recommends replacing JQuery Ajax with AXIos

Resolve the page flicker problem

• The v-cloak command displays the Vue source code when the web is slow and the page is still loading vue.js. We can solve this problem with the V-cloak directive.

1. Add the style

<style> 
    /* Add v-cloak */ via the property selector 
    [v-cloak] { 
        display: none; 
    } 
</style>
Copy the code

2. Add a V-cloak to the div whose ID is app

<div class="wrap" id="app" v-cloak>
Copy the code

Computed properties

What are computed attributes

In Vue applications, some data or expressions are bidirectionally bound in the template, but if the expression is too long or the logic is more complex, it can become bloated and even difficult to maintain and read, as shown in the following code:

<div> Expression in double parentheses is too long to read {{text.split(', ').reverse().join(', '}} </div> split this text.split()', ').reverse().join(', ') into the calculated property, and finally returns a result valueCopy the code

Uses of computed data: Reduce the number of operations and cache the results. Used to repeat the same calculation.

The computed conclusion

1. Defining functions can also achieve the same effect as calculating properties, both simplifying operations.
2. The difference is that computed attributes are cached based on their reactive dependencies. They are reevaluated only when the associated reactive dependencies change.

The filter filter

What is a filter

• Filter is to display the data to do further filtering processing, and then display, it is worth noting that the filter does not change the original data, just on the basis of the original data to generate new data.
• Data processing workshop, the value of screening processing.

Filter position

1. Interpolation in double parentheses

{{MSG | filterA}} MSG is need to deal with data, filterA is filter, | the vertical bar is the pipe, the data transmission through the pipe to filter for filtering processing operationCopy the code

2. V-bind where the value of the binding is.

<h1 v-bind:id=" msg | filterA"> {{ msg }} </h1>
Copy the code

The filter

Local filter 2. Global filter

conclusion

1. Filters are often used to handle text formatting operations. Filters can be used in two places: double curly brace interpolation and V-bind expressions
2. Filters should be added to the end of JavaScript expressions, indicated by the “pipe” symbol

Watch the listener

What is a listener

• Vue.js provides a method, Watch, which is used to observe data changes on Vue instances.
• What it does: You can use the listening property when you have some data that needs to change with other data

Component components

Component is introduced

• A Component is a custom wrapped function. In the front-end development process, it often appears that the functions of multiple web pages are repeated, and many different pages, also exist the same function.
• We extract the same functionality and encapsulate it into components so that the front end can write the code once and import it anywhere in componentized development.
• Component systems allow us to build large applications with individual reusable components, and the interface of almost any type of application can be abstracted into a tree of components

Global components

Syntax format:

Vue.component("Component Name", { 
    template: "HTML code".// The HTML structure code of the component
    data(){ // Component data
        return{}},methods: { // The associated js method of the componentThe method name () {// Logical code}}})Copy the code

Note:

1. Component names start with lower case and are named with a dash: for example, hello-word
2. Data in a component must be a function, distinguished from data in a Vue instance
3. In the template template, there can be only one root element

Local components

• In contrast to global components, local components can only be invoked within the same instance. Local components are written in much the same way as global components. The only difference is that local components are written in Vue instances.

new Vue({ 
    el: "#app".componentsComponent name: {// Component structure
            template: "HTML code"./ / data data
            data() { return { msg:"xxxx"}; }},}});Copy the code

Note: when creating a local component, note the components with an ‘s’ at the end, while global components do not use + ‘s’. This means that multiple components can be created in components.

Component separated from template

Because it is inconvenient and unappealing to write HTML inside components, write them separately.

<body> 
    <div id="app"> 
        <web-msg></web-msg> 
    </div><! Write the template in HTML, give the template an ID --><template id="tmp1"> 
        <div> 
            <button @click="show">{{msg}}</button> 
        </div> 
    </template> 
</body> 

<script src="./vue.min.js"></script> 
<script> 
    var VM = new Vue({ 
        el: "#app".components: { 
            "web-msg": { 
                template: "#tmp1".data() { 
                    return { 
                        msg: "Click query"}; },methods: { 
                    show() { 
                        alert("Checking, please wait..."); }},},"web-msg2": {},}});</script>
Copy the code

Conclusion:

1. In this case, the browser filters out the TEMPLATE tag in HTML. So the contents of the template tag are not displayed on the page. Until it is called by Vue in JS.
2. In HTML, the template tag must have an ID, because the id is most directly selected. All parameters such as data and methods should be written in Vue instance

Vue life cycle

Introduction to hook functions

Hook functions in the lifecycle hook functions: Hook functions catch an event at the system level when it is fired and then do something about it

Vue Router routing

What is routing?

• In Web development, routing refers to allocation to the corresponding handler based on the URL. Routing allows us to access different content through different urls.
• Single Page Web Application (SPA) can be implemented with vue.js

What is SPA?

• A single Page Web application (SPA) is a single Web page application that loads a single HTML page and dynamically updates the page as the user interacts with the application.
• A single page app has no page hops and only one HTML page. Our traditional sense of page hopping has been transformed by the concept of a single page application to replace and update some elements within the body, for example:
• The content of the entire body changes from the login component to the welcome page component, which visually feels like the page has been jumped. In reality, however, the page is only partially updated as the user manipulates it, still in the index.html page.
• Benefits of a single page application:

1. User experience is good, users do not need to refresh the page, the entire interaction process is through Ajax to operate.
2. It is suitable for the separated development of the front and back ends. The server side provides HTTP interface, and the front end requests HTTP interface to obtain data and uses JS for client rendering.

Routing related concepts

• Router: is the official route manager of vue. js. Its deep integration with vue.js core makes building a single page application (SPA) a piece of cake. The Router acts as a manager, managing routes.
• Route: ruter is a router and route is a route. For example, the Home button => Home content, which is a route, and the news button => News content, which is another route.
• Routes: a group of routes. The routes are combined to form an array. [{home button => Home content}, {about button => About content}]
• Router-link component: Router-link is a component that encapsulates labels. This component is used to set up a navigation link that switches between different HTML content. The to attribute is the target address, which is the content to display
• Router-view component: The router navigates to the specified component and renders the page.

Routing summary

1. A router is a route manager object in a Vue that manages routes.
2. Route is a route object. A route corresponds to an access path. A group of routes is represented by routes
3. Every routing object has two parts: path and Component
4. Router-link encapsulates the A tag and uses the to attribute to specify a connection
5. Router-view Displays the router page after the specified component is accessed