文章目录
一,路由的练习
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue路由的练习</title>
<script src="vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- 1.使用了路由
router-link将被浏览器翻译成a标签,
to将被浏览器翻译成href属性
-->
<router-link to="/runoob">runoob</router-link>
<router-link to="/w3c">w3c</router-link>
<!-- 2.路由出口,将在这里展示 匹配到的组件的内容 -->
<router-view></router-view>
</div>
<script>
//定义组件
let runoob={
template:'<h1><a href="https://www.runoob.com/" target="_blank">https://www.runoob.com</a></h1>'
}
let w3c={
template:'<h1><a href="https://www.w3school.com.cn/" target="_blank">https://www.w3school.com.cn</a></h1>'
}
// VueRouter对象是vue提供的用来完成路由功能的核心对象
let router = new VueRouter({
// routes属性是VueRouter对象的核心属性,用来确定详细的路由规则
routes:[
//分发请求,确定每个请求应该匹配到哪个组件
{
path:"/runoob",component:runoob},
{
path:"/w3c",component:w3c}
]
})
let vm = new Vue({
el:"#app",
router//属性名和属性值(变量名)相同,都叫router
})
</script>
</body>
</html>
二,Vue的Ajax
–1,概述
1,全称是异步的js和xml,
2,同步和异步的区别?
同步:保证了数据的安全,牺牲了效率(排队)
异步:效率高,牺牲安全(不排队)
3,特点: 高效,局部刷新…异步访问…
Vue框架中,提供了关于原生Ajax的优化,叫axios,全称是ajax input output system.
4,开发步骤:
先导入axios.min.js文件 + 使用正确语法发起一个Ajax请求
5,语法:
axios.get(url,params).then( abc =>{ alert(abc); } )
//其中,参数,url必要的.params是请求参数可以省略. abc是表示请求成功后程序的返回值
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的axios技术</title>
<!-- 1.导入js文件 -->
<script src="vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="show()">发起Ajax请求</button>
</div>
<script>
new Vue({
el:"#app",
methods:{
show(){
//发起一个Ajax请求
axios.get('https://www.w3school.com.cn/').then(
result => {
console.log(result);
}
)
}
}
})
</script>
</body>
</html>
三,使用axios
–1,需求
访问我们自己的1.json文件,并把文件里的数据返回
–2,创建1.json文件
{
"name":"jack",
"age":"20",
"hobby":["足球","篮球","乒乓球"]
}
–3,创建网页,发起Ajax的请求,请求数据并处理数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的ajax</title>
<!-- 1.导入两个js文件 -->
<script src="vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app">
<button @click="show()">点我,获取数据</button>
<br />
{
{name}},欢迎您回来~
<br />
您今年{
{age}}岁~
<br />
您有以下的爱好:
<ol>
<li v-for="o in hobby">{
{o}}</li>
</ol>
</div>
<script>
new Vue({
el:"#app",
data(){
return{
name : '',
age : 0,
hobby:''
}
},
methods:{
show(){
//3. 发起Ajax请求访问1.json文件
axios.get('1.json').then(
// res保存了返回的数据,但是保存了好多属性
res => {
console.log(res);
//真正的数据,存到了data属性中了.
//并且已经变成了js对象,可以解析属性的值了
console.log(res.data);
//想获取name属性的值
this.name = res.data.name;//jack
//想获取age属性的值
this.age = res.data.age;//20
//想获取hobby属性的值
this.hobby=res.data.hobby;//['足球','篮球','乒乓球']
}
)
}
}
})
</script>
</body>
</html>
–4,总结
四,Vue脚手架
–1,Vue生命周期
三大阶段: 初始化阶段,服务中阶段,销毁阶段
生命周期函数/钩子函数:
1, 组件刚被创建时: beforeCreate created
2, 模板/挂载点 被加载时: beforeMount mouted
3, 组件被更新数据时: beforeUpdate updated
4, 销毁阶段: beforeDestroy destroyed
–2, 一些概念
npm: 是包管理器,从网站上,下载/更新/删除 一些包
webpack: 是一个快速构建(下载)前端项目的 工具. 快速的下载,打包,压缩…
–3,安装nodejs
安装的过程就是下一步下一步就行.
安装完,使用DOS命令来检验安装的版本号:
node -v
–4,修改npm网址
npm config get registry #查看npm下载的网址
npm config set registry https://registry.npm.taobao.org #修改npm下载的网址
–5,安装脚手架
C:\Users\WangYiBo>npm install vue-cli -g #下载脚手架,下载一路没有飘红ERR.
C:\Users\WangYiBo>vue -V #查看脚手架的下载版本
C:\Users\WangYiBo>where vue #查看下载好的位置
C:\Users\WangYiBo\AppData\Roaming\npm\vue
五,Vue项目
–1,创建工作空间
存放vue的项目代码 D:\workspace\vue
–2,下载项目-------
1,进入你的工作空间,操作如下:
2,下载项目
E:\workspace\vue>vue init webpack jt09
六,Git
–1,概述
是一个版本控制的产品,
可以管理项目的每个文件的每个版本的记录
特点:
分布式开发的系统
发布了无数的 开源项目
–2,Git中的重要角色
1, 工作空间: 存放了项目代码的地方
2, 本地索引: 保存了要即将上传的文件
3, 本地仓库: 存了有了索引的即将上传的文件
4, 远程仓库: Gitee服务器,最终要上传的目的地
上传流程:
5, 新增add:是指 从工作空间 新增到 本地索引
6, 提价commit: 是指 从本地索引 提交到 本地仓库
7, 推送push: 是指 从本地仓库 推送到 远程仓库
下载流程:
8, 克隆clone: 是指 从远程仓库 克隆到 本地仓库
–3,准备工作
1, 安装Git.exe,下一步…
2, 去Gitee官网,注册账号
3, 工作空间: 在你的电脑里创建文件夹,存放即将上传的资源 ( E:\workspace\gitee )
4, 远程仓库: 在Gitee的官网,创建远程仓库, 保存你上传好的资源
(登录Gitee的官网,右上角点加号,新建仓库,输入仓库名/开源,创建)
–4,上传
进到你的工作空间的文件夹里,执行以下命令:
#Git 全局设置:
git config --global user.name "cgblpx" #设置注册账号
git config --global user.email "[email protected]"#设置注册邮箱/手机号
#创建 git 仓库:
mkdir cgb2110 #创建文件夹
cd cgb2110 #进入文件夹
git init #初始化git
进入你的工作空间,创建一个1.txt,并编写内容
E:\workspace\gitee\cgb2110>git add . #提交当前文件夹(cgb2110)里的所有资源
E:\workspace\gitee\cgb2110>git commit -m "first commit" #提交,从本地索引到本地仓库,参数是提交的原因
E:\workspace\gitee\cgb2110>git remote add origin https://gitee.com/cgblpx/cgb2110.git
#绑定本地仓库 和 远程仓库的关系
E:\workspace\gitee\cgb2110>git push -u origin master #真正实现提交数据,提交成功了就刷新Gitee的官网
第一次提交 会弹出下面的用户名、密码框，填写码云的账号/手机号 就可以
–如果最后一部push出了错误
重新创建远程仓库,并执行官网提示的一些命令