原型Html转Vue（详细步骤）

已于 2024-06-12 20:10:43 修改
阅读量527 收藏 11
点赞数 5
分类专栏： vue 文章标签： html vue.js 前端
于 2024-05-06 23:12:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20236937/article/details/138508704
版权

原型Html转Vue（详细步骤）

前言：ui原型交互后切图给开发程序员，开发程序员嵌入改造
本文是html页面转vue页面

html的页面构成

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>某某大屏页面</title>
		<!--公共的css样式的文件-->
		<link rel="stylesheet" href="css/public.css" />
		<!--特别的css样式的文件-->
		<link rel="stylesheet" href="css/style.css" />
	</head>
	
	<body>
		<div class="bs_wrapper idx_wrapper" id="app">
			<div class="bs_header">
				<div class="h_time">12:22:05 &nbsp;2024-04-19 &nbsp;星期五</div>
			</div>
		</div>

        <!--jq版本包-->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!--对DOM（文档对象模型）元素进行jq操作：里面都是一些操作节点的一系列方法-->
		<script type="text/javascript" src="js/index.js"></script>
		<script>
		<!--dom-->
			$(".tab_tit .item ").click(function() {
				$(this).addClass("active").siblings().removeClass("active")
			})
		</script>
	</body>


</html>

HTML页面的加载顺序是一个复杂但有序的过程。

以下是HTML页面加载的一般顺序和相关元素的角色：

元素说明
DOCTYPE声明首先，浏览器会读取DOCTYPE声明，这告诉浏览器文档使用哪种HTML版本
HTML（1）然后，浏览器从<html>标签开始解析HTML文档
（2）html元素是文档的根元素，包含整个页面的内容。
Head接着，浏览器会解析<head>标签内的内容
（1）文档的元数据，如<title>、<meta>标签等。
（2）样式表链接（<link rel="stylesheet" ...>），浏览器会下载并解析这些CSS文件。
（3）脚本链接（<script src="...">），浏览器会尝试下载并解析这些外部JavaScript文件。但是，如果脚本在<head>中并且没有设置async或defer属性，那么浏览器会等待脚本下载并执行完成后再继续解析HTML。
（4）还有其他可能的内容，如<style>标签内的CSS样式。
Body当<head>解析完成后，浏览器会开始解析<body>标签内的内容。
（1）浏览器会按照HTML文档中的顺序加载和渲染DOM（文档对象模型）元素。
（2）如果在<body>中遇到<script>标签并且没有设置async或defer属性，浏览器会暂停HTML解析，下载并执行JavaScript代码，然后再继续解析HTML。
（3）同时，浏览器会开始加载图片、音频、视频等外部资源。

说到DOM（文档对象模型） 就不得不讲一下DOM和CSS/JavaScript的关系的关系

  • 浏览器对HTML文档的解析结果为DOM
  • CSS用于描述DOM元素的样式和布局
  • JavaScript可以修改DOM结构、样式和行为。它最好在DOM加载完成后执行，
    了确保 JavaScript 行为能够正确地与 DOM 交互并提供良好的用户体验和性能，通常建议在 DOM 加载完成后执行这些行为。

说到JavaScript 就不得不讲一下jQuery的加载

  • jQuery是一个流行的JavaScript库，它简化了JavaScript编程的复杂性。
  • 如果在HTML文档中使用jQuery，通常需要将jQuery库文件（如jquery.min.js）通过<script>标签引入。
  • jQuery的加载和执行顺序取决于<script>标签在HTML文档中的位置和属性设置。
  • 如果将jQuery库文件放在<head>中，并且没有设置async或defer属性，那么浏览器会等待jQuery库文件下载并执行完成后再继续解析HTML。
  • 如果将jQuery库文件放在<body>的底部，或者设置了async或defer属性，那么浏览器可以在下载和执行jQuery库文件的同时继续解析和渲染HTML。
  • jQuery的$(document).ready()函数用于在DOM加载完成后执行JavaScript代码。
    这意味着即使jQuery库文件在<head>中加载，使用$(document).ready()包裹的代码也会在DOM加载完成后才执行。

总结：HTML页面的加载顺序是从上到下，
先解析<head>再解析<body>。
DOM是浏览器对HTML文档的解析结果，CSS用于描述DOM元素的样式和布局，
JavaScript（包括jQuery）可以修改DOM结构、样式和行为。
jQuery的加载和执行顺序取决于<script>标签在HTML文档中的位置和属性设置。

vue的页面构成

<template>
  <div class="main">
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>
  </div>
</template>
 
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如工具js：
//import "../../../util/newdp/js/jquery-3.3.1.js";
//import "../../../util/newdp/js/index2.js";
//例如导组件：
//import 《组件名称》 from '《组件路径》';
 
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
   //如果有导入组件的话，需要在这里进行注入
   },
  data() {
    //这里存放数据
    return {
      //这个没问题吧，很容易想到
      message: 'Hello Vue!',  
      counter: 0  
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    increment() {  
      this.counter++;  
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  //生命周期 - 创建之前
  beforeCreate() {}, 
  //生命周期 - 挂载之前
  beforeMount() {}, 
  //生命周期 - 更新之前
  beforeUpdate() {}, 
  //生命周期 - 更新之后
  updated() {}, 
  //生命周期 - 销毁之前
  beforeDestroy() {}, 
  //生命周期 - 销毁完成
  destroyed() {}, 
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}, 
};
</script>
<style lang="scss" scoped>
/*@import url(); 引入公共css类*/
.main {
  height: 100vh;
}
</style>

Vue.js 是一个构建用户界面的渐进式框架。在 Vue 中，一个页面（或称为组件）的组成结构通常可以分为以下几个部分：

  1. 模板 (Template)

    • 模板定义了组件的 HTML 结构。
    • 在这里，你可以使用 Vue 的模板语法来绑定数据、监听事件、渲染列表等。
    • 模板通常写在 .vue 文件的 <template> 标签内。

  2. 脚本 (Script)

    • 脚本部分包含了组件的逻辑，如数据、方法、计算属性、生命周期钩子等。
    • 使用 ES6 语法（或 TypeScript）编写。
    • 通常写在 .vue 文件的 <script> 标签内。

  3. 样式 (Style)

    • 样式定义了组件的外观和布局。
    • 可以使用普通的 CSS、预处理器（如 Sass、Less、Stylus）或 CSS-in-JS 库（如 styled-components）。
    • 样式通常写在 .vue 文件的 <style> 标签内，可以使用 scoped 或 module 属性来确保样式只作用于当前组件。
结构名称说明
模板 (Template)模板定义了组件的 HTML 结构。
（1）在这里，你可以使用 Vue 的模板语法来绑定数据、监听事件、渲染列表等。
（2）模板通常写在 .vue 文件的 <template> 标签内。
脚本 (Script)脚本部分包含了组件的逻辑，如数据、方法、计算属性、生命周期钩子等。
（1）使用 ES6 语法（或 TypeScript）编写。
（2）通常写在 .vue 文件的 <script> 标签内。
样式 (Style)样式定义了组件的外观和布局。
（1）可以使用普通的 CSS、预处理器（如 Sass、Less、Stylus）或 CSS-in-JS 库（如 styled-components）。
（2）样式通常写在 .vue 文件的 <style> 标签内，可以使用 scoped 或 module 属性来确保样式只作用于当前组件。

顺便说一下vue生命周期的顺序步骤 （从先到后）

结构名称说明
beforeCreate（1）在实例初始化之后，数据观测 (data observer) 和事件/侦听器 (event/watcher) 设置之前被调用。
（2） 此时 data、computed、methods 和 watch 还未被初始化，无法访问它们。
created（1）在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：
数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。
（2）此时可以访问 data、computed 中的属性和 methods 中的方法，但无法访问 DOM。
beforeMount（1）在挂载开始之前被调用：相关的 render 函数首次被调用
（2）此时 el 和 $el 都尚未被创建，但你可以修改 data 中的数据，这些修改在 mounted 时会触发视图更新。
mounted（1）el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个 in-document 元素，当 mounted 被调用时 vm.$el 也在文档内。
（2）此时可以访问 DOM，并进行相关的 DOM 操作。
beforeUpdate（1）数据更新时调用，发生在虚拟 DOM 打补丁之前。可以在这个钩子中访问现有的 DOM，比如手动移除已添加的事件监听器。
（2）这个阶段不适合进行 DOM 操作，因为此时的 DOM 还未更新到最新状态。
updated（1）由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
（2）当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
beforeDestroy（1）实例销毁之前调用。在这一步，实例仍然完全可用。
（2） 在这个阶段，this 仍然完全可用，你可以清理定时器、移除事件监听器、解绑全局事件、销毁插件对象等操作。
destroyed（1） Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑，所有的事件监听器会被移除，所有的子实例也都会被销毁。
（2）此时组件实例上的所有东西都已经解绑了，它们将不会再触发任何 Vue 的响应式系统。
activated（1）被 keep-alive 缓存的组件激活时调用。
（2）该钩子在服务器端渲染期间不被调用。
deactivated（1） 被 keep-alive 缓存的组件停用时调用。
（2） 该钩子在服务器端渲染期间不被调用。

注意，当组件被 <keep-alive> 包裹时，activated 和 deactivated 这两个生命周期钩子会被触发，
而不是 mounted 和 destroyed。
这是因为 <keep-alive> 会缓存组件实例，而不是销毁并重新创建它们。

开始转（可直接看这个）

步骤如下
（1）html的<body>转为vue里面的 <template>
（2）html的 js文件 的引入方式
（3）html的 css文件的引入方式

举例
html页面

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>某某大屏页面</title>
		<!--公共的css样式的文件-->
		<link rel="stylesheet" href="css/public.css" />
		<!--特别的css样式的文件-->
		<link rel="stylesheet" href="css/style.css" />
	</head>
	
	<body>
		<div class="bs_wrapper idx_wrapper" id="app">
			<div class="bs_header">
				<div class="h_time">12:22:05 &nbsp;2024-04-19 &nbsp;星期五</div>
			</div>
		</div>

        <!--jq版本包-->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!--对DOM（文档对象模型）元素进行jq操作：里面都是一些操作节点的一系列方法-->
		<script type="text/javascript" src="js/index.js"></script>
		<script>
		<!--dom-->
			$(".tab_tit .item ").click(function() {
				$(this).addClass("active").siblings().removeClass("active")
			})
		</script>
	</body>

</html>

vue页面 （最终版）

里面涉及的引入路径一定要  './'或者 '../' 开头的，不然会找不到，切记

<template>
  <div style="overflow: scroll;height: 100vh;">
    
    <div class="bs_wrapper idx_wrapper" id="app">
      <div class="bs_header">
        <div class="h_time">12:22:05 &nbsp;2024-04-19 &nbsp;星期五</div>
      </div>
    </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import "../../../util/newdp/js/jquery-3.3.1.js"
import  {
  operation1,
  operation2,
  operation3,
  operation4,
  operation5,
  operation6,
  operation7} from "../../../util/newdp/js/index.js"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    jumpUrlDP(type) {
      this.$router.push(type);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 在组件的DOM元素挂载到页面之后执行这些操作
    console.log("政策概况--mounted()");
    operation1();
    operation2();
    operation3();
    operation4();
    operation5();
    operation6();
    operation7();
  },
  //生命周期 - 创建之前
  beforeCreate() {}, 
  //生命周期 - 挂载之前
  beforeMount() {}, 
  //生命周期 - 更新之前
  beforeUpdate() {}, 
  //生命周期 - 更新之后
  updated() {}, 
  //生命周期 - 销毁之前
  beforeDestroy() {}, 
  //生命周期 - 销毁完成
  destroyed() {}, 
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}, 
};
</script>
<style lang="scss" scoped>
/*@import url(); 引入公共css类*/
@import "../../../util/newdp/css/public.css";
@import "../../../util/newdp/css/style.css";

</style>

扩展css细节点
（1）scoped 表示只有当前页面受到影响
（2）实现穿透作用域操作的符号（/deep/ 和::v-deep 和＞＞＞）

在项目中为了避免页面间样式污染常用scoped组件私有化，
如果要改变element-ui的样式时需要用样式穿透才可复写样式。

场景语法（穿透符号）说明
使用的是css 原生样式>>>只作用于css，对于less和scss不起作用，如果是less和scss的话需要用到/deep/或::v-deep
vue1、vue2
（使用了lang=“scss” 或者 lang=“less”）		/deep/
vue3.0之后
（使用了lang=“scss” 或者 lang=“less”）		::v-deep

遇到的问题

为什么我这边的index.js 没有使用（import “…/…/…/util/newdp/js/index.js”）直接引入原因如下

(1) ui原型的JQ操作的js文件（也就是index.js）里面的写法一般为直接dom操作，如下示例

//地图浮框效果
$("#mapSvg>g>g,#mapWrap .point_wrap_box .point_wrap").mouseover(function(ev) {
	var ev = ev || event;
	$("#mapPop").show();
	$("#mapPop").css({
		left: ev.clientX + 20,
		top: ev.clientY
	});
});

// 读取区块名字
$("#mapSvg>g>g").mouseover(function(ev) {
	var citytext = $(this).find("text").data("name")
	$(".map_pop_tit").text(citytext)
});

初步的引入方式如下：

<script>  
import "../../../util/newdp/js/index.js", // 引入文件
  
export default {  
  name: 'MyComponent',  
  // ... 其他选项  
}  
</script>

结果 dom 操作无效

该方式会面临在vue里面全部失效的情况（原因：DOM 未加载完成，无法使用相关的DOM操作）

最开始我从网上看到可以使用 $(document).ready() 去实现（让dom先加载完全，在执行相关dom操作）

index.js 修改如下

将其jQuery操作 变成方法 且 使用 $(document).ready()

// jq-operations.js  
function operation1() {  
  // jQuery操作1  
 $("#mapSvg>g>g,#mapWrap .point_wrap_box .point_wrap").mouseover(function(ev) {
	var ev = ev || event;
	$("#mapPop").show();
	$("#mapPop").css({
		left: ev.clientX + 20,
		top: ev.clientY
	});
});
}  
  
function operation2() {  
  // jQuery操作2  
  // 读取区块名字
$("#mapSvg>g>g").mouseover(function(ev) {
	var citytext = $(this).find("text").data("name")
	$(".map_pop_tit").text(citytext)
});
}  
  
// ... 其他操作函数 
 
// 在文件末尾调用这些函数  
$(document).ready(function() {  
  operation1();  
  operation2();  
  // ... 调用其他操作函数  
});

修改的引入方式如下

<script>  
import "../../../util/newdp/js/index.js", // 引入文件
  
export default {  
  name: 'MyComponent',  
  // ... 其他选项  
}  
</script>

结果没什么用！！！（可能这一块的操作还是属于html那边的，我们要的是vue）

后续改成

index.js 修改如下

将其jQuery操作 变成方法 且 export 导出

export function operation1() {  
  // jQuery操作1  
 $("#mapSvg>g>g,#mapWrap .point_wrap_box .point_wrap").mouseover(function(ev) {
	var ev = ev || event;
	$("#mapPop").show();
	$("#mapPop").css({
		left: ev.clientX + 20,
		top: ev.clientY
	});
});
}  
  
export function operation2() {  
  // jQuery操作2  
  // 读取区块名字
$("#mapSvg>g>g").mouseover(function(ev) {
	var citytext = $(this).find("text").data("name")
	$(".map_pop_tit").text(citytext)
});
}  
  
// ... 其他操作函数

修改引入方式如下，同时需要交给vue页面的生命周期 mounted() 去触发 那些 dom操作

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import "../../../util/newdp/js/jquery-3.3.1.js"
import  {
  operation1,
  operation2
 } from "../../../util/newdp/js/index.js"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    jumpUrlDP(type) {
      this.$router.push(type);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 在组件的DOM元素挂载到页面之后执行这些操作
    console.log("政策概况--mounted()");
    operation1();
    operation2();
  },
  //生命周期 - 创建之前
  beforeCreate() {}, 
  //生命周期 - 挂载之前
  beforeMount() {}, 
  //生命周期 - 更新之前
  beforeUpdate() {}, 
  //生命周期 - 更新之后
  updated() {}, 
  //生命周期 - 销毁之前
  beforeDestroy() {}, 
  //生命周期 - 销毁完成
  destroyed() {}, 
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}, 
};
</script>

最终 那些dom操作 成功的生效了！！！

Slow菜鸟
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何将html模板资源转为vuecli项目(1)
2401_84435138的博客
05-02 623
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档**开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-Ykj0q6Vt-1714647625648)][外链图片转存中…(img-xkFYXC2k-1714647625649)]
基于VUE步骤进度条样式代码
04-06
基于VUE步骤进度条样式代码是一款响应式带图标的步骤进度条代码。
vue+html年会抽奖工具
01-19
vue+html年会抽奖工具
刚学的把HTML页面改到vue当中
一个一直在努力的前端小白，在为了成为全栈程序员的道路上加油！
07-04 2076
【代码】刚学的把HTML页面改到vue当中。
尚硅谷-谷粒商城P44Vue模板
weixin_44829804的博客
09-18 979
配置模板 <template> <div></div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { /
开发VUE插件详细步骤
qq122516902的博客
02-27 1943
开发VUE插件详细步骤一.前置知识1.混入 一.前置知识 1.混入 见官方文档https://cn.vuejs.org/v2/guide/mixins.html。 基本示例： 示例文件结构：
HTML页面转成Vue组件（数据可视化大屏）
qq_40661472的博客
07-21 7673
数据可视化大屏开发
html如何转换成vue文件,.vue文件如何跳转页面？
weixin_30910893的博客
06-03 4886
.vue文件如何跳转页面？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。vue在使用的过程中， .vue文件之间的跳转，常常通过 实现。 组件用于设置一个导航链接，切换不同 HTML 内容使用方法：简单写法demo2使用 v-bind 的写法demo2demo2传参的写法demo2这里传参需要在 router.js 中对 demo2 的路径进行配置，...
vue html转pdf
02-28
vue框架中html转pdf代码，很实用，适合项目常用作为工具类和平时开发调试用。
搭建一个简单的vue项目.html
04-19
搭建一个简单的vue项目win10系统 1、首先下一个node.js。网址 https://nodejs.org/ 然后傻瓜式安装，一直next。然后查看是否安装完成使用win+R后输入cmd,
在pycharm中开发vue的方法步骤
10-15
以下是详细的步骤和相关知识点： 一、配置PyCharm开发Vue项目 1. 安装Vue插件：首先，你需要在PyCharm的设置（Settings）中找到Plugins，搜索并安装Vue.js插件。这将为PyCharm添加Vue的语法高亮、智能提示等特性。 ...
Vue filter介绍及其使用详解
10-19
了解和熟练运用过滤器是提升Vue.js开发技能的重要步骤。希望本文能帮助你更好地理解和使用Vue filters，为你的项目带来更多的可能性。在实际开发中，根据需求选择和定制过滤器，将使得代码更加简洁且易于维护。
在Vue中使用antv的示例代码
10-15
本文将详细介绍如何在Vue项目中使用AntV的G2库进行数据图表的创建。 首先，要在Vue项目中使用AntV，我们需要进行以下步骤： 1. **安装AntV/G2**：在命令行中使用`yarn`或`npm`来安装AntV/G2库。例如，使用`yarn`的...
vue-cli如何快速构建vue项目
08-30
以下是使用 Vue CLI 快速构建 Vue 项目的步骤： 1. 安装 Vue CLI：使用 npm 全局安装 Vue CLI，命令为 `$ npm install -g vue-cli`。 2. 创建工作空间：使用命令 `$ vue init webpack vuetest` 创建自己的工作空间...
Vue中使用Lodop插件实现打印功能的简单方法
10-15
以下将详细介绍如何在Vue中使用Lodop插件。 首先，我们需要了解Lodop的基本使用方法。在网页中实现打印通常包括以下几个步骤： 1. **初始化**：调用`LODOP.PRINT_INIT("打印任务名")`初始化打印任务。任务名可以...
如何将html模板资源转为vuecli项目，2024阿里巴巴前端面试真题解析
最新发布
m0_60607971的博客
04-03 590
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记JavaScript 学习笔记Vue 学习笔记。
html5怎么改为vue_让Vue项目更丝滑的几个小技巧
weixin_39605414的博客
11-20 1012
前几天有朋友给我发了一段代码，然后说Vue有bug，他明明写的没问题，为啥数据就不响应呢，一定是Vue的bug？我感觉他比尤雨溪要牛逼，高攀不起，就没有理他了。但是确实有时候我们在开发时候会遇到数据不响应的情况，那怎么办呢？ 数据不响应，可能是用法有问题 比如下面这段代码:用户名:{{userInfo.name}}用户性别:{{userInfo.sex}}"userInfo....
将html转为vue,vue将HTML转PDF导出(纯干货)
weixin_34477616的博客
06-02 2606
第〇步：效果返参格式image.png导出格式(此时为PDF文件)image.png步骤一npm 安装 html2canvas 和 jspdfnpm install html2canvas jspdf --save步骤二在某文件夹中创建名为htmlToPdf.js的文件image.png在htmlToPdf.js中的代码如下：// 导出页面为PDF格式import html2Canvas from...
html文件怎么转换成vue文件,vue文件怎样运行？
weixin_28871989的博客
06-03 9295
vue文件怎样运行？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1、首先，列出来我们需要的东西：node.js环境(npm包管理器)vue-cli 脚手架构建工具cnpm npm的TB镜像2、如果你是用vue-cli webpack builid之后，放到web服务器，访问index.html就可以运行了。常见的web服务器有tomcat，ngin...
vue访问index.html函数
07-16
### 回答1： Vue.js是一个JavaScript框架，用于构建用户界面。在Vue中，我们通常使用Vue实例来管理数据和方法。要访问index.html中的函数，我们需要将这些函数定义在Vue实例的methods选项中。 首先，在index.html中定义一个函数，例如： ```html <script> function myFunction() { alert("Hello from index.html!"); } </script> ``` 然后，在Vue实例中，可以通过methods选项访问index.html中的函数。在Vue实例的methods选项中，我们将定义一个与index.html中函数同名的方法。例如： ```javascript var app = new Vue({ el: '#app', methods: { myFunction: function() { myFunction(); } } }); ``` 在上面的代码中，我们定义了一个Vue实例app，并在methods选项中定义了一个myFunction方法。在该方法中，我们调用了index.html中定义的myFunction函数。 最后，我们可以通过在Vue模板中调用myFunction来访问index.html中的函数。例如，在App.vue组件的模板中，我们可以这样调用myFunction方法： ```html <template> <div> <button @click="myFunction">点击我调用index.html中的函数</button> </div> </template> ``` 当我们点击按钮时，myFunction方法将被调用，从而执行了index.html中定义的函数，并弹出一个alert框显示"Hello from index.html!"。 通过上述步骤，我们可以在Vue中访问和调用index.html中的函数。 ### 回答2： 在Vue中访问index.html函数通常需要使用JavaScript来实现。Vue是一个JavaScript框架，主要用于构建用户界面，而index.html是一个HTML文件，用于定义网页结构和内容。 在Vue中的index.html文件中定义的函数，可以通过以下几种方式进行访问： 1. 使用Vue的模板语法：在Vue的模板中，可以直接调用index.html中定义的函数，例如：{{ functionName() }}，这会在模板渲染时调用函数并显示返回结果。 2. 在Vue组件中使用script标签引入index.html：在Vue组件的script标签中，可以通过在mounted生命周期函数中使用DOM API获取到index.html中的DOM元素，然后使用addEventListener方法为其绑定事件监听器，从而在Vue组件中访问和调用index.html中的函数。 3. 在全局Vue实例中使用Vue.prototype：可以通过在全局Vue实例中使用Vue.prototype将index.html中的函数挂载到Vue的原型上，这样就可以在任何Vue组件中通过this访问到index.html中的函数。 需要注意的是，在Vue中访问index.html中的函数，需要确保index.html文件已经被正确加载，并且函数名称和调用方式正确无误。同时也需要遵守Vue的开发规范和最佳实践，确保代码的可维护性和可读性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值