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>
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
72 3
|
27天前
|
定位技术
时尚的联系我们表单HTML模板(源码)
一款时尚的联系我们表单Html模板,带地图和所在位置,输入基本信息和信息发送,看起来很漂亮的联系我们页面。
38 1
时尚的联系我们表单HTML模板(源码)
|
22天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
2月前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
14 2
|
2月前
|
人工智能 监控 JavaScript
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
模拟依赖关系和 AI 是Vue.js测试的下一个前沿领域
30 1
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
163 0
|
2月前
|
JavaScript
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
深入解析:JS与Vue中事件委托(事件代理)的高效实现方法
45 0
|
2月前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
128 0
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信