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

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>

<link  rel="stylesheet"  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />

    <!-- 引入组件库 -->

    <script src="https://unpkg.com/element-ui/lib/index.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">

         {{str}}

    </div>

</body>

</html>

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,625评论 0 7
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,426评论 0 3
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,304评论 1 22
  • PNG 有PNG8和truecolor PNG PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,...
    hudaren阅读 1,660评论 0 0
  • PS:转载请注明出处作者: TigerChain地址: https://www.jianshu.com/p/218...
    TigerChain阅读 26,392评论 5 70