文章目录
1. 环境配置
开发工具:VSCode(推荐)、IDEA
VSCode下载地址:https://code.visualstudio.com/
还需要一个前端环境:NodeJS
NodeJS下载地址:http://nodejs.cn/download/
安装完毕后验证是否安装正确:
(1)VSCode能正常打开即可!
(2)NodeJS需要判断验证
- 配置环境变量:安装时一直next会自动配置环境变量
- 判断版本 node -v 以及 npm -v
至此,环境配置完毕!
2. NodeJS
NodeJS 是一个在服务器端能够运行JavaScript 的环境。
第一个node js程序
3. 了解NPM,安装一些常用的环境
npm (node package manager):前端版的 maven,前端所有的依赖在这里都有
其中它的 package.json 文件对应后端的pom.xml
(1) npm init -y :初始化一个基本的配置文件
(2) npm install express -g :安装环境 npm install 包名 -g(全局)
(3) npm config set regisry https://registry.npm.taobao.org :设置镜像到淘宝(cmd中执行)
npm config list :查看是否安装成功
(4) npm install jquery : 安装jquery依赖
npm install vue : 安装vue依赖
(5) npm install --save-dev eslint : 代表只在开发环境有效,不会打包出去,eslint为开发时候的语法检查工作
(6) npm install :当把node_modules里某些依赖删除后,执行此命令,就会根据package-lock.json的依赖,自动下载上
(7) npm install -g webpack webpack-cli : 我们在后面的开发都是基于es6,但浏览器支持的是es5规范,所以需要webpack 打包,自动将es6代码转为es5语法(cmd中执行)
webpack -v : 查看是否安装成功
(8) npm update 包名 : 自动更新某个包名
npm uninstall 包名 : 自动卸载某个包名
(9) npm install -g babel-cli : 安装babel-cli(cmd中执行)
babel --version :查看是否安装成功
4. Vue
Vue是一种前端框架,核心只关注视图层
官方文档:https://cn.vuejs.org/v2/guide/
核心思想:MVVM (M模型数据 V视图 VM双向绑定)
MVVM是一种简化用户界面的事件驱动编程方式
MVVM 源自于经典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel 层,负责转换 Model 中的数据对象来让数据变得更容易管理和使用,其作用如下:
- 该层向上与视图层进行双向数据绑定
- 向下与 Model 层通过接口请求进行数据交互
4.1 第一个vue程序
(1)创建一个文件夹,命名为vue-01
(2)点击右键,选择在终端打开,下载vue
(3)创建一个lib文件夹,将dist文件夹下的vue.js文件复制一份粘贴过去
(4)创建第一个vue文件,名为01-hellovue.html,选择快捷键html:5,自动生成部分代码
(5)01-hellovue.html 全部代码
<!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)右键选择在浏览器中打开
结果展示:
理解双向绑定:只要数据发生变化,前端视图显示就会随之发生变化
基本数据渲染指令 (拓展部分)
<!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>
结果展示:
4.2 双向绑定
v-model 双向绑定
v-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">
<!-- 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>
结果展示:
可以看出,在左边输入框修改数据,右边不会随之改变,但在右边输入框修改数据,左边却会随之发生改变,这就是右边输入框设置的双向绑定!
右边输入框的值改变,会使数据层发生改变,由于视图层和数据层绑定,所以使得左边输入框也随之动态修改。
4.3 事件
在el 和 data属性基础上再添加 methods属性
v-on 绑定事件
v-on 一般简写为 @
v-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>
结果展示:
5. 路由
通过路由实现单页面跳转
创建一个vue-router文件夹 == > 下载vue和vue-router ==> 创建一个lib文件夹,将vue.js和vue-router.js复制一份到此lib文件夹中 ==> 创建一个 路由.html文件
路由.html文件:
<!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>
结果展示:
6. axios 异步通信
ajax技术是一种在无需重新加载整个网页情况下,能更新部分网页的技术,而axios是ajax技术的一种实现
vue推荐使用axios做通信!
创建一个axios文件夹 == > 下载vue和axios ==> 创建一个lib文件夹,将vue.js和axios.js复制一份到此lib文件夹中 ==> 创建一个 axios.html文件 ==>创建一个list.json文件夹
axios.html文件:
<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文件:
[
{'name1':'小白'
},
{'name2':'小灰'
},
{'name3':'小蓝'
}
]
结果展示:
7. Vue实际项目开发学习
将一个完整项目复制到当前nodejs文件夹下 ==> npm install 下载依赖 ==>npm run dev 启动项目
整个项目目录:
安装完依赖,启动成功后,自动跳转到登录页面
输入用户名和密码后,成功进入
以上就是 Vue第一天快速入门的学习,从下载安装新软件,到熟悉软件,再到创建简单的小程序 !