Article Directory
1. Environment Configuration
Development Tools: VSCode (recommended), IDEA
VSCode Download: https: //code.visualstudio.com/
also need a front-end environment: NodeJS
NodeJS Download: http: //nodejs.cn/download/
After installation verify correct installation:
(1) VSCode normally open it!
(2) NodeJS authentication need to determine
- Configuration environment variable: next up will automatically configure the environment variables during installation
- Judgment version node -v as well as asl -v
So far, the configuration is complete environment!
2 NodeJS
NodeJS is capable of running JavaScript in a server-side environment.
The first node js program
3. Understand the NPM, some common installation environment
npm (node package manager): maven, all dependencies tip of the tip plate here has
Where it is package.json Pom.xml file corresponding to the back-end
（1） asl s init: Initializing a basic profile
(2)npm install express -g : Environmental Installation package name npm install -g (Global)
（3） npm config set regisry https://registry.npm.taobao.org : To set up a mirror Taobao (cmd performed)
npm config list : See if the installation was successful
（4） npm install jquery : Installation jquery dependent
npm install vue : Installation vue dependent
（5） npm install --save-dev eslint : Represents only effective in the development environment, not packed out, eslint time for the development of grammar checking work
（6） npm install : When the deletion node_modules in some dependent, this command is executed, it will depend according to package-lock.json automatically download
（7） npm install -g webpack webpack-cli : We are based in a later development es6, but browser support is es5 codes and required webpack package automatically converted es5 es6 the code syntax (cmd execution in)
webpack -v : See if the installation was successful
（8） npm update package name : Automatic update a package name
npm uninstall package name : Automatic uninstall a package name
（9） npm install -g babel-cli : Installation babel-cli (cmd in execution)
babel --version : See if the installation was successful
4. View
Vue is a front-end frame, the core layer is only concerned view
The official document: https: //cn.vuejs.org/v2/guide/
core idea: MVVM (M V model data view VM-way binding)
MVVM is a simplified user interface event-driven programming mode
MVVM derived from classical MVC (Model-View-Controller) pattern. MVVM's core ViewModel layer , is responsible for converting the data object in the Model to make data easier to manage and use, its role is as follows:
- The two-way data binding layer to the upper layer and the view
- Downwardly Model layer data exchange via interface
4.1 The first program vue
(1) Create a folder named 01-VUE
(2) right click and select the terminal opened, downloaded VUE
(3) create a lib folder, the dist folder vue.js file copy and paste past
(4) Create a vue first file, named 01-hellovue.html, select a shortcut html: 5, automatically generate parts of the code
(5) 01-hellovue.html all code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 视图部分 -->
<div id="app">
{{msg}}
</div>
<!-- 数据和视图层分离 -->
<!-- 引入vue -->
<script src="./lib/vue.js"></script>
<script>
//代码部分
//创建vue对象，
var vue = new Vue({
el:'#app', //绑定视图层
data:{ //定义要给前端的数据,页面的所有数据都来自data
msg:'hello,vue'
}
})
</script>
</body>
</html>
(6) the right to select Open in the browser
results show:
understand way binding: as long as the data changes, the front view of the display will change ensued
basic data rendering instructions (expansion section)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 视图部分 -->
<div id="app">
<!-- <h1 v-bind:title="msg">我是标题</h1> -->
<!-- v-bind 简写 ： -->
<h1 :title="msg">我是标题</h1>
</div>
<!-- 数据 -->
<script src="./lib/vue.js"></script>
<script>
var vue = new Vue({
el:'#app',
data:{
msg:'时间'+ new Date().toLocaleString()
}
})
</script>
</body>
</html>
The results show:
4.2-way binding
v-model two-way binding
v-bind binding properties (one-way)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 视图部分 -->
<div id="app">
<!-- v-bind 绑定属性 -->
<input type="text" v-bind:value="serachMap.keyword">
<!-- v-model 双向绑定指令 -->
<input type="text" v-model="serachMap.keyword">
</div>
<!-- 数据和视图层分离 -->
<!-- 引入vue -->
<script src="./lib/vue.js"></script>
<script>
//代码部分
//创建vue对象，
var vue = new Vue({
el:'#app', //绑定视图层
data:{ //定义要给前端的数据,页面的所有数据都来自data
serachMap:{
keyword:'zz'
}
}
})
</script>
</body>
</html>
The results show:
we can see, modify the data in the input box on the left and right will not change, but the right to modify the data in the input box on the left but it will change as well, and this is the right way binding input box set!
Value is changed to the right of the input box, the data layer will change, since the binding layer and data layer view, so that the left will also dynamically modify the input box.
4.3 Event
El add properties and methods based on the data attribute
v-on binding events
v-on usually abbreviated as @
v-usually abbreviated as the bind:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 视图部分 -->
<div id="app">
<!-- 通过按钮来绑定事件 -->
<button v-on:click="search()">查询</button>
<p>你要查询的是：{{result.title}}</p>
<p> <a v-bind:href="result.site" target="_blank">{{result.title}} </a></p>
</div>
<!-- 数据和视图层分离 -->
<!-- 引入vue -->
<script src="./lib/vue.js"></script>
<script>
//代码部分
//创建vue对象，
var vue = new Vue({
el:'#app', //绑定视图层
data:{ //定义要给前端的数据,页面的所有数据都来自data
serachMap:{
keyword:'zz'
},
//查询结果
result:{}
},
methods:{ //事件
search(){
console.log("search")
this.result={
"title":"zz",
"site":"https://blog.csdn.net/nzzynl95_"
}
}
}
})
</script>
</body>
</html>
The results show:
5. Route
By routing to achieve a single page jump
to create a vue-router folder ==> Download and vue vue-router ==> Create a lib folder, and the vue.js vue-router.js copy of this lib folder in ==> create a route .html file
Route .html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>Hello,App!</h1>
<p>
<router-link to="/">首页</router-link>
<router-link to="/student">学员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 显示view -->
<router-view></router-view>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
<script>
//1、定义路由的组件
const welcome = { template: '<div>欢迎</div>' }
const student = { template: '<div>Student List</div>' }
const teacher = { template: '<div>Teachet List</div>' }
//2、定义路由
const routes = [
{ path: '/', redirect: '/welcome' },
{ path: '/welcome', component: welcome },
{ path: '/student', component: student },
{ path: '/teacher', component: teacher }
]
// 3、创建 router实例
const router = new VueRouter({
routes: routes //
})
// 挂载路由
new Vue({
el: '#app',
router
})
</script>
</body>
</html>
The results show:
6. axios asynchronous communication
ajax is a technology without having to reload the entire page can be updated technical part of the page, and axios is a realization of ajax technology
vue recommended axios do communicate!
Axios create a folder ==> Download vue and axios ==> Create a lib folder, and the vue.js axios.js copy of this lib folder ==> Create a axios.html file ==> create a folder list.json
axios.html file:
<div id="app">
<button @click="getList()">测试</button>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/axios.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
lists: []
},
methods: {
// 前后端分离开发中，前端接收数据并渲染，后台只用提供json数据
getList() {
// 可以在本地新建一个json数据文件，用来测试ajax请求
axios.get('list.json').then(response => {
console.log(response)
// 后端接收的值交给前端的vue管理
this.lists = response.data
})
}
}
})
</script>
list.json file:
[
{'name1':'小白'
},
{'name2':'小灰'
},
{'name3':'小蓝'
}
]
The results show:
7. Vue actual project development study
Copy a complete project to the current nodejs folder ==> npm install downloading dependencies ==> npm run dev project start
The entire project directory:
After installing dependent, after a successful start, automatically jump to the login page
after entering the user name and password, successfully entered
more than Vue is the first day of the fast entry to the study, from download and install new software, to be familiar with the software, to create simple little program!
