HTML文件引入Vue开发

最新推荐文章于 2024-09-13 17:28:17 发布
最新推荐文章于 2024-09-13 17:28:17 发布
阅读量6.1k 收藏 14
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hy3528/article/details/103216469
版权

HTML文件引入Vue开发

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

<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>

</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>

<body>
    <div id="Vue">
        <div>
            <p @click="click">{{text}}</p>
            <img style="width: 3rem;height: 3rem;" :src="img" alt="">
        </div>
        <div v-for="item in arr">
            <p>{{item.text}}</p>
            <img :src="item.img" alt="">
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#Vue",
        data: {
            text: "hallo,word",
            img: "",
            arr: []
        },
        methods: {
            click() {
                console.log(1111)
            }
        },
        created() {
            let that = this
            $.ajax({
                type: "get",	//请求方式
                async: false,
                url: "__CONTROLLER__/gettesttos",
                data: {},		//传值给后台
                dataType: "json",
                success: function (res) {
                    console.log(res.info.data)
                    that.text = res.info.text
                    that.img = res.info.img
                    that.arr = res.info.data
                },
            });
        }
    })
</script>
<script>
    $(document).ready(function () {

    });
</script>

</html>

点击事件 @click

<p @click="click">{{text}}</p>

添加文本使用两个大括号｛｛文本｝｝

img标签中src前面得加冒号

<img  :src="img" alt="">

new Vue({
        el: "#Vue",
        data: {
            text: "hallo,word",
            img: "",
            arr: []
        },
        methods: {
            click() {
                console.log(1111)
            }
        },
        created() {
            let that = this
            $.ajax({
                type: "get",	//请求方式
                async: false,
                url: "__CONTROLLER__/gettesttos",
                data: {},		//传值给后台
                dataType: "json",
                success: function (res) {
                    console.log(res.info.data)
                    that.text = res.info.text
                    that.img = res.info.img
                    that.arr = res.info.data
                },
            });
        }
    })

data中定义需要使用的数据

data: {
            text: "hallo,word",
            img: "",
            arr: []
        },

在methods中写入点击事件

 methods: {
            click() {
                console.log(1111)
            }
        },

请求接口后进行渲染

        created() {
            let that = this  //定义一个that
            $.ajax({
                type: "get",	//请求方式
                async: false,
                url: "__CONTROLLER__/gettesttos",
                data: {},		//传值给后台
                dataType: "json",
                success: function (res) {
                    console.log(res.info.data)  
                    that.text = res.info.text
                    that.img = res.info.img
                    that.arr = res.info.data
                },
            });
        }

for循环渲染要用v-for
item是自己定义的值

        <div v-for="item in arr">
            <p>{{item.text}}</p>
            <img :src="item.img" alt="">
        </div>

arr是需要循环的数组名字
arr是需要循环的数组名字

hy3528
关注
将 HTML 转换为 Vue 代码
TechProX的博客
09-26 2456
Vue.js 是一种流行的 JavaScript 框架，用于构建交互式的单页面应用程序。如果你已经有一个现有的 HTML 页面，并希望将其转换为 Vue 组件，你可以按照以下步骤进行操作。以上就是将 HTML 转换为 Vue 代码的基本步骤。通过逐步转换和调整，你可以将现有的 HTML 页面转换为 Vue 组件，并利用 Vue.js 的强大功能构建交互式和可重用的应用程序。// 在这里编写组件的逻辑和方法。/* 在这里编写组件的样式 *//* 添加样式规则 */
在HTML页面中引入vue组件
一步一个脚印，踏实努力，向着目标前进
08-08 8451
组件化开发是一种软件开发的方法论，旨在通过将复杂的系统分解为独立的、可重用的组件来提高开发效率和代码的可维护性。组件化开发将系统按照功能、模块或界面的不同部分进行拆分，每个部分都对应一个独立的组件，组件之间可以通过接口或消息进行通信，从而实现系统的整体功能。组件化开发的优势包括提高代码复用性、降低开发成本、可并行开发、易于维护等。
html页面整合vue2或vue3
最新发布
m0_56353506的博客
09-13 1675
'欢迎使用 Vue.js!'欢迎使用 Vue.js!'欢迎使用 Vue 3!'欢迎使用 Vue 3!'Vue 实例已创建!'Vue 实例已创建!'Vue 实例已挂载!'Vue 实例已挂载!在 HTML 文件的。在 HTML 文件的。
在原生HTML文件中引入Vue并使用
weixin_70486077的博客
10-27 8192
有的时候，我们需要在原生 HTML 文件中引入 Vue 使用，比如说一些门户网站，或者是未使用 Vue 脚手架的项目中使用 Vue 的功能，这时候我们就需要在 HTML 中引入 Vue.js ，优点是简单方便，不需要安装和配置额外的构建工具，适合快速原型开发和小规模项目，缺点是无法进行模块化管理，代码复用性较低，不利于大型项目的开发和维护。
普通HTML文件如何使用VUE组件
qq_63704334的博客
06-19 1万+
标签内，编写Vue组件的JavaScript代码。首先，创建一个Vue组件对象，定义组件的模板、数据和方法等。需要注意的是，Vue组件的代码可以放在单独的JavaScript文件中，然后在HTML文件中使用。你也可以将Vue框架的JavaScript文件下载到本地，并使用相对路径引入。标签内，添加以下代码来引入Vue框架的JavaScript文件。现在，你可以在HTML文件中使用Vue组件了。1. 引入Vue框架：在HTML文件中的。3.编写Vue组件：在HTML文件中的。中，并显示组件中定义的内容。
vue 项目中引入 本地html文件
DivBOxp的博客
06-14 1859
vue 项目中引入 本地html文件
HTML-引入Vue3和Element Plus
04-24
首先，我们需要在HTML文件（如`index.html`）中引入Vue3。Vue3引入方式通常有两种：使用CDN或本地安装。这里提到"js已离线"，意味着我们可能采用本地安装的方式。在HTML的`<head>`部分，我们可以添加如下代码来引入...
vue在index.html中引入静态文件不生效问题及解决方法
10-17
在Vue.js开发过程中，我们有时需要在`index.html`文件中引入静态资源，如CSS、JavaScript文件或图片等。然而，遇到静态文件无法正常加载...希望本文对你的Vue开发有所帮助，如果你在实践中遇到其他问题，欢迎提问交流。
vue引入静态js文件的方法
10-15
总结起来，Vue项目中引入静态JS文件的关键在于理解文件的存放位置（Vue CLI 2.0的`static`目录，Vue CLI 3.0及更高版本的`public`目录）以及正确地在HTML模板中引入。同时，确保在`config.js`中使用兼容性良好的ES5...
Vue如何引入远程JS文件
10-19
在Vue项目中引入远程JS文件是前端开发中的一种常见需求，尤其是在需要依赖第三方服务时。例如，钉钉扫描登录功能就需要引入远程的JS文件。在传统的HTML页面中，我们可以直接在`<head>`或`<body>`标签内插入`<script>...
html中创建并调用vue组件的几种方法汇总
01-21
作者：Echoyya 出处：https://www.cnblogs.com/echoyya/ 最近在写项目的时候，总是遇到在html中使用vue.js的情况，且页面逻辑较多，之前的项目经验都是使用脚手架等已有的项目架构，使用.vue文件完成组价注册，及组件之间的调用，还没有过在html中创建组件的经验，所以借此机会学习总结一下。 方法一：Vue.extend( options ) 用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 – 在 Vue.extend() 中它必须是函数 extend 创建的是 Vue 构造器，而
html页面引入Vue
x485366615的博客
08-07 544
1、先引入vue ： 2、 定义一个容器，让整个页面被vue管理： el:"#app",（指定刚才的div容器）
html页面引入vue
CoffeeAndIce的博客
08-11 1万+
基础环境 ①所需的基本ui组件 基本后台模块 element、iview ，手机端可以mui 、 uniapp ②所需Vue版本 建议官方最新版本为准，稳定性可靠 ③兼容vue文件的http-vue-loader 可以无需脚手架情况下对vue以脚手架形式编写vue文件，同时便捷了引入方式 基于Mui样例 index.html <!DOCTYPE html> <html> <head> <meta char.
【vue前端开发01】在html中，使用vue进行页面开发
weixin_43695233的博客
07-17 2213
在html中通过js引入vue语法，并使用element-ui组件
如何在原生HTML里面使用VUE（保姆级教学）
热门推荐
qq_57956183的博客
07-14 2万+
上面是在原生HTML里面引入vue的方法，其他的同理，如：elementUI、ant Desgin Vue等，都可以用类似的方式引入到原生HTML里。这样就可以在html里面使用Vue了，下期我将分享在html里面使用Vue组件~成功引入vue后，我们就可以在html文件里使用vue，下面是示例；将上面代码添加到html的head里，即可全局使用vue的方法；（2）将搜索到的内容全选复制项目的vue.js文件里，如图；（3）在index.html里面引入；）复制到浏览器，并搜索；（1）将CDN的路径（
vue html多页面应用,Vue多页面应用开发
weixin_39966644的博客
06-03 416
平时Vue只用来做单页面应用开发，其实它是可以做多页面开发的Vue在工程化时，依赖webpack，webpack从一个入口文件将依赖的所有模块都整合在了一个页面所以要实现多页面开发，必须修改webpack的配置配置步骤1.首先创建新页面的html文件、入口js、主组件vue例如：src\pages\brand\brand.htmlsrc\pages\brand\brand.jssrc\pages\...
vue项目里能用html,对Vue项目开发有用的10个技巧
weixin_35757531的博客
06-20 706
下面本篇文章给大家分享一些对Vue项目开发有用的窍门和技巧。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。简介我比较喜欢使用 Vue 来开发，所以有时会深入研究其功能和特性。 通过这篇文章，向你们介绍十个很酷的窍门和技巧，以帮助大家成为更好的 Vue 开发者。插槽语法更漂亮随着Vue 2.6的推出，已经引入了插槽的简写方式，之前简写可用于事件(例如，@click表示v-on:cl...
本地Vue.js文件的引入与开发指南
在引入vue.js之后，便可以开始创建Vue实例并开始开发。 4. Vue实例和数据绑定： 一旦vue.js被成功引入，开发者就可以开始创建Vue实例并进行数据绑定。Vue实例是一个Vue应用的核心，所有的Vue功能都是通过它来实现...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值