Vue学习笔记之组件与通信
2024-10-21 07:31:54
1. 组件
1.1. 什么是组件
- 组件是可复用的Vue实例, 说白了就是一组可以重复使用的模板,通常一个应用会以一棵嵌套的组件树的形式来组织:
- 例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件
1.2. 第一个Vue组件
使用Vue.component()方法注册组件,格式如下:
<div id="app">
<pan></pan>
</div>
<script type="text/javascript">
//先注册组件
Vue.component("pan",{
template:'<li>Hello</li>'
});
//再实例化Vue
var vm = new Vue({
el:"#app",
});
</script>
- 注意:在实际开发中,我们并不会用以下方式开发组件,而是采用vue-cli创建,vue模板文件的方式开发,以下方法只是为了理解什么是组件
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件与通信</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<pan></pan>
</div>
<script type="text/javascript">
//先注册组件
Vue.component("pan",{
template:'<li>Hello</li>'
});
var app = new Vue({
el: "#app",
data: {
}
})
</script>
</body>
</html>
- 说明:
- Vue.component():注册组件
- pan:自定义组件的名字
- template:组件的模板
结果如下:
1.3. 使用props属性传递参数
像上面那样用组件没有任何意义,所以我们是需要传递参数到组件的,此时就需要使用props属性了!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件与通信</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--组件,传递给组件中的值:props-->
<cpn v-for="item in items" v-bind:itemchild="item" />
</div>
<script>
// 定义一个vue组件component组件
Vue.component("cpn", {
props: ['itemchild'],
template: `<li>{{itemchild}}</li>`
})
var vm = new Vue({
el: '#app',
data: {
items: ['Java', 'Linux', '前端']
}
});
</script>
</body>
</html>
- 说明:
- v-for="item in items":遍历Vue实例中定义的名为items的数组,并创建同等数量的组件
- v-bind:itemchild="item":将遍历的item项绑定到组件中props定义名为itemchild属性上;= 号左边的itemchild为props定义的属性名,右边的为item in items 中遍历的item项的值
最后结果图:
2. 通信
2.1. 什么是Axios
Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架, 她的主要作用就是实现AJAX异步通信,其功能特点如下:
- 从浏览器中创建XMLHttpRequests
- 从node.js创建http请求
- 支持Promise API[JS中链式编程]
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF(跨站请求伪造)
GitHub:https://github.com/axios/axios 中文文档:http://www.axios-js.com/
2.2. 为什么要用Axios
由于Vue.js是一个视图层框架并且作者(尤雨溪) 严格准守SoC(关注度分离原则)所以Vue.js并不包含AJAX的通信功能, 为了解决通信问题, 作者单独开发了一个名为vue-resource的插件, 不过在进入2.0版本以后停止了对该插件的维护并推荐了Axios框架。少用jQuery, 因为它操作Dom太频繁!
2.3. 第一个Axios应用程序
咱们开发的接口大部分都是采用JSON格式, 可以先在项目里模拟一段JSON数据, 数据内容如下:创建一个名为data.json的文件并填入上面的内容, 放在项目的根目录下
{
"sites": [{
"name": "google",
"url": "www.google.com"
},
{
"name": "微博",
"url": "www.weibo.com"
}
]
}
完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件与通信</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div>地名:{{info.sites[0].name}}</div>
<div>链接:<a v-bind:href="info.url" target="_blank">{{info.sites[0].url}}</a> </div>
</div>
<script>
// 定义一个vue组件component组件
Vue.component("cpn", {
props: ['itemchild'],
template: `<li>{{itemchild}}</li>`
})
var vm = new Vue({
el: '#app',
data() {
return {
info: {
name: null,
url: null
}
}
},
mounted() { //钩子函数
axios
.get('data.json')
.then(response => (this.info = response.data));
}
});
</script>
</body>
</html>
结果图:
- 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
- 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
- 我们在data中的数据结构必须和Ajax响应回来的数据格式匹配!
为什么要用mounted()钩子函数呢?这就涉及到Vue实例对象的生命周期:
3. 参考资料
[1]Vue.js 介绍 — Vue.js 中文文档 (bootcss.com)
[2]Vue: 狂神Vue笔记+源码 - Gitee.com
最新文章
- 转:Java.file
- [Android]AndroidBucket增加碎片SubLayout功能及AISubLayout的注解支持
- Qt Creator 中关于调试器的设置
- Java 设计一个贷款计算器 简易
- hdu1394
- spring AOP 是如何一步一步被简化的
- java基础(Fundamental)
- (后端)注意hibernate中对象的set方法修改数据库
- LeetCode 292 Nim Game 解题报告
- Eclipse项目修改没有同步到编译的问题
- python第九课——while死循环
- 【LOJ】#2040. 「SHOI2015」零件组装机
- SQL Server会话KILL不掉,一直处于KILLED /ROLLBACK状态情形浅析[转]
- 调整弹出对话框在ASP.NET应用程序的大小
- HDU3308 线段树(区间合并)
- 【BZOJ】2060: [Usaco2010 Nov]Visiting Cows 拜访奶牛(树形dp)
- c#输入方法名来调用方法(反射)
- IC卡文件系统的逻辑结构【转】
- 【bzoj5055】膜法师 离散化+树状数组
- Win7下nginx默认80端口被System占用,造成nginx启动报错的解决方案