江苏龙网

  1. 主页 > 生活百科 > >

实操 vue全套教程( 三 )

vue


  通常一个应用会以一棵嵌套的组件树的形式来组织：

实操 vue全套教程

文章插图
 
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件 。
4.简单定义一个组件注意：在实际开发中，我们并不会用以下方式开发组件，而是采用 vue-cli 创建 .vue 模板文件的方式开发，以下方法只是为了让大家理解什么是组件 。
<div id="app"><beixi></beixi></div><script>//注册组件Vue.component("beixi",{template:'<li>hello</li>'});var app = new Vue({el:"#app",});</script>说明：
  • Vue.component()：注册组件
  • beixi：自定义组件的名字
  • template：组件的模板
5.使用props属性动态传递参数<body><div id="app"><!--组件：使用props把值传递给组件--><blog-post v-for="item in items" v-bind:value="item"></blog-post></div><script>Vue.component("blog-post",{props:['value'],template:'<li>{{value}}</li>'});var app = new Vue({el:"#app",data:{items:['beixi','jzj','贾志杰']}});</script></body>说明：
v-for=“item in items”：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件
v-bind:value=https://www.isolves.com/it/cxkf/kj/2022-08-02/“item”：将遍历的 item 项绑定到组件中 props 定义的名为 value属性上；= 号左边的 value 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值
五、AxIOS异步通信1.什么是Axios  Axios 是一个开源的可以用在浏览器端和 NodeJS 的异步通信框架，她的主要作用就是实现 AJAX 异步通信，其功能特点如下：
  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API [JS中链式编程]
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF（跨站请求伪造）
  GitHub：https://github.com/axios/axios
  中文文档：http://www.axios-js.com/
2.为什么要使用 Axios  由于 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度分离原则），所以 Vue.js 并不包含 AJAX 的通信功能，为了解决通信问题，作者单独开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本以后停止了对该插件的维护并推荐了 Axios 框架 。少用jQuery，因为它操作Dom太频繁！
3.第一个 Axios 应用程序  咱们开发的接口大部分都是采用 JSON 格式，可以先在项目里模拟一段 JSON 数据，数据内容如下：创建一个名为 data.json 的文件并填入上面的内容，放在项目的根目录下
{"name": "贝西说","url": "https://blog.csdn.net/beixishuo","page": 1,"isNonProfit": true,"address": {"street": "太谷","city": "山西晋中","country": "中国"},"links": [{"name": "bilibili","url": "https://space.bilibili.com/474668932"},{"name": "贝西说","url": "https://blog.csdn.net/beixishuo"},{"name": "百度","url": "https://www.baidu.com/"}]}完整示例：
<!--引入 JS 文件--><script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script><!--在线引入axios 。在项目开发中会安装axios组件(npm install axios)--><script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><div id="app"><div>{{info.name}}</div><div>{{info.address}}</div><a v-bind:href="info.url">贝西说</a></div><script>var app=new Vue({el:"#app",//data: 属性data:function(){//需要处理(返回)后台数据在页面上渲染时使用return{//请求的返回参数格式必须和json字符串一样info:{name:null,//相当于形参占位，实际参数data.json会赋予url:null,address:{street:null,city:null,country:null}}}},mounted:function(){//mounted钩子函数，相当于java中main函数 。可以调用methods中定义的函数// axios.get('data.json').then(resp=>(console.log(resp.data)));axios.get('data.json').then(resp=>(this.info=resp.data));}})</script></body>


推荐阅读


上一篇：深入浅出理解分布式一致性Paxos算法

下一篇：关于人工智能专业你了解多少？需要学什么？有关工作如何？