This is the 24th day of my participation in Gwen Challenge
I. Overview of VUE
– Vue.js is a progressive framework for building data-driven Web interfaces
– Vue.js aims to implement data binding and composite view components for responses through as simple an API as possible
– Core is a responsive data binding system
Ii. Use and download of VUE
Vue.js address: cn.vuejs.org/v2/guide/in…
Common HTML tags
Tags that come in pairs
< h1 > h1 tags < / h1 >
The <div>div tag can hold other tags inside </div>
<p> P tags are container tags that can hold other tags inside, paragraph tags </p>
A single tag
Four, apply colours to a drawing
Conditions apply colours to a drawing
• V-if: Conditional rendering. When the instruction expression is true, _x0008_ is rendered, either with div tags or templates elements
• V-else: Must be immediately followed by an element with either v-if or V-else -if
• V-else -if: Must be followed by v-if
The list of rendering
• V-for: Renders a list based on an array. Special syntax for the item in items form, where items are the source data array and item is the alias of the array element being iterated over. Item can be an attribute, object, or index.
5. Event handling
V-on V-bind: The binding event that runs some JavaScript code when triggered can be used in conjunction with modifiers
V-on: @, v-bind:
Event modifiers:
. Stop Common events
.prevent
.capture
.self
.once
.passive
Common event
• Click () Mouse click
• Blur () elements lose focus
• The focus() element gets focus
• Mouseover () mouse entry (entry child is also triggered)
• Mouseout () mouse away (leaving child element also triggers)
• Ready () DOM is loaded
Sixth, the refs
• V-model (input value, String, bidirectional binding)
• Size (size, String, medium/small/mini)
[{key:1, value: XXX}]]
Seperator (separator, the String, such as, ‘and’, ‘|’, ‘-‘)
• Multiple (whether multiple selection is supported, Boolean)
• placeholder (hint, String)
Form input binding
• V-model: Directives to create two-way data binding on form <input>, <textarea>, and < SELECT > elements. It automatically selects the correct method to update the element based on the control type
– <label> Indicates the text label of a form element and defines the text label
– the <input> tag represents the user input tag of the form element and defines different types of user input data
The type attribute
– type=”text” Defines a single-line text input box
– type=”password” Defines the password input box
– type=”radio” Defines an optional box
– type=”checkbox” defines a checkbox
– type=”file” Defines the file to be uploaded
– type=”submit” Defines the submit button
– type=”reset” Defines the reset button
– type=”button” Defines a common button
– <textarea> tag represents a multi-line text input field for a form element. The tag defines a multi-line text input field
– < SELECT > tag represents the drop-down list of form elements. The tag defines the drop-down list
– the <option> tag and the <select> tag define the options in the drop-down list
Viii. Project construction
Development environment: idea or vscode
Environment building:
-
Installing the Node Environment
-
Vue project environment
Basic knowledge preparation:
-
html
-
Js, jquery, javascript, Axios
-
Vue framework
4. UI component: element-UI
Vue components
* Components are one of the most powerful features of vue.js
* Components can encapsulate reusable code
Components are all instances of Vue, accept the same option object, and provide the same lifecycle hooks
– Official website element.eleme.cn/#/zh-CN/com…
– Element-UI encapsulates styles as single-file components that can be called directly in the project – main directory
Page call structure
– Folder 1(SRC), the development directory
– Folder Components: All.vue single file components are in this directory
– Folder Router: Indicates that the routes of single-file components are in this directory
– Folder 2(static), static resources directory, all CSS, JS files in this folder
– Folder 3(dist), the package and distribution folder of the project, where the compiled project files are stored
The directories
– node_modules is the node package directory
– config indicates the configuration directory
– Build is the directory on which the project is packaged
Single file component
• Single-file component: Write the HTML, CSS, and JS related to a component in a separate file
• A component has complete functionality for structure, presentation, and behavior
• Facilitate random composition between components and reuse of components
• File name extension. Vue
• Note: The js code in the file must have Spaces and cannot end with a semicolon
In the component, data is a function, not a dictionary, and must return a dictionary,
The component template can contain only one tag of the trailing element. Multiple tags are required, and div can be nested
Master file index. HTML
– index.html to import main.js from SRC folder
– Import the top-level single file component app.vue from main.js
– App.vue references the components text through component nesting or routing
Other single-file components in the folder
All component files are created in the SRC /components/ directory
All routing rules are configured in the SRC /router/index.js file
Ix. Vue practice
Get and. Get and. Get and. Post methods parameter description:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
– URL Indicates the request address
– data Sets the data to be sent to the server. No parameter is required
– success Sets the callback function after the request succeeds
– data Indicates the result data of the request
– status Indicates the status of the request, for example, “success”.
– XHR sends HTTP request XMLHttpRequest object
– dataType Sets the data format to be returned: “XML”, “HTML”, “text”, “JSON”
– error Indicates the error handling
– func Specifies the error exception callback function
Axios native request
The axios Data format is Payload or Form Data
Payload and Form Data are set according to the content-type value of the request header:
Payload Content-Type: ‘application/json; charset=utf-8’
Form Data Content-Type: ‘application/x-www-form-urlencoded’
Axios interceptor
The request interceptor inserts tokens in each request header to allow the back end to validate the request.
Create a respone interceptor, and when the server returns a special status code, we do the same thing, such as no permission or token expiration.
Single file component
• Create a xx.vue file
• Add and expose API objects (SRC/API)
• Import the components and AXIOS first
• The data to be used in data is given an initial value, null
• Write methods in methods, send AXIos to get data or call the API
• Select a domain name as required
• Set the menu access path address
(SRC/components/layout/data/menu. Js)
• Map routing addresses (SRC /router/index.js)