vue生成静态html文件_html静态页面通过嵌入vue实现数据动态化

1.引入vue，引入jQuery(因为等下用Ajax请求数据用到jQuery)

如：

2.初始化并绑定vue

首先在自己的网页body内添加一个div包括所有内容，并给这个div设置id

如：

Document

{{str}}

3.创建vue并挂载到页面(如果在单独创建js文件来写，则需在htmll中引入这个js文件)

创建如下：

window.onload = function() {

new Vue({

el: "#app",//将vue挂载到html中你创建的那个带id="app"上

data: {

str:'测试数据'，

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相关语法来写进动态数据了