html文件通过script标签引入vue.js，进行公共组件开发

最新推荐文章于 2024-05-23 17:22:01 发布
最新推荐文章于 2024-05-23 17:22:01 发布
阅读量5.5k 收藏 19
点赞数 3
分类专栏： 前端 文章标签： vue组件 html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44416446/article/details/103378049
版权

由于各种原因，需要在原有的html页面中通过script标签引入的方式进行部分页面开发 但是由于开发过程中存在许多公共部分需要进行组件封装。所以遇到了一些问题。最后通过讲组件提取为单独js文件进行解决。
具体解决思路如下
首先将要封装的公用组件进行单独js文件提取
header.js

var headerTemplate = `<div v-show="aa" style="position:fixed;top:10%;left:30%"> <el-table
      :data="newlists"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table><div @click="fun()">asdasd</div>
	<button @click="closefun">close</button></div> 
    `
Vue.component('my-header', {
    template: headerTemplate,
    props:{newlists:{type:Array}},
    data() {
    	return {
    		aa:true
    	}
          
      },
    	methods: {
    		closefun(){
    			console.log(this.$parent)
    			this.$emit('hello',"child2parent?")
    		}
    	}
    // ...
})

上面的部分为剥离的组件部分，通过接受父组件的值进行渲染，并回传父组件值
接下来则是使用组件
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
   	<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="header.js"></script>
</head>
<body>
    <div id="main">
    	<div v-show="haha">
        	<my-header  @hello="acceptValue" :newlists="list"></my-header>
        </div>
        <button @click="shanghucan">upload</button>
    </div>


    <script>
        new Vue({
            el: '#main',
            data(){
            	return {
            		haha:false,
			    	list: [{
			            date: '2016-05-02',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1518 弄'
			          }, {
			            date: '2016-05-04',
			            name: '王小虎',
			            address: '上海市普陀区金沙江路 1517 弄'
			          }]
			    	}	
            	
            },
            methods:{
            	shanghucan(){
            		this.haha = true
            	},
            	acceptValue(data){
            		console.log(data)
            	}
            },
            created(){
            	console.log(this)
            }
        })
    </script>
      <style>
		.hahahha{
			width:500px;
			height:100px;
			background-color:red;
		}
    </style>
</body>
</html>

通过这样的方法我们 基本实现了公共组件的封装和使用，我们只需将组件部分引入index页面或者需要使用的页面则可实现在html页面通过script标签引入的方式下进行组件封装

Leo Tang
关注
  • 3
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
freemarker html 引入script_HTML 引入 公共的头部和底部
weixin_32515577的博客
01-18 445
最近在写一套网站，发现每次都引入公共头部和尾部 特别麻烦 代码还多 我就找到了一种方法 第一种就是用的jqery的 load 方法 也是公认最好的方法 $("#header").load("page/header.html");参考代码<body>JavaScript <div id="header"></div> <div id="foote...
基于script标签引入vue.js
08-21
在HTML页面中通过`<script>`标签引入Vue.js，是传统方式下本地离线使用Vue框架的方法，这样可以避免网络延迟，提高页面加载速度，尤其是在开发阶段或网络环境不稳定的情况下。 首先，你需要下载Vue.js的最新版本或...
在HTML页面中引入公共的部分的代码
祈澈菇凉
05-16 7406
在做前端网页的时候，会涉及到很多界面，有的时候，这些界面都会有重复的代码，比如侧边栏菜单的重复代码，头部导航的 重复代码，底部的重复代码，这个时候，为了使每个页面的代码看起来简洁明了，我们需要把这些重复的代码放到公共的页面里面，在具体页面只需引用即可。 主要代码 <div id="head"></div> <div id="s...
vue中引入js脚本块或者js文件 js函数 js方法
最新发布
global_coding的博客
05-23 1212
vue中引入js脚本块或者js文件 js函数 js方法
html导入script,怎么用script引入vue.js？
weixin_28932441的博客
06-17 1708
怎么用script引入vue.js？下面本篇文章就来给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。怎么用script引入vue.js？1、使用 标签直接引入本地vue.js文件首先使用在 Vue.js 的官网上直接下载 vue.js文件到本地下载地址：https://vuejs.org/js/vue.min.js然后用 标签引入本地的vue.js文件。2、使用 ...
vue公共 js 文件的封装
ZhouHuiCSDN
06-09 1128
vue项目中公共 js 文件的封装
直接引用vue-js如何写公共部分
weixin_33969116的博客
10-17 1299
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> &l...
vue.js 下载，引入vue.js 本地开发
05-18
引入Vue.js到本地项目中，有以下几种常见方法： 1. **HTML 文件内直接引用**：在HTML文件的`<head>`标签内添加如下代码，替换`version`为实际下载的Vue.js版本号： ```html <script src="path/to/vue.js"></...
关于引入vue.js 文件的知识点总结
11-21
引入Vue.js文件涉及在HTML中添加`<script>`标签，然后创建Vue实例并指定数据对象。通过数据绑定和响应式特性，Vue.js使得动态更新界面变得简单而直观。此外，Vue实例还可以包含更多的选项，如计算属性、方法、生命...
html加载vue组件
小米粒的博客
04-27 1900
由于技术升级，之前 前后端不分离的项目，需要部分组件的形式实现，所以就有了html加载vue组件的需求，接下来 笔记???? ???? 两种方式 ： 第一种方式： 用 js type的方式引入组件 script type="text/x-template" id="tempApp"> <awsuiapp :modelTypes="modelTypes" :buttonLists="buttonLists"></awsuiapp> </script&gt
HTML中引用公共部分代码
一杯清茶的博客
02-19 1677
HTML中引用公共部分代码 将公共部分的代码转js http://tool.chinaz.com/Tools/Html_Js.aspx 在需要引用公共代码的地方，引入新创建的js <script type="text/javascript" src="header.js"></script>
在原生HTML文件中引入Vue并使用
weixin_70486077的博客
10-27 6612
有的时候，我们需要在原生 HTML 文件中引入 Vue 使用，比如说一些门户网站，或者是未使用 Vue 脚手架的项目中使用 Vue 的功能，这时候我们就需要在 HTML 中引入 Vue.js ，优点是简单方便，不需要安装和配置额外的构建工具，适合快速原型开发和小规模项目，缺点是无法进行模块化管理，代码复用性较低，不利于大型项目的开发和维护。
在HTML页面中引入vue组件
一步一个脚印，踏实努力，向着目标前进
08-08 7182
组件化开发是一种软件开发的方法论，旨在通过将复杂的系统分解为独立的、可重用的组件来提高开发效率和代码的可维护性。组件化开发将系统按照功能、模块或界面的不同部分进行拆分，每个部分都对应一个独立的组件，组件之间可以通过接口或消息进行通信，从而实现系统的整体功能。组件化开发的优势包括提高代码复用性、降低开发成本、可并行开发、易于维护等。
html页面引入公共js
西瓜
12-02 1741
公共js引入：document.write('<script>...</script>');
html中使用Vue及script标签的引用位置
qq_45647792的博客
06-04 1097
错误截图：解决方法：使用script标签，即在页面中插入客户端脚本，因而只需引入vue.js的相关脚本，因此既可以将相关脚本的引用放至head标签内，又可将相关脚本的引用放至body标签内。
Vue3.0在template、script、style中引用图片资源的方式
热门推荐
刘运召的博客
10-23 1万+
通过config.resolve.alias设置的别名在Vue的template模板和style样式内使用前面需加上~，在script脚本中则直接使用别名，不需加~；data中引用assets图片时，必须使用require('xxx')方式引用，否则会当字符串处理而无法显示图片
引用公共页面的js函数报错
09-10 431
　　对于网站来说很多页面之间都有着大量的共享模块，如页头，页脚和用户栏等。很多时候为了方便、省事，我们在公共模块写函数，然后在别的页面里调用。但我们在引用公共的js函数时，有些可以引用，有些却报错；这是因为js加载的问题，即当前页面加载完，但有些公共页面却没有加载完就引用公共的js，就会报这个函数没有找到。 引用公共页头的js 结果如下： 引用公共页脚的js ...
html如何引用公用的JS和CSS
Adobe Chow 的博客
06-10 8774
html如何引用公用的JS和CSS 问题： 每个页面都要用到很多插件，如jq，hui，js-sdk等，如果每个页面都要写一次的话，太麻烦了，代码很冗余。 解决: 1，将公共的js和css写在单个文件(js和css可在进行拆分)，这里就一个文件 common.js document.write('<!----------- 公共js和css s...
在 PHP 模板中引入 Vue.js 文件
09-16
### 回答1： 可以使用如下方式在 PHP 模板中引入 Vue.js 文件： 1. 在 PHP 模板的 head 标签内引入 Vue.js 文件，例如： ``` <head> <script src="/path/to/vue.js"></script> </head> ``` 2. 使用 PHP 的 include 或 require 语句引入 Vue.js 文件，例如： ``` <?php include '/path/to/vue.js'; ?> ``` 3. 将 Vue.js 文件的内容直接嵌入 PHP 模板中，例如： ``` <head> <script> <?php $vue_js_content = file_get_contents('/path/to/vue.js'); echo $vue_js_content; ?> </script> </head> ``` 注意，在使用 Vue.js 的时候，需要注意 Vue.js 与 PHP 之间的输入输出顺序，以及 Vue.js 与 PHP 之间的数据传输方式。 ### 回答2： 在PHP模板中引入Vue.js文件的方法如下： 1. 首先，下载Vue.js文件。可以从Vue.js官方网站（https://cn.vuejs.org/）上下载最新版本的Vue.js文件。 2. 将Vue.js文件保存到你的项目目录中。通常情况下，将Vue.js文件保存在项目的“js”或“assets”目录下是一个好的做法。 3. 在PHP模板中添加代码来引入Vue.js文件。可以使用`<script>`标签来引入外部JavaScript文件，例如： ```php <script src="js/vue.js"></script> ``` 其中，"js/vue.js"是Vue.js文件的相对路径。根据实际情况，可能需要调整路径。 4. 引入Vue.js文件后，就可以在PHP模板中使用Vue.js来实现前端交互了。根据Vue.js的语法和API，可以创建Vue实例、定义数据模型、编写模板等。 5. 最后，将PHP模板渲染到浏览器端时，确保Vue.js文件已被正确加载。可以通过查看浏览器开发者工具中的控制台和网络选项卡来检查Vue.js文件是否已成功加载。 如果需要在PHP模板中使用Vue.js的组件或插件，还需要按照相应的文档和示例进行引入和使用。需要注意的是，PHP模板和Vue.js是前后端分离的，它们运行在不同的环境中，因此在引入Vue.js文件时可能需要注意路径和前后端交互的问题。 ### 回答3： 在 PHP 模板中引入 Vue.js 文件可以通过以下步骤实现。 首先，确保在文件系统中已经下载了 Vue.js 文件。这可以通过访问 Vue.js 的官方网站 https://vuejs.org/ ，然后下载 Vue.js 的压缩文件或者使用 CDN 进行引入。 一旦你拥有了 Vue.js 文件，可以将其存放在你的 PHP 项目文件夹的合适位置，比如在项目的根目录创建一个名为 `js` 的文件夹。 然后，在你的 PHP 模板文件中，使用 `script` 标签引入 Vue.js 文件。可以在你的 HTML 标签内通过使用 PHP 代码来动态生成路径进而引入 Vue.js 文件： ``` <script src="<?php echo $project_path ?>/js/vue.js"></script> ``` 其中，`$project_path` 是一个变量，它保存了你 PHP 项目的路径。你可以根据你的项目结构和需要来设置这个变量的值。 确保在引入 Vue.js 文件之前，`<script>` 标签位于模板文件的适当位置，通常是在 `</head>` 标签之前或者 `</body>` 标签之前。 完成上述步骤后，你的 PHP 模板就成功地引入了 Vue.js 文件。现在，你可以在模板中使用 Vue.js 的功能来构建交互式的前端部分了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值