Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "vue case Analysis". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

   Vue (pronounced / vju sounds /, similar to View) is a progressive framework 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 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, when used in conjunction with modern tool chains and various supporting class libraries, Vue is also fully capable of driving complex single-page applications.

First, MVVM mode and the first Vue program 1. What is MVVM?

This layer is bidirectional data binding to the view layer upward.

Down to the Model layer for data exchange through interface request

How to install Vue:

   1.1 uses the CDN method (for beginners)

   can also be introduced directly using CDN. The code is as follows:

   1.2Vue-cli scaffolding

   uses Vue-cli scaffolding to build the Vue project, which is explained in detail in the seventh point below. (recommended for medium and large projects).

two。 The first Vue program

  1. Create a HTML file

  2. Introduce Vue.js

Complete example:

Bessie said {{message}}

Var vue=new Vue ({el: "# app", / * model data * / data: {message: "hello,vue"}})

Demonstration effect: (view-driven data, data-driven view)

Second, basic grammar

V-bind

V-bind is used to bind data and element attributes.

Complete example:

Click me.

Var app = new Vue ({el:'.app', data: {url: "https://www.baidu.com",}})

Note:

  v-bind is followed by: attribute name =. As far as I understand it, it means to bind this attribute. After binding, the corresponding value should be found in the vue data.

  when we change the url on the console, the correspondence also changes.

Similarly, we can also bind the image src attribute and the hyperlink class

Click me.

Var app = new Vue ({el:'.app', data: {url: "https://www.baidu.com", imgsrc:" https://cn.vuejs.org/images/logo.png"}})

Note:

Click me.

Usually we can abbreviate v-bind:

Click me.

VRIFIFJEN vPULY else

VRIFIFJEN vPULY else

Complete example:

YES

NO

Var app = new Vue ({el: "# app", data: {ok:true,}})

Vmurifwon vQUESELLIFFING vFLIFMAL vFLYE else

Hello, admin.

Jia Zhijie

You do not have access!

Var app = new Vue ({el: "# app", data: {role: "admin",}})

V-for

  1, v-for cyclic ordinary array

{{item}}-Index: {{index}}

Var app = new Vue ({el: "# app", data: {list: [1 list 2 3 4 5],}})

  2, v-for loop object array

{{user.id}}-- {{user.name}}-Index: {{index}}

Var app = new Vue ({el: "# app", data: {list: [{id:1,name:'beixi'}, {id:2,name:'jzj'}, {id:3,name:' Jia Zhijie'}] })

  3, v-for Loop object

Value: {{val}}-key: {{key}}-Index: {{index}}

Var app = new Vue ({el: "# app", data: {user: {name: "beixi", age: "18", sex: "male"})

  4, v-for cyclic digits

This is the {{count}} th cycle.

Var app = new Vue ({el: "# app", data: {}}); III. Vue binding event

Syntax:

   v-on: event name = "method name"

   abbreviation: @ event name = "method name"

   event name: click | keydown | keyup | mouseover | mouseout | Custom event name

V-on event listening, complete example:

Bessie said {{count}} I add 1 and I subtract 1.

Var app = new Vue ({el: "# app", data: {count:1}, methods: {sub:function () {this.count-=1;})

Note: v-bind can be abbreviated as: v-on: can be abbreviated @

4. Vue: form double binding, component 1. What is two-way data binding

   Vue.js is a MVVM framework, that is, two-way data binding, that is, when the data changes, the view changes, and when the view changes, the data changes synchronously. This is the essence of Vue.js.

   is worth noting that what we call two-way data binding must be for UI controls, and non-UI controls will not involve two-way data binding. One-way data binding is a prerequisite for using state management tools. If we use vuex, then the data flow is also singleton, which will conflict with two-way data binding.

two。 Use two-way data binding in a form

   you can use the v-model instruction to create two-way data bindings on forms and elements. It automatically selects the correct method to update the element based on the control type. Magical as it is, v-model is essentially nothing more than grammatical candy. It is responsible for listening to user input events to update data, and to do some special handling for some extreme scenarios.

   Note: v-model ignores the initial values of the value, checked, and selected properties of all form elements and always uses the data of the Vue instance as the data source. You should declare the initial value in the data option of the component through JavaScript!

Example 1:

{{message}}

Var app = new Vue ({el: "# app", data: {message:''}})

Completion effect:

Example 2:

Male and female

{{gender}}

Var app = new Vue ({el: "# app", data: {gender:''}})

Example 3:

Please choose Beijing, Shanghai and Guangzhou

{{selected}}

Var app = new Vue ({el: "# app", data: {selected:''}}); 3. What are components?

   components are reusable Vue instances, which, to put it bluntly, is a set of templates that can be reused, similar to JSTL's custom tags, Thymeleaf's th:fragment and other frameworks.

   is usually organized in the form of a nested component tree:

For example, you may have components such as headers, sidebars, content areas, and so on, each of which contains other components such as navigation links and blog posts.

4. Simply define a component

Note: in actual development, we do not develop components in the following way, but in the way that vue-cli creates .vue template files, the following methods are just to let you understand what components are.

/ / register component Vue.component ("beixi", {template:'hello'}); var app = new Vue ({el: "# app",})

Description:

Vue.component (): register the component

Beixi: the name of the custom component

Template: a template for a component

5. Using the props property to pass parameters dynamically

Vue.component ("blog-post", {props: ['value'], template:' {{value}}'}); var app = new Vue ({el: "# app", data: {items: ['beixi','jzj',' Jia Zhijie']}})

Description:

V item in items for = "item in items": traverses the array named items defined in the Vue instance and creates the same number of components

VMurbindvalue value = "item": bind the traversed item item to the attribute named value defined by props in the component; the property name defined by value to the left of the = sign is the property name defined by props, and the value on the right is the value of the property item traversed in item in items

5. Axios asynchronous communication 1. What is Axios?

   Axios is an open source asynchronous communication framework that can be used in browsers and NodeJS. Its main role is to implement AJAX asynchronous communication. Its features are as follows:

Create a XMLHttpRequests from a browser

Create a http request from node.js

Support for Promise API [chain programming in JS]

Intercept requests and responses

Convert request data and response data

Cancel the request

Automatic conversion of JSON data

The client supports defense against XSRF (cross-site request forgery)

   GitHub: https://github.com/axios/axios

   Chinese document: http://www.axios-js.com/

two。 Why use Axios

   because Vue.js is a view layer framework and the author (you Yuxi) strictly adheres to SoC (the principle of separation of concerns), Vue.js does not include the communication function of AJAX. In order to solve the communication problem, the author developed a plug-in called vue-resource, but stopped the maintenance of the plug-in and recommended the Axios framework after entering version 2.0. Use less jQuery because it manipulates Doms too often!

3. The first Axios application

   most of the interfaces we have developed are in JSON format. You can first simulate a piece of JSON data in the project. The data content is as follows: create a file named data.json, fill in the above contents, and put it in the root directory of the project.

{"name": "Bessie said", "url": "https://blog.csdn.net/beixishuo"," page ": 1," isNonProfit ": true," address ": {" street ":" Taigu "," city ":" Shanxi Jinzhong "," country ":" China "}," links ": [{" name ":" bilibili " "url": "https://space.bilibili.com/474668932"}, {" name ":" Bessie says "," url ":" https://blog.csdn.net/beixishuo"}, {"name": "Baidu", "url": "https://www.baidu.com/"}]}

Complete example:

{{info.name}}

{{info.address}}

Bessie said

Var app=new Vue ({el: "# app", / / data: attribute data:function () {/ / the background data needs to be processed (returned) when rendering the background data on the page using return {/ / the format of the return parameter requested must be the same as the json string info: {name:null,// is equivalent to formal parameter occupation The actual parameter data.json assigns url:null, address: {street:null, city:null, country:null} Mounted:function () {/ / mounted hook function It is equivalent to the main function in java. You can call the function / / axios.get ('data.json') .then (resp= > (console.log (resp.data) defined in methods; axios.get (' data.json') .then (resp= > (this.info=resp.data));}})

Note:

Failed to read the data in the local json file, as shown in the figure

The solution is to right-click the browser shortcut, change the properties, and add

-allow-file-access-from-files

Description:

Here, v-bind is used to bind the property values of a:href to the data in the Vue instance

Use the get method of the axios framework to request AJAX and automatically encapsulate the data in the data object of the Vue instance

Our data structure in data must match the format of the data returned by the Ajax response!

4.axios API

You can make a request by passing the relevant configuration to the axios.

Axios (config)

/ / send a POST request axios ({method: 'post', url:' / user/12345', data: {firstName: 'Fred', lastName:' Flintstone'}})

Axios (url [, config])

/ / send a GET request (GET request is the default request mode) axios ('/ user/12345')

Request method alias

For convenience, aliases have been provided for all supported request methods.

Axios.request (config)

Axios.get (url [, config])

Axios.delete (url [, config])

Axios.head (url [, config])

Axios.post (url [, data [, config]])

Axios.put (url [, data [, config]])

Axios.patch (url [, data [, config]])

Be careful

When using the alias method, you do not need to specify the url,method and data properties in config.

Life cycle of 5.Vue

6. Calculation attribute 1. What are Computational Properties

   when some data needs to change according to other data, it needs to be processed before it can be displayed. Although vue provides a way to bind data expressions, it is originally designed for simple operations. Putting too much logic in the template will make the template overweight and difficult to maintain, may be stretched for some complex and special calculations, and the calculated attributes written in the template are not conducive to project maintenance.

The main roles of computed are:

   separation logic (template and data separation)

   cache value

   bidirectional binding (getter,setter)

Simply understand: return the result of the calculation as an attribute

two。 Complete example

Sum result {{result}}

Var app=new Vue ({el: "# app", data: {num1:1,num2:2}, computed: {/ / calculation attribute result:function () {return parseInt (this.num1) + parseInt (this.num2);}) 3. Difference between methods method and computed calculation property

The execution results of the two are exactly the same.

The calculated properties are cached based on their dependencies, and they will re-evaluate only when the related dependencies change, that is, as long as their dependencies remain unchanged, then the calculated properties will immediately return the previous calculation results each time they are accessed, and the function will no longer be executed.

Each time a re-rendering is triggered, the calling method will always execute the function again

Front-end engineering vue-cli

  Vue scaffolding refers to vue-cli, which is designed to quickly build complex scaffolding for single-page applications, it can easily create new applications and can be used to automatically generate vue and webpack project templates.

  uses vue-cli scaffolding to build a Vue project that requires the installation of Node.js and NPM environments.

Installation of 1.Node.js

The installation of Node.js is relatively simple. You need to download and install the node.js environment on the official website of node.js (https://nodejs.org/en/download/)). Download Windows Installer (.msi) as recommended by windows. At the same time, you will get an included NPM tool.

Install Node.js and double-click the downloaded node file, as shown in the figure.

The installation process is relatively simple, always the "next step".

Environment variable configuration: after the installation is complete, you need to set the environment variable: add the installation directory to Path (for example: d:\ java\ nodejs), as shown in the figure.

Click start = "run =" enter "cmd" = > enter node-v as shown in the figure to verify that the installation is successful.

2.npm installation

Since node.js has integrated with npm, npm has been installed before. So type npm-v in the cmd terminal to test whether the installation is successful. The command is shown in the figure, and the version prompt indicates that the installation is successful.

3 basic use

The steps are as follows:

① builds the first complete Vue-cli scaffolding project.

② installation is complete, enter Vue-V, if the corresponding version number appears, the installation is successful. This is shown in figure 7-6.

③ We can use vue-cli to quickly build a project based on the webpack template, as shown in the figure, named vue-project.

After the ④ configuration is complete, you can see that there is an extra project folder in the directory, which is a webpack-based vue.js project created by vue-cli.

Then go to the project directory (such as cd vue-project) and install the dependencies using npm install, as shown in the figure.

After the dependency installation is complete, let's take a look at the directory structure of the project, as follows:

. |-- build / / Project build (webpack) related code | |-- build.js / / production environment build code | |-- check-version.js / / check node, Npm and other versions | |-- dev-client.js / / related to hot and overload | |-- dev-server.js / / build local server | |-- utils.js / / build tool | |-- webpack.base.conf.js / / webpack basic configuration | |-- webpack.dev.conf.js / / webpack development environment configuration |-- webpack.prod.conf.js / / webpack production environment configuration |-- config / / Project development environment configuration | |-- dev.env.js / / Development environment variables | |-- index.js / / some projects Configuration variable | |-- prod.env.js / / production environment variable | |-- test.env.js / / Test environment variable |-- node_modules / / dependent resources required |-- src / / Source directory | |-- assets / / Storage of asset files | |-- components / / vue common components | |-- router / / store routing js files Used for page jump | |-- App.vue / / Page entry file | |-- main.js / / Program entry file, loading various common components |-- static / / static file, such as some images Json data, etc. |-- data / / data obtained from group chat analysis is used for data visualization |-- .babelrc / / ES6 syntax compilation configuration |-- .editorconfig / / defines the code format |-- .gitignore / / git upload needs to be ignored File format |-- README.md / / Project description |-- favicon.ico |-- index.html / / entry page |-- package.json / / basic project information.

More operations for developers are the src directory:

| |-- src / / Source Code Directory | |-- assets / / store asset files | |-- components / / vue common component | |-- router / / store routing js files | Used for page jump | |-App.vue / / Page entry file | |-- main.js

④ enter the npm run dev command to start the project, as shown in the figure.

After running successfully, type: http://localhost:8080 in the browser, and access the project results as shown in the figure.

This is the end of the content of vue case Analysis. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.