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>
相关文章
|
3月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
104 2
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
83 50
|
2月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2月前
|
监控 JavaScript 前端开发
如何在实际应用中测试和比较React和Vue的性能?
总之,通过多种方法的综合运用,可以相对客观地比较 React 和 Vue 在实际应用中的性能表现,为项目的选择和优化提供有力的依据。
51 1
|
2月前
|
JavaScript 测试技术 API
Jest进阶:测试 Vue 组件
Jest进阶:测试 Vue 组件
|
2月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
49 0
|
3月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
1107 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
3月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
243 0
|
3月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
73 0