脚本宝典收集整理的这篇文章主要介绍了cgb2110-day13,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<!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>
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是表示请求成功后程序的返回值
<!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>
访问我们自己的1.json文件,并把文件里的数据返回
{
"name":"jack",
"age":"20",
"hobby":["足球","篮球","乒乓球"]
}
<!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>
三大阶段: 初始化阶段,服务中阶段,销毁阶段 生命周期函数/钩子函数: 1, 组件刚被创建时: beforeCreate created 2, 模板/挂载点 被加载时: beforeMount mouted 3, 组件被更新数据时: beforeUpdate updated 4, 销毁阶段: beforeDestroy destroyed
npm: 是包管理器,从网站上,下载/更新/删除 一些包 webpack: 是一个快速构建(下载)前端项目的 工具. 快速的下载,打包,压缩…
安装的过程就是下一步下一步就行. 安装完,使用DOS命令来检验安装的版本号: node -v
npm config get registry #查看npm下载的网址
npm config set registry https://registry.npm.taobao.org #修改npm下载的网址
C:UsersWangYiBo>npm install vue-cli -g #下载脚手架,下载一路没有飘红ERR.
C:UsersWangYiBo>vue -V #查看脚手架的下载版本
C:UsersWangYiBo>where vue #查看下载好的位置
C:UsersWangYiBoAppDataRoamingnpmvue
存放vue的项目代码 D:workspacevue
E:workspacevue>vue init webpack jt09
是一个版本控制的产品, 可以管理项目的每个文件的每个版本的记录 特点: 分布式开发的系统 发布了无数的 开源项目
1, 工作空间: 存放了项目代码的地方 2, 本地索引: 保存了要即将上传的文件 3, 本地仓库: 存了有了索引的即将上传的文件 4, 远程仓库: Gitee服务器,最终要上传的目的地 上传流程: 5, 新增add:是指 从工作空间 新增到 本地索引 6, 提价commit: 是指 从本地索引 提交到 本地仓库 7, 推送push: 是指 从本地仓库 推送到 远程仓库 下载流程: 8, 克隆clone: 是指 从远程仓库 克隆到 本地仓库
1, 安装Git.exe,下一步… 2, 去Gitee官网,注册账号 3, 工作空间: 在你的电脑里创建文件夹,存放即将上传的资源 ( E:workspacegitee ) 4, 远程仓库: 在Gitee的官网,创建远程仓库, 保存你上传好的资源 (登录Gitee的官网,右上角点加号,新建仓库,输入仓库名/开源,创建)
进到你的工作空间的文件夹里,执行以下命令:
#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:workspacegiteecgb2110>git add . #提交当前文件夹(cgb2110)里的所有资源
E:workspacegiteecgb2110>git commit -m "first commit" #提交,从本地索引到本地仓库,参数是提交的原因
E:workspacegiteecgb2110>git remote add origin https://gitee.com/cgblpx/cgb2110.git
#绑定本地仓库 和 远程仓库的关系
E:workspacegiteecgb2110>git push -u origin master #真正实现提交数据,提交成功了就刷新Gitee的官网
第一次提交 会弹出下面的用户名、密码框,填写码云的账号/手机号 就可以
重新创建远程仓库,并执行官网提示的一些命令
以上是脚本宝典为你收集整理的cgb2110-day13全部内容,希望文章能够帮你解决cgb2110-day13所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。