本文主要是介绍cgb2110-day13，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
文章目录
- 一,路由的练习
- --1,测试
- 二,Vue的Ajax
- --1,概述
- --2,测试
- 三,使用axios
- --1,需求
- --2,创建1.json文件
- --3,创建网页,发起Ajax的请求,请求数据并处理数据
- --4,总结
- 四,Vue脚手架
- --1,Vue生命周期
- --2, 一些概念
- --3,安装nodejs
- --4,修改npm网址
- --5,安装脚手架
- 五,Vue项目
- --1,创建工作空间
- --2,下载项目-------
- 1,进入你的工作空间,,,,操作如下:
- 2,下载项目
- 六,Git
- --1,概述
- --2,Git中的重要角色
- --3,准备工作
- --4,上传
- --如果最后一部push出了错误
一,路由的练习
–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 "2250432165@qq.com"#设置注册邮箱/手机号
#创建 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出了错误
重新创建远程仓库,并执行官网提示的一些命令
这篇关于cgb2110-day13的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
