html使用vue模板、html引入vue.js-测试demo-阿里云开发者社区

html使用vue模板、html引入vue.js-测试demo

2023-09-17 118

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： html使用vue模板、html引入vue.js-测试demo

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>html引入vue.js</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />   
        <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8">
    </script> 
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in dataList" :key="index">{{item.title}}</li>
            </ul>
        </div>       
    </body>
  <script>
        var demo=new Vue({
            el:'#app',
            data() {
              return {
                dataList:[{
            title: '1111',
            id: 1,
          },{
            title: '2222',
            id: 2,
          }],
          title: '测试回显'
              }
            },
            created: function(){
                this.getImg()              //定义方法
            },
            methods: {
                getImg: function(){
                   console.log(1111)
                   //-----------
                   var that = this;
                   axios.defaults.headers = {
            'content-type': 'application/json;charset=utf-8',
            Authorization: window.localStorage.getItem("tokenH"),
            appid: window.localStorage.getItem("appid")
          }
          axios.post('http://192.168.6.19:10097/api/question/commitRandomQuestion', arr).then(function(
            response) {
            console.log("正常返回：", response);
            if (response.data.code == 1000) {
            }
          }).catch(function(error) {
            console.log("报错了", error)
          })
          //--------------
                }
            }
        })
    </script>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML使用vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div @click="click()">点击我出弹窗</div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: '我是弹窗哦~'
      },
      methods: {
        click: function(msg) {
          alert(this.title)
        }
      }
    });
  </script>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML使用vue</title>
    <!-- 先引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入element-UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入axios第三方请求数据库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div @click="click()">点击我出弹窗</div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: '我是弹窗哦~'
      },
      methods: {
        click: function() {
          alert(this.title)
        }
      }
    });
  </script>
</html>

html使用vue模板、html引入vue.js-测试demo

热门文章

最新文章

相关课程

相关电子书

相关实验场景