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

已于 2023-03-02 09:59:42 修改
阅读量1.7k 收藏
点赞数 1
分类专栏： 功能实现 文章标签： vue.js html javascript html使用混入功能 mixins混入
于 2023-02-23 11:18:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seeeeeeeeeee/article/details/129177627
版权

前言

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

实现方法

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

接口写好了吗
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html和vue混合开发
weixin_43829545的博客
04-12 8752
1.首先在页面引入vue.js(不熟悉vue项目的，可以在自己的项目引入使用) 2 3.其次就是页面的渲染了怎么让ajax请求到数据给到页面呢，写个关于聊天的小demo吧！ /chat.id是来判断发消息的是自己还是别人 如果是1就是自己一般居右否则用v-else居左 其中布局使用flex布局/ html部分// /css部分,其中rightarrow和leftarrow是用css3写的小三角/...
HTML-引入Vue3和Element Plus
04-24
在本项目中，我们主要探讨如何在HTML页面中引入Vue3框架和Element Plus UI库，以便构建一个功能丰富的前端应用。Vue3是Vue.js的最新版本，提供了许多性能优化和新特性，而Element Plus则是一个基于Vue3的高质量UI...
vue页面和html混合,html和vue混合开发
weixin_28720767的博客
06-15 4016
1.首先在页面引入vue.js(不熟悉vue项目的，可以在自己的项目引入使用)23.其次就是页面的渲染了怎么让ajax请求到数据给到页面呢，写个关于聊天的小demo吧！/chat.id是来判断发消息的是自己还是别人如果是1就是自己一般居右否则用v-else居左其中布局使用flex布局/html部分// /css部分,其中rightarrow和leftarrow是用css3写的小三角/.leftar...
vue文件在html中直接引用 import 传过来的方法报错Error in render “TypeError _vm(1)
最新发布
2401_84616339的博客
05-16 301
这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。所以方法跟变量一样最好再赋值、声明一次后使用。
html里面有原生js如何使用vue
weixin_44326167的博客
01-04 1075
html里面有原生js如何使用vue
在原生HTML文件中引入Vue并使用
weixin_70486077的博客
10-27 6389
有的时候，我们需要在原生 HTML 文件中引入 Vue 使用，比如说一些门户网站，或者是未使用 Vue 脚手架的项目中使用 Vue 的功能，这时候我们就需要在 HTML 中引入 Vue.js ，优点是简单方便，不需要安装和配置额外的构建工具，适合快速原型开发和小规模项目，缺点是无法进行模块化管理，代码复用性较低，不利于大型项目的开发和维护。
vue获取原生html节点,Vue框架写代码时原生js获取元素内容的方法
weixin_29368571的博客
05-31 484
在用vue框架写代码的时候,碰到个问题,想获取其中一个div的内容去做判断,html部分代码如下:{{presentContent}}js部分代码如下:presentClick(){let a=document.getElementsByClassName('present');let presentText=a[0].innerHTML;console.log('presentText='+pr...
如何在一个传统的html中，引入vueJs并使用vue复制组件？
极客星云-CSDN博客
10-11 2025
这篇博文主要分享如何在一个传统的html中，通过通过引入js方式使用vue功能和vue复制组件。
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在Vue.js开发过程中，我们有时需要在`index.html`文件中引入静态资源，如CSS、JavaScript文件或图片等。然而，遇到静态文件无法正常加载的问题可能会导致应用样式或功能缺失。本文将深入探讨这个问题，并提供两种...
前端html利用http-vue-loader以组件方式引入vue文件
06-15
地址：https://github.com/FranckFreiburger/http-vue-loader，httpVueLoader是从github...http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File，无需透过 nodeJS 环境编译，也不需要 Build 的步骤。
Vue中的混入的使用(vue mixins)
08-27
2. 在组件中使用混入：var vm = new Vue({ mixins: [mixin], ... }),其中 mixin 是刚才定义的混入对象。 混入的选项合并： 1. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。 2. 数据对象在内部会...
vue2入门---＞非单文件组件(html直接使用组件)
python_web全栈
09-03 1039
vue2入门--->非单文件组件(html直接使用组件)
vue-cli3项目通过vue如何引入第三方js包完成登陆功能
i_am_a_div的博客
08-21 1729
注意：本次登陆，前后端分离；前端通过引入第三方的js包，调用js包里的初始化方法和提交方法完成登陆； 流程1.引入第三方包 1.1在index.html文件下引入 流程2.完成初始化 问题2.1因为初始化的时候，必须传递后端分配的state，用作验证。 当时做了几种传递state的方式，方式1：前端到了login页面后先请求借口获取state的值，然后传递给初始化的state，发现行不通（确实初始化赋值上去了分配的state，但是登陆失败，后端说不支持）； 流程3.拦截跳转： 最后采取方式2：前端在
html引入vue,封装axios请求
lbx
03-07 5927
html引用vue封装axios请求，页面调用请求
20180305-button
qq_27898053的博客
03-05 260
<div> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el
在HTML页面中引入vue组件
热门推荐
zysskt的博客
10-20 1万+
vue2
Vue3.2 新特性之 —— Web Components
我是张跑跑
09-18 5025
vue3.2 支持用单文件组件的写法来创建自定义元素，再也不需要写原生的 web components了。
HTML5引入VUE
qq_58024411的博客
08-07 2516
摘要：会介绍HTML5引入vue以及快速入门vue
vue与html结合
冀义勇
01-29 3462
var app= new Vue({     el:"#app",     data:{       },     filters:{       },     computed:{       },     mounted:function(){         this.init();     },     methods:{         init:function(){        ...
vue在index.html中引入的文件我要怎么使用呢
05-25
那么你可以在项目中的任意一个Vue组件中使用该文件中定义的内容，例如： ```javascript export default { mounted() { // 使用example.js中定义的函数 exampleFunction(); } } ``` 在这里，我们假设example.js...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

接口写好了吗

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

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

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

打赏作者

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

抵扣说明：

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

余额充值