MUI和VUE数据绑定 mui框架入门 （一）
mui.ajax或者mui.getJSON给我们这些对VUE以及AJAX一穷不通的小白们提供了一个很好的入门。但MUI框架，还是有一些坑的，比如：
如果你是底部导航配合侧滑栏，那么你就会体验到什么是 CAO TM D。我们静态写好后发给后端，后端会把主页擦开分为底部导航和其他的子界面。但是这样侧滑栏就会有bug。
来回到我们的标题MUI与VUE结合给博客写一个小啊啪啪（app）
1.首先我们去下载 点开后右键保存： vue.js
2.把vue.js放入MUI框架的项目文件中（这个就不做演示拉）
3.在index文件中画一个vue
// var shouye = new Vue({ // el: '#shouye', // data: { // items: [] // } // });
4.随后我们去MUI文档中复制一个ajax
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
（为啥日加了双引号，中国文化博大精深嘛，你怎么知道是知乎日版，还是知乎“日”报呢？）
整理后大概是这里样子的：
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
直接写刚刚那句话下方就可以了：
最后的效果代码图下
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”
代码如下:
<!-- 最新文章列表 --> <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>
最后在绑定标题字段 图片之类就好了：效果图
如果喜欢枫瑞博客的教程请给枫瑞一个赞助一个烧饼维持服务器，免费分享vue以及MUI教程资源
