html静态页面通过vue实现数据动态化

看完觉得有用记得给个赞奥，你的赞就是我的动力1.引入vue，引入jQuery（因为等下用Ajax请求数据用到jQuery）如：<script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="http://libs.baidu.

俊逸_Ajay

9978人浏览 · 2018-06-07 22:24:51

俊逸_Ajay · 2018-06-07 22:24:51 发布

看完觉得有用记得给个赞奥，你的赞就是我的动力

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

如：

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

2.初始化并绑定vue

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

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
//你的html代码
    </div>
</body>
</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相关语法来写进动态数据了

看完觉得有用记得给个赞奥，你的赞就是我的动力

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^