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

This article mainly introduces the example analysis of back-end separation before node vue project development, which is very detailed and has certain reference value. Friends who are interested must read it!

Node vue project development

Recently, I have seen nearly a week of vue development, and I have a lot of feelings. I have been in contact with react and angular before, so I especially want to learn the famous vue. After studying for half a day, I found that when I came into contact with more things, it was much easier to learn. I can think of the instructions of angular. The component design of vue is similar to the component design of react, including some router settings are similar to the routes in react or nodejs, and vuex is rewritten according to redux and flux. Although I still don't quite understand how to use it, as for the template rendering of vue It's not much different from expres rendering ejs. Using vue can completely get away from jq, although I don't feel any magic without jq, but I think this kind of two-way data binding is very convenient. This document is used to record some new knowledge and ideas about learning vue.

Instruction

V-bind is mainly used to dynamically bind DOM element attributes, that is, the actual value of the element attribute is provided by the data attribute in the vm instance.

V-model mainly binds two-way data to the form elements. When the value of the form element is modified, the attributes corresponding to the vm in the instance vm are also updated.

These instructions are used to illustrate the logical relationship between templates and data

The role of v-if and v-else is to determine whether to output the dom element and the child elements it contains based on the numerical value.

Eg:

Yes when the data.yes=true in the vm instance, the template engine compiles the dom node. It is worth noting that the output yes should be closely followed by v-if, otherwise it will not work.

The effect of v-show is similar to that of v-if, both by judging the true or false display content, the only difference is that when v-show is not displayed, it is display:none, that is, the dom node is retained, but v-if will not.

V-for is used for list rendering, and you can loop through arrays and objects. Note that v in for = "b list 10" currently refers to 1-10 iterations.

V-on event binding, abbreviated @:

V-text

Equivalent to innerText, compared with {{msg}}, it avoids the problem of flash.

V-HTML is similar to innerHTML and can also avoid flashing.

The v-el instruction is equivalent to adding an index to the dom element, such as this is a test. If you want to get the value in the current dom, you can vm.$els.demo.innerText. Note: html is not case-sensitive, hump writing will be automatically converted to lowercase, and can be converted to uppercase by -.

V-ref is similar to v-el through vim.$refs access

V-pre skips compiling this element

V-cloak feels useless.

V-once added a built-in instruction to indicate that elements or components are rendered only once.

Template rendering

1. V-for is mainly used for list rendering. According to the array received, you can repeatedly render the dom elements and internal sub-elements bound by v-for, and you can get the data in the array and render it to the node by setting aliases.

Eg:

{{item.title}} {{item.description}}

2. V-for has a built-in $index variable, which can be called when v-for is called, such as {{index}}-{{$index}}.

3. Modify data

Direct modification of the array can change the data

The situation of the array cannot be changed directly.

1.vm.items [0] = {}, which cannot be modified in this case: vm.item.$set (0, {}) or vm.$set ('item [0]', {})

2.vm.item.length=0

4. V-for traverses the object. You can customize the key variable in the form of (key,value).

{{key}}-{{$key}}: {{vue}}

5. Template tag

A follower node that is used as a template for rendering, but this node does not exist when rendered

Event binding and snooping

V-on can bind the method in the instance property methods as the event handler, and v-on: can accept all the native event names later.

Abbreviation @:

You can bind methods functions, and inline js is supported, but only with one statement.

Bind the methods function and inline js to get the native dom element, event.

When binding multiple events, it is executed sequentially.

Are the ui components hungry?

User's guide

Installation

Npm install cnpm install element-ui-save-dev

Import file main.js

Import ElementUI from 'element-ui'import' element-ui/lib/theme-chalk/index.css'Vue.use (ElementUI, {size: 'small'})

Use

Create a new page under the components folder and find your favorite components from ele.me, such as horse lantern Carousel.vue, copy the code to this page

Under the required files for this component, such as APP.vue

Import Carousel from'. / components/Carousel'export default {name: 'app', components: {/ / components plus s Carousel: Carousel}}

Load an assembly in a template

So it can run.

Front and rear end separation

Accustomed to using node to do full-stack development, now using vue-webpack to do front-end development, node to do back-end development is also quite cool, the front and back ends are separated.

Start the back-end interface

Cd backcnpm installnpm run dev

Start the front-end server

Cd frontcnpm installnpm start

Go to the login page, click to log in, the console prints the successful access information, and successfully jumps to the helloworld page

Front and back end communication

Vue-resource

Install vue-resource and reference it in main.js

Import VueResource from 'vue-resource'Vue.use (VueResource)

Configure proxyTable proxy server in config/index.js

ProxyTable: {'/ api/**': {target: 'http://localhost:3000', pathRewrite: {' ^ / api':'/ api'}

Use

This.$http.get ('api/apptest') .then ((response) = > {/ / response successful callback console.log (response)}) .catch (e = > {/ / print error console.log (e)})}

Disadvantages: there is no problem in the development environment, but the request for the back-end interface is not successful in the production environment

Axios

First configure axios and create a new http.js under src

Import axios from 'axios'axios.defaults.timeout = 5000axios.defaults.baseURL =' http://localhost:3000'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'export default axios

Introduce in main.js

Import axios from'. / http'Vue.prototype.axios = axiosnew Vue ({el:'# app', router, axios, template:', components: {App}})

Use

Get method

Login () {/ / get the existing account password this.axios.get ('/ apptest') .then ((response) = > {/ / response callback console.log (response) / / this.$router.go ({name: 'main'}) / / does not work this.$router.push ({name:' HelloWorld'})}) .catch (e = > {/ / print error console.log (e)})}

Post method

Register () {console.log (this) / / get the existing account password let params = {user: this.userinfo.account, password: this.userinfo.password, directionId: this.userinfo.directionId} this.axios.post ('/ signup', params) .then (response) = > {/ / response successful callback console.log (response)}) .catch (e = > {/ / print error console.log (e)})}

Production environment path problem

It is found that the path is incorrect after packing in the production environment, and modify the index.js under config.

Build: {/ / Template for index.html index: path.resolve (_ _ dirname,'.. / dist/index.html'), / / Paths assetsRoot: path.resolve (_ _ dirname,'.. / dist'), assetsSubDirectory: 'static', assetsPublicPath:' /', / / originally assetsPublicPath:'/'

Source location: https://gitee.com/react-module/node-vue

The above is all the content of the article "sample Analysis of back-end Separation before node vue Project Development". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.