【原生html使用vue混入功能】html文件引入vue语法，在html中使用vue混入功能

原创 已于 2023-03-02 09:59:42 修改 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #html #javascript #html使用混入功能 #mixins混入

于 2023-02-23 11:18:40 首次发布
本文介绍了如何在HTML页面中使用Vue的混入功能。作者创建了一个JS文件，定义了一个对象，其结构与Vue的写法相同，然后在需要的页面引入该文件并直接引用对象进行混入。调用方式与普通函数一致，可在组件内通过`this.xxx`或在HTML标签上直接调用。

前言

最近遇到的需求，需要在html页面上用vue的混入功能
然后我网上找了很久没有试出来
然后就自己琢磨怎么弄，没想到还真试出来了。
这里就来记录一下，万一以后又遇到这情况，知道如何混入了- -！

实现方法

首先，创建一个js文件，然后外面是一个对象，对象内写法和vue的写法一样。
在这里插入图片描述
在需要使用的页面内引入这个混入的js文件
在这里插入图片描述
直接这样一句话混入就行。注意后面括号内的是文件中的对象，不是js文件名
在这里插入图片描述
使用方法和普通函数一样，直接this.xxx就可以调用了。
在这里插入图片描述
如果是html标签上也是和普通的函数一样调用
在这里插入图片描述
字数助手字数助手字数助手字数助手
字数助手字数助手字数助手字数助手
字数助手字数助手字数助手字数助手
字数助手字数助手字数助手字数助手
字数助手字数助手字数助手字数助手
字数助手字数助手字数助手字数助手

Vue - 在纯 HTML 普通项目中实现组件化，让原生 html 项目支持引入 *.vue 组件 / 组件与组件间的互相引用等，完美解决了引入组件出现的跨域问题（保姆级详细教程，完整示例源码及插件）
🏆 前端领域优质创作者
05-09 3715
html中使用vue组件，在HTML页面中引入vue组件，HTML界面利用http-vue-loader.js以组件方式引入vue文件，使用http-vue-loader引入组件出现报错，在html页面使用http-vue-loader插件引入组件报跨域错误，如何解决http-vue-loader引用组件时出现跨域问题，纯html原生web项目引入vue后如何实现组件引入，使用http-vue-loader插件控制台报错跨域，http-vue-loader跨域怎么办官方文档，html页面如何引入.vu
html整合vue elementui,vue2.0结合Element-ui实战案例
weixin_33936345的博客
07-05 1342
前言我们将会选择使用一些 vue 周边的库vue-cli, vue-router,axios,moment,Element-ui搭建一个前端项目案例，后端数据接口，会使用json-server快速搭建一个本地的服务，方便对数据的增删改查，利用以上技术我们会搭建一个vue案例，效果展示图：以上就是我们最终要实现的全部效果，我会一块一块的讲解，关于脚手架安装和json-server搭建，在本次博客中，...
Vue.js+Cordova开发H5混合应用（以Android为例，附说明文档和工程）
05-22
Vue.js+Cordova开发H5混合应用（以Android为例，附说明文档和工程）
html和vue混合开发
weixin_43829545的博客
04-12 8971
1.首先在页面引入vue.js(不熟悉vue项目的，可以在自己的项目引入使用) 2 3.其次就是页面的渲染了怎么让ajax请求到数据给到页面呢，写个关于聊天的小demo吧！ /chat.id是来判断发消息的是自己还是别人 如果是1就是自己一般居右否则用v-else居左 其中布局使用flex布局/ html部分// /css部分,其中rightarrow和leftarrow是用css3写的小三角/...
vue页面和html混合,html和vue混合开发
weixin_28720767的博客
06-15 4229
1.首先在页面引入vue.js(不熟悉vue项目的，可以在自己的项目引入使用)23.其次就是页面的渲染了怎么让ajax请求到数据给到页面呢，写个关于聊天的小demo吧！/chat.id是来判断发消息的是自己还是别人如果是1就是自己一般居右否则用v-else居左其中布局使用flex布局/html部分// /css部分,其中rightarrow和leftarrow是用css3写的小三角/.leftar...
想写一个简单的html页面想使用vue语法
最新发布
07-10
注意：引用[1]提到使用Vue3和element-plus，但用户问题只要求使用Vue语法，所以这里我们以Vue3为例（因为Vue2和Vue3在引入方式上有所不同，且Vue3是当前主流版本），但也会提到Vue2的方式（因为引用[4]是Vue2）。...
Vue2+Vue3（脚手架）
娜的博客
01-17 2057
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
Vue | 使用Vue脚手架 【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
不爱吃菜的菜菜的博客
07-17 536
子组件===>父组件使用场景A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。绑定自定义事件或
vue框架使用
qq_45645848的博客
01-11 1617
前端vue基础知识总结，汇总
Vue2 和 Vue3 开发中的 20 个常见问题及其最佳应对方法，涵盖语法差异、迁移问题、性能优化等方向
繁若华尘的博客
02-10 1150
通过针对这些问题调整代码和架构，可显著提升 Vue2/Vue3 项目的可维护性和性能。
vue混合html,VueJS混合
weixin_29451671的博客
06-16 1200
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。示例VueJs混合(Mixins)示例var vm = new Vue({el: '#databinding',data: {},methods : {},});var myMixin = {created: function...
html和vue能混搭嘛吗,Vue2.js搭配Wijmo5让你的Html更疯狂
weixin_29903043的博客
06-16 483
概述本文主要阐述如何让wijmo5作为自定义组件引用到vue2.js中去，由于官网的的教程中只是描述了在页面中如何继承vue和wijmo5，使用的是传统的来引用wijmo控件，然后在页面实例化，再渲染到页面上，vue还提供了一种组件或者元素定义子.vue的文件中，作为自定义组件来引用，话不多说，下面我们来看解析。首先我们来看一下，传统的引用方式，如图：这样属于简单的引用方式，下来我们看看自定义组件...
ElementUI简单入门
qq_44847231的博客
08-05 1084
文章目录ElementUI简介 ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名称叫做element-ui,提供了丰富的PC端组件 ElementUI官网：http://element-cn.eleme.io/#/zh-CN <!-- 1. ...
vue混入html,vue混入(mixins)的应用
weixin_32758097的博客
06-23 1562
vue的API中有个混入，这里主要介绍利用选项合并来二次封装element-ui的el-table标签，使其达到可以最大限度的复用。html官方例子官方的例子作了简单的介绍，这里就不浪费篇幅去介绍了，你们能够直接查看官方例子选项合并或则查看下面的截图： vue 其实你们看了官方文档已经知道了用法和注意事项，下面开始一步步来验证便可。 新建Vue项目利用vue-cli工具新建一个项目，步骤以下：...
html和vue能混搭嘛吗,jquery与vue.js可以混用吗？
weixin_36438124的博客
06-16 1438
jquery与vue.js可以混用吗？jquery与vue.js可以混用。有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目，但是有时候的业务场景并不适合用vue-cli手脚架，这个时候使用vue+jquery混合使用，把他们的优点结合起来使用会大大提升开发效率。vue+jquery应该如何使用呢？1、首先引入vue文件(cdn或者下载到本地都行)，参考vu...
【vue前端开发01】在html中，使用vue进行页面开发
weixin_43695233的博客
07-17 2362
在html中通过js引入vue语法，并使用element-ui组件
vue混入html,vue混入是什么？
weixin_28949937的博客
07-16 535
vue混入是什么？Vue中的混入，即mixins。混入是干嘛的？官方是这么说的：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。混入其实就是实现了单一继承和多重继承。(相关课程推荐：Vue.js教程)应用场景比如在SPA(单页应用)开发的时候，进入每个组件...
HTML5和Vue.js是两个不同的技术，但可以一起使用来创建现代化的Web应用程序
BLOG域名:programb.blog.youkuaiyun.com
04-10 1981
在上述示例中，我们使用了Vue.js的核心库，并在HTML中定义了一个id为"app"的容器。这是一个简单的示例，展示了如何在HTML5中使用Vue.js来创建一个Vue组件。组件化开发：Vue.js可以进行组件化开发，将页面拆分成多个独立的组件，使代码编写量大大减少，提高代码的可维护性和可复用性。标签将Vue.js库引入到HTML文件中，并在需要使用Vue.js的地方创建Vue实例。在HTML5中使用Vue.js，你需要引入Vue.js库和相关的组件。的Vue组件，并在HTML文件中使用了该组件。
html页面整合vue2或vue3
m0_56353506的博客
09-13 2520
'欢迎使用 Vue.js!'欢迎使用 Vue.js!'欢迎使用 Vue 3!'欢迎使用 Vue 3!'Vue 实例已创建!'Vue 实例已创建!'Vue 实例已挂载!'Vue 实例已挂载!在 HTML 文件的。在 HTML 文件的。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

接口写好了吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值