cgb2110-day13
Posted cgblpx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cgb2110-day13相关的知识，希望对你有一定的参考价值。
`@[toc]
一,路由的练习
–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,欢迎您回来~
您今年age岁~
</div>
<script>
new Vue(
el:"#app",
data()
return
name : '',
age : 0
,
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
this.age = res.data.age;//20
console.log(res.data.hobby);//['足球','篮球','乒乓球']
)
)
</script>
</body>
</html>
–4,总结
四,
以上是关于cgb2110-day13的主要内容，如果未能解决你的问题，请参考以下文章