muihtml5vue,MUI和VUE数据绑定mui框架入门（一）

MUI和VUE数据绑定 mui框架入门 (一)

mui.ajax或者mui.getJSON给我们这些对VUE以及AJAX一穷不通的小白们提供了一个很好的入门。但MUI框架&＃xff0c;还是有一些坑的&＃xff0c;比如&＃xff1a;

如果你是底部导航配合侧滑栏&＃xff0c;那么你就会体验到什么是 CAO TM D。我们静态写好后发给后端&＃xff0c;后端会把主页擦开分为底部导航和其他的子界面。但是这样侧滑栏就会有bug。

来回到我们的标题MUI与VUE结合给博客写一个小啊啪啪(app)

1.首先我们去下载 点开后右键保存&＃xff1a;vue.js

2.把vue.js放入MUI框架的项目文件中(这个就不做演示拉)

3.在index文件中画一个vue

// var shouye &＃61; new Vue({

// el: &＃39;#shouye&＃39;,

// data: {

// items: []

// }

// });

4.随后我们去MUI文档中复制一个ajax

mui.ajax(&＃39;http://server-name/login.php&＃39;,{

data:{

username:&＃39;username&＃39;,

password:&＃39;password&＃39;

},

dataType:&＃39;json&＃39;,//服务器返回json格式数据

type:&＃39;post&＃39;,//HTTP请求类型

timeout:10000,//超时时间设置为10秒&＃xff1b;

headers:{&＃39;Content-Type&＃39;:&＃39;application/json&＃39;},

success:function(data){

//服务器返回响应&＃xff0c;根据响应结果&＃xff0c;分析是否登录成功&＃xff1b;

...

},

error:function(xhr,type,errorThrown){

//异常处理&＃xff1b;

console.log(type);

}

});

男人嘛&＃xff0c;总得长嘛&＃xff0c;你是说吧&＃xff01;就直接第一个好了&＃xff0c;

因为我们是只是调用端口 所以得一些参数可以不要

// data:{

// username:&＃39;username&＃39;,

// password:&＃39;password&＃39;

// },

直接删除了&＃xff0c;这里枫瑞博客给大家推选2个AIP

本博客&＃xff1a;https://www.frbkw.com/wp-json/wp/v2/posts

知乎“日”报&＃xff1a;https://news-at.zhihu.com/api/4/news/latest

(为啥日加了双引号&＃xff0c;中国文化博大精深嘛&＃xff0c;你怎么知道是知乎日版&＃xff0c;还是知乎“日”报呢&＃xff1f;)

整理后大概是这里样子的&＃xff1a;

mui.ajax(&＃39;https://www.frbkw.com/wp-json/wp/v2/posts&＃39;, {

dataType: &＃39;json&＃39;, //服务器返回json格式数据

type: &＃39;get&＃39;, //HTTP请求类型

timeout: 10000, //超时时间设置为10秒&＃xff1b;

headers: {

&＃39;Content-Type&＃39;: &＃39;application/json&＃39;

},

success: function(data) {

//服务器返回响应&＃xff0c;根据响应结果&＃xff0c;分析是否登录成功&＃xff1b;

...

},

error: function(xhr, type, errorThrown) {

//异常处理&＃xff1b;

}

});

5.验证数据是否有用&＃xff0c;我们打开模拟器&＃xff0c;连接到hbuilder或者hubilder x

连接后我们我们在服务器返回响应&＃xff0c;根据响应结果&＃xff0c;分析是否登录成功&＃xff1b;下方给打印一下数据

// console.log(data[0].title.rendered);

如图&＃xff1a;

MUI和VUE数据绑定 mui框架入门 (一) 枫瑞博客

如果有出现这个 鸡脖(JB) 就说明数据是OJBK的

数据是可以的 我们再把数据给放回到items中

// shouye.items &＃61; data

直接写刚刚那句话下方就可以了&＃xff1a;

最后的效果代码图下

mui.ajax(&＃39;https://www.frbkw.com/wp-json/wp/v2/posts&＃39;, {

dataType: &＃39;json&＃39;, //服务器返回json格式数据

type: &＃39;get&＃39;, //HTTP请求类型

timeout: 10000, //超时时间设置为10秒&＃xff1b;

headers: {

&＃39;Content-Type&＃39;: &＃39;application/json&＃39;

},

success: function(data) {

//服务器返回响应&＃xff0c;根据响应结果&＃xff0c;分析是否登录成功&＃xff1b;

console.log(data[0].title.rendered);

shouye.items &＃61; data

},

error: function(xhr, type, errorThrown) {

//异常处理&＃xff1b;

}

});

6.MUI绑定VUE 实现数据传输

在我们需要的实现数据传输的地方给UL添加一个id 这个id就是vue的el&＃xff1a;"#你的id"

随后就是v-for 渲染在li添加v-for&＃61;"item in items"

MUI和VUE数据绑定 mui框架入门 (一) 枫瑞博客

代码如下:

最后在绑定标题字段 图片之类就好了&＃xff1a;效果图

MUI和VUE数据绑定 mui框架入门 (一) 枫瑞博客

如果喜欢枫瑞博客的教程请给枫瑞一个赞助一个烧饼维持服务器&＃xff0c;免费分享vue以及MUI教程资源

原创文章&＃xff0c;作者&＃xff1a;枫瑞博客&＃xff0c;如若转载&＃xff0c;请注明出处&＃xff1a;https://www.frbkw.com/1276/