如何在HTML页面中使用Vue

已于 2022-07-15 13:47:49 修改
阅读量1w 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js html javascript
于 2022-06-12 19:39:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjjwgy1314/article/details/125248723
版权

1.首先需要在需要新建一个HTML页面，在页面中引入下面的script标签,这里引用的是开发版本，带有报错提示，便利查找错误，生产中建议使用生产版本

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.在新建一个script标签，new Vue实例

3.上个小demo，点击按钮显示a链接

这里使用了Vue中几个方法：

点击按钮触发的点击事件@click，和js中的onclick以及jQuery中的click 其实都是差不多的，只是写法有点差异；

用于显示与隐藏的v-if或者v-show，区别是，v-if是直接操DOM元素，控制显示隐藏，而v-show是操作样式控制显示隐藏；

点击按钮就会触发a链接的显示隐藏，按钮的方法需要写在methods中，因为methods是执行成员函数方法的；

最低0.47元/天 解锁文章
煮酒论唠家常
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML页面中简单使用Vue
老婆就是要败家
07-15 8498
Vue入门案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>快速入门</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app">
在HTML页面中引入vue组件
热门推荐
zysskt的博客
10-20 1万+
vue2
使用Vue写法渲染HTML文件
最新发布
bjzhang75的博客
05-12 387
在这个示例中，我们创建了一个Vue实例，将其挂载到id为“app”的HTML元素上。在Vue.js中，我们可以使用Vue的语法来编写HTML文件，并通过Vue实例来渲染这些文件。：在HTML文件中，我们可以使用Vue提供的指令、插值和事件处理等特性，编写具有动态交互性的内容。：确保在HTML文件中引入Vue.js文件，以便浏览器能够识别和执行Vue的语法。：在Vue实例中，我们通过指定el属性来指定Vue实例挂载到哪个HTML元素上。：首先，我们需要创建一个Vue实例，以便将Vue绑定到HTML文件中。
【html页面引入vue页面】使用httpVueLoader.js让html页面引入vue文件当组件使用，html组件化开发
seeeeeeeeeee的博客
01-16 6466
最近遇到的一个需求，就是html页面需要组件化开发，然后找了一圈，发现很多组件化开发不好用一般就是几种，比较用的多的一个是iframe嵌套页面，一个就是通过js生成页面写组件。感觉都挺麻烦的。就想着有没有能像vue哪样简单的组件引入方式。而且iframe加载也慢。没有组件快。后来发现了这个httpVueLoader.js非常好用。只需要引入这个文件，然后其他使用方法和vue差不多了。稍微有点变动可能就是传值方面。传值下面也给出了方案。集中传值的方法应该大体是够用了的。
如何在html中使用Vue3
半月的博客
10-18 4883
作为一名后端人员，有时候会写一点前端代码配合使用。 但比较轻量，没有必要使用脚手架创建工程，故此我在html中使用就好了。 正如那句话，适合自己的才是最好的。
在 HTML 中引入 vue.js 写页面
Start2019
12-05 1万+
突然说要写两个页面（只有两个页面，不是一个完整的项目。。），有点懵，不知道从哪下手，而且只对 vue 熟悉那么一丢丢。但是没办法鸭，只能硬着头皮去做了！在这里做一下笔记。 一、前期准备 1. 新建文件夹，并且命名为： css、imgs、pages、js，在对应的文件夹下放对应的文件。 2. 引入样式。 不想要自己写样式和逻辑，而且是要基于 vue 的，那就只好找基于 vue 的 UI 库了—— e...
html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus
夜空孤狼啸的博客
08-30 2981
html中如何用vue语法，并使用UI组件库 ，html中引入vue+ant-design-vue或者vue+element-plus，本次项目中，需要引入github中别人写好的插件，插件比较大，没有方法直接在自己项目中，把别人的项目打包合并生成html（类似于前端项目打包生成的 dist ），修改这里面的html，这种情况要么用原生js写或者jquery还相对快一些，那为什么不直接用vue语法呢？哈哈哈，下面就教你怎么写。这里用antDesignVue4.0 直接上代码，
html中使用vue和echarts
02-20
在Vue中使用ECharts，首先需要通过npm或yarn安装： ``` npm install echarts --save # 或者 yarn add echarts ``` 然后在Vue组件中导入ECharts，并在`mounted`生命周期钩子中初始化图表实例，设置配置项。配置项是...
使用vue实现HTML页面生成图片的方法
10-15
在Vue项目中实现将HTML页面转换为图片的功能，可以用于创建可分享的海报或动态生成的宣传材料。这里我们将详细探讨实现这一功能的关键步骤和技术。 首先，我们需要生成一个带logo的二维码。Vue提供了`vue_qrcodes`...
VUE页面中加载外部HTML的示例代码
08-29
该示例代码中使用了两个组件，分别是HtmlPanel.vue和htmlViewSample.vue， HtmlPanel.vue组件用于加载外部HTML文件，并将其显示在页面上，而htmlViewSample.vue组件则用于将HtmlPanel.vue组件实例化，并将其显示在...
Vue-Router的使用方法
12-11
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。 路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home...
HTML5引入VUE
qq_58024411的博客
08-07 2450
摘要：会介绍HTML5引入vue以及快速入门vue
vue与html方法互调
u014645827的博客
05-06 1823
vue页面 <iframe frameborder="0" name="myframe" :src="geturl"></iframe> <button @click="gethtmlmethod()">调用html的方法</button> data(){ return{ geturl:"static/myhtml.html" } }, methods:{ ...
用vue中的app.vue实现嵌入第三方引入的aspx在＜body＞＜html＞后显示
liuli0927的博客
08-23 568
用vue中的app.vue实现嵌入第三方引入的aspx在后显示
【更新】如何在已有的HTML项目中嵌入Vue
huaqishen123的博客
12-23 8538
有没有遇到一种尴尬的情况？就是在已有的html项目中嵌入vue，不需要项目构建工具，纯js/css/html 废话不多说，直接上代码： index.html 包含两个组件（main/about） <div class="bc-bg-other" tabindex="0" data-control="PAGE" id="Page" style="width: 100%;height:100%;"> <div id="app" style="background: y
html 插入vue 子组件
weixin_65635437的博客
05-26 1347
const MyComponent = {} 为子组件内容components: { 'my-component': MyComponent,},注册子组件<script>var vue;<img src="./images/centre/今日统计@2x.png" alt="" style="width: 100%;"></div></div></div>`,data() {return {{number:'120',tag:'转为私客'},
VUE学习（三）html引入vue.js，组件的创建和使用
我是混IT圈的
03-09 5253
1、html页面中引入vue.js，简单的创建和使用vue组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body&
HTML页面通过iframe嵌套Vue项目
愿历尽千帆，仍保持最初的热爱，奔赴每一场山海，一如既往鲜活而明亮~
11-22 3965
之前都是在Vue项目中通过iframe嵌套外部写好的HTML页，但是最近接触了一个需求，是需要在HTML页面中嵌入Vue项目。 Vue项目打包完成之后会形成一个包含所有静态资源的文件夹，点击HTML页可以运行（后端解决的跨域），现在需要新建一个test.html页去嵌套Vue打包后形成的HTML页，在test.html中有几个input框，输入完成之后点击搜索按钮，Vue项目会显示出来，同时请求了后端接口数据进行显示（接口是在Vue项目中请求的，参数是通过window.location.href获取的）。
html文件里怎么引用vue组件？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
12-12 7246
组件里写下面的代码，注意使用的是。html文件里面写下面的代码。
如何在html5中运用vue
05-12
要在 HTML5 中使用 Vue，需要在 HTML 文件中引入 Vue 库，然后创建 Vue 实例并将其绑定到 HTML 元素上。 以下是一个简单的示例： 1. 在 HTML 文件中引入 Vue 库 ```html <script src="https://cdn.jsdelivr.net/npm/vue"></script> ``` 2. 创建 Vue 实例 ```html <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` 在上面的示例中，我们创建了一个 Vue 实例并将其绑定到 id 为“app”的 div 元素上。在 data 属性中，我们定义了一个名为 message 的属性，并将其值设置为“Hello Vue!”。在 HTML 中，我们使用双括号语法将 message 属性的值显示在页面上。 这只是一个简单的示例，Vue 还提供了许多其他功能，如组件、指令、计算属性等等。可以通过 Vue 官方文档来了解更多信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值