html页面引入vue组件
时间:2019-12-04
本文章向大家介绍html页面引入vue组件,主要包括html页面引入vue组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
html页面引入vue组件需要在页面引入http-vue-loader.js
注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html
1.创建my-component.vue
<template> <div class="hello">Hello {{who}}</div> </template> <script> module.exports = { data: function() { return { who: 'world' } } } </script> <style> .hello { background-color: #ffe; } </style>
2.创建index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入 http-vue-loader --> <script src="https://unpkg.com/http-vue-loader"></script> </head> <body> <div id="app"> <my-component></my-component> </div> </body> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> // 使用httpVueLoader Vue.use(httpVueLoader);
new Vue({ el: '#app', data: function () { return { visible: false } }, components: { // 将组建加入组建库 'my-component': 'url:./component/my-component.vue' } }) </script> </html>
注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html
httpVueLoader的其他组件载入方式可查看:https://www.npmjs.com/package/http-vue-loader
原文地址:https://www.cnblogs.com/new-life/p/11983135.html
- C++queue容器学习(详解)
- 牛客面经 |这可能不只是一篇面经
- 图的基本算法(BFS和DFS)
- C++STL中set的使用策略(详解)
- Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2)(A.思维题,B.思维题)
- 设计模式六大原则(1):单一职责原则
- 设计模式六大原则(2):里氏替换原则
- Selenium2+python自动化72-logging日志使用
- Codeforces Round #395 (Div. 2)(A.思维,B,水)
- php实现图形计算器
- Selenium2+python自动化73-定位的坑:class属性有空格
- 华中农业大学第五届程序设计大赛网络同步赛题解
- Java构造方法与析构方法实例剖析
- 5.训练模型之利用训练的模型识别物体
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android自带的四种线程池使用总结
- CentOS8.1搭建Gitlab服务器详细教程
- Android开发之图片旋转功能实现方法【基于Matrix】
- Android编程简单实现拨号器功能的方法
- win10 + Ubuntu20.04 LTS双系统引导界面美化
- Android开发从相册中选取照片的示例代码
- 详解Android WebView的input上传照片的兼容问题
- Ubuntu14.04安装、配置与卸载QT5的步骤详解
- CentOS 8 安装 MariaDB的详细教程
- Android中RecyclerView拖拽、侧删功能的实现代码
- Android单个RecyclerView实现列表嵌套的效果
- Android如何禁止向EditText控件中输入内容详解
- 小程序视角下同构方案思考
- Android基于自带的DownloadManager实现下载功能示例
- Linux服务器搭建nvidia-docker环境过程详解