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相关推荐
- Java基础day13
Java基础day13 Java基础部分day13-常用API&异常 1.包装类 1.1基本类型包装类 1.2Integer类 1.3int和String类型的相互转换 1.4字符串数据排序案 ...
- LeetCode算法入门- Longest Common Prefix -day13
LeetCode算法入门- Longest Common Prefix -day13 题目描述: Write a function to find the longest common prefix ...
- Spark Streaming揭秘 Day13 数据安全容错(Driver篇)
Spark Streaming揭秘 Day13 数据安全容错(Driver篇) 书接上回,首先我们要考虑的是在Driver层面,有哪些东西需要维持状态,只有在需要维持状态的情况下才需要容错,总的来说, ...
- QT每日一练day13：QFileDialog文件浏览框
运行结果(GIF动图): day13.pro QT += core guigreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsCONFIG += c++11# ...
- 句句真研—每日长难句打卡Day13
句句真研-每日长难句打卡Day13 参考译文:许多美国人认为陪审团制度是至关重要的民主价值观的具体体现,其中包括以下原则:所有满足最低年龄和文化要求的公民都具备同等资格担任陪审员;陪审员应从社会各部门 ...
- PHP ctf addslashes,[红日安全]代码审计Day13 - 特定场合下addslashes函数的绕过
本文由红日安全成员: l1nk3r 编写,如有不当,还望斧正. 前言 大家好,我们是红日安全-代码审计小组.最近我们小组正在做一个PHP代码审计的项目,供大家学习交流,我们给这个项目起了一个名字叫 P ...
- Python菜鸟入门：day13编程学习
写在前面: 此博客仅用于记录个人学习进度,学识浅薄,若有错误观点欢迎评论区指出.欢迎各位前来交流.(部分材料来源网络,若有侵权,立即删除) 传送门: day01基础知识 day02知识分类 day03 ...
- day13【前台】搭建环境
day13[前台]搭建环境 1.会员系统架构 2.创建工程 2.1.工程清单 父工程. 聚合工程: atcrowdfunding07-member-parent(唯一的 pom 工程) 注册中心: a ...
- 21天Jmeter打卡Day13 逻辑控制器之if和简单控制
21天Jmeter打卡Day13 逻辑控制器之if和简单控制 https://www.jianshu.com/p/9e3838cfb220 1.读取所有数据 循环控制器设置次数为6 2.添加if控制器 ...
- OpenCV 学习笔记-day13 像素值统计 统计计算最大最小值，平均值和标准差 （minMaxLoc()和meanStdDev()函数的使用）
OpenCV 学习笔记 day13 像素值统计 函数 minMaxLoc(); 最大值最小值统计 meanStdDev();平均值和标准方差统计 代码 day13 像素值统计 函数 minMaxLoc ...
最新文章
- python列表（list）中出现次数最多的元素使用collection包的Counter方法
- Matlab emd工具箱、时频分析工具箱下载以及安装方法
- CodeIgniter学习笔记一：基本结构、控制器、视图、超级对象、数据库
- cassandra_Apache Cassandra和低延迟应用程序
- 为什么SimpleDateFormat不是线程安全的？
- wangEditor3菜单修改之如何添加分割线
- Maven 构建流程
- 一步一步写算法（之排序二叉树删除-3）
- Mathematica图片修复
- Vue.js 还是 React？你会选择哪一个？为什么？
- 简单理解LSTM神经网络
- 查词根词缀特别好的网站
- 统计——假设检验与p值
- Ubuntu18.04-使用wine打开CAJ文件并解决乱码问题
- 学期总结(思维导图)
- 【JS教程】移动端 Touch（触摸）事件
- MyCat —— 性能最好的数据库中间件
- 【PIE-Engine Studio学习笔记05】图像分类——非监督分类
- 题解报告（CDUT暑期集训——第六场）
- maven依赖管理（依赖配置、依赖传递、依赖冲突、依赖范围）