本帖最后由 fengrui99 于 2019-1-6 12:26 编辑
原文来自：https://www.frbkw.com/1276/
1.首先我们去下载 点开后右键保存：vue.js
2.把vue.js放入MUI框架的项目文件中（这个就不做演示拉）
3.在index文件中画一个
[HTML] 纯文本查看 复制代码 var shouye = new Vue({
el: '#shouye',
data: {
items: []
}
});
4.随后我们去MUI文档中复制一个
[Asm] 纯文本查看 复制代码 mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{'Content-Type':'application/json'},
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
...
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});
因为我们是只是调用端口 所以得一些参数可以不要
data:{
username:'username',
password:'password'
}
,直接删除了，这里枫瑞博客给大家推选2个AIP
博客：https://www.frbkw.com/wp-json/wp/v2/posts
知乎“日”报：https://news-at.zhihu.com/api/4/news/latest
（为啥日加了双引号，中国文化博大精深嘛，你怎么知道是知乎日版，还是知乎“日”报呢？） 整理后大概是这里样子的：
[Asm] 纯文本查看 复制代码 mui.ajax('https://www.frbkw.com/wp-json/wp/v2/posts', {
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
...
},
error: function(xhr, type, errorThrown) {
//异常处理；
}
});
5.验证数据是否有用，我们打开模拟器，连接到hbuilder或者hubilder x
连接后我们我们在服务器返回响应，根据响应结果，分析是否登录成功；下方给打印一下数据
console.log(data[0].title.rendered)
;如图：
如果有出现这个 鸡脖(JB) 就说明数据是OJBK的
数据是可以的 我们再把数据给放回到
items中
shouye.items = data
直接写刚刚那句话下方就可以了：
最后的效果代码图下
[Asm] 纯文本查看 复制代码 mui.ajax('https://www.frbkw.com/wp-json/wp/v2/posts', {
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
console.log(data[0].title.rendered);
shouye.items = data
},
error: function(xhr, type, errorThrown) {
//异常处理；
}
});
6.MUI绑定VUE 实现数据传输
在我们需要的实现数据传输的地方给UL添加一个id 这个id就是vue的el："#你的id"
随后就是v-for 渲染在li添加v-for="item in items"
代码如下:
[Asm] 纯文本查看 复制代码 <!-- 最新文章列表 -->
<div>
<ul class="mui-table-view tx" id="shouye">
<li class="mui-table-view-cell mui-media tx" v-for="item in items" style="margin-bottom: 20px;border-radius: 10px;background-color: #FFFFFF;box-shadow:1px 5px 5px #abbbd0;border: 1px solid #d8d8d8;">
<a href="javascript:;">
<div class="mui-media-body">
<div class="mui-ellipsis-2 biaoti-hen">
{{item.title.rendered}}
</div>
</div>
<img class="center-img" :src="item.featured_image_src">
</a>
</li>
</ul>
</div>
最后在绑定标题字段 图片之类就好了：效果图
| 
发表于 2019-1-6 12:23
|
发表于 2019-1-7 10:19
就2人 这帖子要沉了
