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

简介: 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>
相关文章
|
9月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
770 2
|
8月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
636 137
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
1200 0
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
9月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
1027 11
|
11月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
781 1
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
11月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
548 0
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
1602 23