vue界面转为静态html,html静态页面通过vue实现数据动态化
看完觉得有用记得给个赞奥,你的赞就是我的动力1.引入vue,引入jQuery(因为等下用Ajax请求数据用到jQuery)如:2.初始化并绑定vue首先在自己的网页body内添加一个div包括所有内容,并给这个div设置id如:Document//你的html代码3.创建vue并挂载到页面(如果在单独创建js文件来写,则需在htmll中引入这个js文件)创建如下:window.onload = f
看完觉得有用记得给个赞奥,你的赞就是我的动力
1.引入vue,引入jQuery(因为等下用Ajax请求数据用到jQuery)
如:
2.初始化并绑定vue
首先在自己的网页body内添加一个div包括所有内容,并给这个div设置id
如:
Document
//你的html代码
3.创建vue并挂载到页面(如果在单独创建js文件来写,则需在htmll中引入这个js文件)
创建如下:
window.onload = function() {
new Vue({
el: "#app",//将vue挂载到html中你创建的那个带id="app"上
data: {
aboutData: [], //建一个空数组,用来保存调用接口获取的数据
},
created: function() {
this.getRoute();
},
mounted() {
},
methods: {
getRoute: function() {
var that = this;
$.ajax({
type: "GET",
url:
"填写你的数据接口地址",
dataType: "json",
success: function(response) {
aboutData = response;
//写在获取数据成功后你想进行的操作
},
error: function() {
alert("请求失败");
}
});
}
});
};
4.可以在html代码中调用vue相关语法来写进动态数据了
看完觉得有用记得给个赞奥,你的赞就是我的动力
更多推荐
所有评论(0)