热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

在html用vue组件,html页面引入vue组件

html页面引入vue组件需要在页面引入http-vue-loader.js注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,

html页面引入vue组件需要在页面引入http-vue-loader.js

注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html

1.创建my-component.vue

Hello {{who}}

module.exports = {

data: function() {

return {

who: 'world'

}

}

}

.hello {

background-color: #ffe;

}

2.创建index.html

// 使用httpVueLoader

Vue.use(httpVueLoader);

new Vue({

el: '#app',

data: function () {

return { visible: false }

},

components: {

// 将组建加入组建库

'my-component': 'url:./component/my-component.vue'

}

})

注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html

不再手写import - VSCode自动引入Vue组件和Js模块

:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...

iview table icon dorpdown html页面级别vue组件 #vuez#

iview table icon dorpdown html页面级别vue组件

想在已创建的Vue工程里引入vux组件

<1>. 在项目里安装vux npm install vux --save <2>. 安装vux-loader (这个vux文档似乎没介绍,当初没安装结果报了一堆错误) npm ...

require.js 加载 vue组件 r.js 合并压缩

https://www.taoquns.com 自己搭的个人博客 require.js 参考阮一峰 Javascript模块化编程(三):require.js的用法 r.js 合并压缩 参考司徒正美 ...

vue 组件间传值方式

/* 父组件给子组件传值 1.父组件调用子组件的时候 绑定动态属性 2.在子组件里 ...

高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

接上篇 接上篇 本文围绕着实现EasyDSS高性能流 ...

vue单页面引入CDN链接

不想在index.html文件中全局引入CDN资源,那么如何在Vue单文件组件中引入?下面来瞅瞅~ 虚拟DOM创建 Vue 通过创建一个虚拟 DOM 来追踪自己要改变的真实 DOM 什么是虚拟DOM? ...

js 实现vue—引入子组件props传参

参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html < ...

vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

随机推荐

Javascript Patterns 6.3 Klass

Commonalities • There’s a convention on how to name a method, which is to be considered the construc ...

见招拆招:绕过WAF继续SQL注入常用方法

Web Hacker总是生存在与WAF的不断抗争之中的,厂商不断过滤,Hacker不断绕过.WAF bypass是一个永恒的话题,不少基友也总结了很多奇技怪招.那今天我在这里做个小小的扫盲吧.先来说说 ...

C# 连接Oracle数据库

最近项目要用Oracle数据库,之前没搞过,近2天遇到好多问题,现在总结一下,做个备份. 一.关于Oracle安装 1.服务器端 从Oracle官网下载文件,file1和file2,解压之后安装就行了 ...

Android数据存储方式之SharedPreferences

Android平台给我们提供了一个SharedPreferences类,它是一个轻量级的存储类,特别适合用于保存软件配置参数.使用SharedPreferences保存数据,其背后是用xml文件存放数 ...

初识Selenium(一)

Selenium入门相关PPT参考网址:http://wenku.baidu.com/view/d1e7d90390c69ec3d5bb7565.html?from=search 内容引用网址:htt ...

常用浏览器内核!IE,Chrome ,Firefox,Safari,Opera 等内核

常用浏览器内核: IE内核为:trident: Chrome内核为:blink(基于webkit,谷歌与Opera software共同开发): Firefox内核为:gecko: Safari内核为 ...

VueJs(1)---快速上手VueJs

[VueJs入门] 版权声明 首先申明:此篇博客不是本人原创,只是最近开始学习vue.jS,看到有作者写的很不错,我仅在它的基础上仅仅是修改了样式 原文博客地址:https://blog.csdn.n ...

浅析Android Dialog中setContentView()方法

2017-05-15 概述 Dialog在Android中是一个很优秀的工具.在使用Dialog时,我们一般都会自定义要显示的内容布局.Dialog自带了三个方法来支持自定义内容布局. public ...

mysql中using

select * from ( SELECT u.utm_source ,count(DISTINCT u.mobile) as new_user -- 登记用户 FROM 表名 u WHERE u. ...



推荐阅读
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 本文介绍了如何使用 Node.js 和 Express(4.x 及以上版本)构建高效的文件上传功能。通过引入 `multer` 中间件,可以轻松实现文件上传。首先,需要通过 `npm install multer` 安装该中间件。接着,在 Express 应用中配置 `multer`,以处理多部分表单数据。本文详细讲解了 `multer` 的基本用法和高级配置,帮助开发者快速搭建稳定可靠的文件上传服务。 ... [详细]
  • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
    本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
  • 两个条件,组合控制#if($query_string~*modviewthread&t(&extra(.*)))?$)#{#set$itid$1;#rewrite^ ... [详细]
  • 单元测试:使用mocha和should.js搭建nodejs的单元测试
    2019独角兽企业重金招聘Python工程师标准BDD测试利器:mochashould.js众所周知对于任何一个项目来说,做好单元测试都是必不可少 ... [详细]
  • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • 解决lib-flexible安装过程中遇到的错误问题
    在安装 lib-flexible 时,遇到了 `saveError ENOENT: No such file or directory` 错误,具体表现为无法打开 `E:\Github\SDIO\package.json` 文件。解决此问题的关键在于确保项目根目录下存在 `package.json` 文件,并且在正确的项目路径中执行安装命令。建议先检查项目结构,确认文件是否存在,然后再尝试重新安装依赖。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • 在腾讯云服务器上部署Nginx的详细指南中,首先需要确保安装必要的依赖包。如果这些依赖包已安装,可直接跳过此步骤。具体命令包括 `yum -y install gcc gcc-c++ wget net-tools pcre-devel zlib-devel`。接下来,本文将详细介绍如何下载、编译和配置Nginx,以确保其在腾讯云服务器上顺利运行。此外,还将提供一些优化建议,帮助用户提升Nginx的性能和安全性。 ... [详细]
  • 在 Kubernetes 中,Pod 的调度通常由集群的自动调度策略决定,这些策略主要关注资源充足性和负载均衡。然而,在某些场景下,用户可能需要更精细地控制 Pod 的调度行为,例如将特定的服务(如 GitLab)部署到特定节点上,以提高性能或满足特定需求。本文深入解析了 Kubernetes 的亲和性调度机制,并探讨了多种优化策略,帮助用户实现更高效、更灵活的资源管理。 ... [详细]
  • FastDFS Nginx 扩展模块的源代码解析与技术剖析
    FastDFS Nginx 扩展模块的源代码解析与技术剖析 ... [详细]
  • CentOS 7环境下Jenkins的安装与前后端应用部署详解
    CentOS 7环境下Jenkins的安装与前后端应用部署详解 ... [详细]
  • 本文深入探讨了使用Puppet进行软件包分发与管理的方法。首先介绍了fpm这一跨平台的软件包制作工具,其简便的操作流程使得软件包的创建变得轻松快捷。fpm的项目地址为:https://github.com/jordansissel/fpm。通过结合Puppet和fpm,可以实现高效、可靠的软件包管理和部署。 ... [详细]
  • 掌握PHP编程必备知识与技巧——全面教程在当今的PHP开发中,了解并运用最新的技术和最佳实践至关重要。本教程将详细介绍PHP编程的核心知识与实用技巧。首先,确保你正在使用PHP 5.3或更高版本,最好是最新版本,以充分利用其性能优化和新特性。此外,我们还将探讨代码结构、安全性和性能优化等方面的内容,帮助你成为一名更高效的PHP开发者。 ... [详细]
  • 基于Node.js的高性能实时消息推送系统通过集成Socket.IO和Express框架,实现了高效的高并发消息转发功能。该系统能够支持大量用户同时在线,并确保消息的实时性和可靠性,适用于需要即时通信的应用场景。 ... [详细]
author-avatar
拍友2502905977
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有