文章目录
1、Vue快速入门
1、基础环境设置
1、NodeJs
Node 是一个让 JavaScript 运行在服务端的开发平台
入门案例
编写 sendData.js
// 设置http常量
const http = require("http")
// 创建server
http.createServer(function(request,response){
// 设置响应头文件
response.writeHead(200,{"Content-Type":"text/plain"})
// 发送数据
response.end("Hello,Server!")
}).listenerCount(8080)
// 控制台打印
console.log("Servler is running...port:8080")
点击文件，右键在终端打开，输入命令node 文件名运行，在浏览器输入http://localhost:8080/，显示出了从js中响应回的数据，运行结果如下：
2、npm
什么是npm
npm（Node package manager），和Maven作用类似，使用npm给前端项目导入依赖，前端所有的依赖在npm里面都能找到
npm基本环境设置
1、初始化基本的配置文件：npm init -y
2、安装环境
npm install express -g
3、设置淘宝镜像
npm config set regisry https://registry.npm.taobao.org
查看设置是否成功
npm config list
4、下载依赖
npm install jquery，下载jQuery的依赖
npm install 依赖名 要下载什么依赖就在后面加名字，可以在后面加@版本号下载指定的版本
什么都不加，也就是npm install命令会按照package-lock.json文件中的依赖名去下载
5、生产环境
–sava-dev（全称）或 -D（简写）代表这个依赖只在开发环境有效，不会打包出去
eslint 是开发的时候的语法检测工具
npm install --sava-dev eslint
npm install -D eslint
上面两个语句效果是一样的
6、webpack打包，自动将ES6代码打包成ES5语法
npm install -g webpack webpack-cli，全局安装webpack，第一次安装会有点久
webpack -v，查看是否安装成功
7、更新和卸载包
npm update 包名，自动更新包
npm uninstall 包名，卸载包
8、babel-cli 打包工具
npm install -g babel-cli，安装babel-cli打包工具
babel --version，检查是否安装成功
2、Vue
什么是Vue
是一个前端框架，只聚焦于视图层，简单灵活，核心思想：MVVM，
MVVM：全称为Model-View-ViewModel，本质就是MVC的改进版，MVVM将视图的状态和行为抽象化，让我们将视图UI和业务逻辑分开，可以取出Model中的数据同时帮忙处理View中由于需要展示内容而设计的业务逻辑
1、第一个Vue程序
新建包，导入vue依赖，创建lib目录，将导入的vue依赖中的vue.js文件复制进去，创建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层代码 -->
<!-- 导入vue.js依赖 -->
<script src="./lib/vue.js"></script>
<script>
// 创建vue对象，绑定视图层
new Vue({
// 绑定视图层
el:"#app",
data:{
msg:"Hello,Vue!"
}
})
</script>
</body>
</html>
使用快捷键ctrl+shift+x，搜索Live Server插件，点击Install安装
右键HTML文件，选择open with Live Server运行，运行结果如下，发现在vue对象中传递的参数展示在了前端页面
2、v-bind 单向绑定
v-bind:title="msg"，简写形式为:title="msg"
创建02-data.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 v-bind:title="msg">我是标题</h1>
<!--
简写形式
<h1 :title="msg">我是标题</h1>
-->
</div>
<!-- vue层，数据 -->
<script src="./lib/vue.js"></script>
<script>
var vue = new Vue({
el:'#app',
data:{
msg:'时间'+new Date().toLocaleString()
}
})
</script>
</body>
</html>
3、v-model 双向绑定
v-bind：单向绑定，v-model：双向绑定
创建03-model.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">
<!-- v-bing绑定属性 -->
<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>
var vue = new Vue({
el:"#app",
data:{
// 定义给前端传输的数据
serachMap:{
keyword:"测试"
}
}
})
</script>
</body>
</html>
运行
当我们改变左边输入框中的数值的时候我们发现，右边的输入框的数值没有变化
但是当我们改变右边输入框的值的时候，我们发现左边的输入框的值也随之发生变化，这就是双向绑定。单项绑定的输入框的值不会影响vue对象中的值，而双向绑定的输入框中的值的改变会改变vue对象中的值，进而导致两个输入框的值都发生变化
4、事件
创建04-event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<!-- button按钮，绑定单击事件 -->
<button @click="serach()">查询</button>
<!-- 将查询的结果显示，数据从vue对象中获得 -->
<p>你要查询的是：{{result.title}}</p>
<p><a 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:{
// 定义给视图层的数据
serachMap:{
keyword:"百度"
},
// 查询结果
result:{}
},
// 定义方法
methods:{
serach(){
console.log("serach")
// 给vue对象中的属性赋值
this.result={
"title":"百度",
"site":"https://www.baidu.com/"
}
}
}
})
</script>
</body>
</html>
执行结果，当点击查询按钮的时候出现百度标签，点击将跳转到百度页面
5、路由
导入vue-router依赖，将依赖文件中的vue-router.js复制一份到lib目录下
创建05-router.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,router!</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>teacher List</div>"}
// 2、定义路由
const routes = [
{path:"/",redirect:"/welcome"},
{path:"/welcome",component:welcome},
{path:"/student",component:student},
{path:"/teacher",component:teacher}
]
// 3、创建路由实例
const router = new VueRouter({
routes:routes
})
// 4、将路由挂载在vue下
new Vue({
el:"#app",
router
})
</script>
</body>
</html>
运行之后，在浏览器可以看到界面
当点击学员管理时，会出现学员的信息，当点击讲师的按钮，也会出现讲师的信息
路由的步骤
页面
router-link，定义加载的页面信息
显示信息
script
引入lib目录
定义路由组件
定义路由
创建路由实例
将路由实例挂载到vue对象上
3、axios异步通信
新建文件夹，导入vue和axios依赖，创建lib目录，将vue.js和axios.js复制进lib目录
创建html页面：01-axios.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">
<button @click="getList()">测试</button>
<table>
<!-- 循环遍历取值 -->
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.name}}</td>
</tr>
</table>
</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(){
axios.get("./data.json").then(resopnse=>{
console.log(Response)
this.lists=response;
})
}
}
})
</script>
</body>
</html>
4、如何启动一个前端项目
1、导入到自己的工作空间
2、下载依赖，npm install
3、启动npm run dev
4、对照页面功能查看目录，了解项目的结构
2765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
