最近在维护公司的项目，当我拿到项目时，发现他用了vue。

但是~~仅仅是引用vue.js文件，整体的架构还是html那种，没有用webpack！

当时觉得~哇~原来还可以这样！

然后了解了业务逻辑和代码逻辑，觉得这个人写的~emmm~~~，没办法只能按照之前的思路去写~

开发新页面时，我就引用了vue的组件(上个人仅仅是用到了双向绑定这个好处)，

下面附上在html中引用vue组件的写法：

第一步：首先引用 httpVueLoader.js, 再引用Vue.use(httpVueLoader)---这步很重要

第二步：创建vue组件，引用vue组件

第三步：在html中写引用组件，就ok啦

ps：在引用组件时，中途出现了小插曲。从第二步可以看出我的组件名起的是AddInfo.

　　 我一开始在html中引入时直接写成<AddInfo></AddInfo>，怎么都显示不了组件！后来才知道，vue2.0组件命名区分大小写了，哈哈哈哈~

　　在这里就不细说了，有时间会专门写一篇关于命名规则的~

新手上道，写的不足的地方请大家提出来哦~~

在html中使用vue组件的更多相关文章

  1. Laravel 如何在blade文件中使用Vue组件

    Laravel 如何在blade文件中使用Vue组件 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan u ...

  2. 在webpack中配置.vue组件页面的解析

    1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...

  3. Laravel 项目中编写第一个 Vue 组件

    和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...

  4. vue组件中使用iframe元素

    需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...

  5. Vue (三) --- Vue 组件开发

    ------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...

  6. vue 组件开发、vue自动化工具、axios使用与router的使用(3)

    一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...

  7. 三: vue组件开发及自动化工具vue-cli

    一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...

  8. 基于vue组件，发布npm包

    亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project n ...

  9. Vue组件介绍及开发

    一. 通过axios实现数据请求 1.json json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于 ...

随机推荐

  1. 初探CI，Github调戏Action手记——自动构建并发布

    前言 最近在做脚本的说明文档时使用了vuepress这个东西 前端实在是菜,只能随便写写了 正常写完md文件之后推送至github做版本控制 而前端页面的生成则是在本地,部署也是在本地手工进行 一套下 ...

  2. 国外的一个代码 仓库 github --- 里面类似一个svn 的代码仓库

    https://github.com/wzhanke/shell 用户:wzh.e 邮箱:wzh.e@x.com 登陆密码:*wzh.e8*9

  3. 理解class.forName() ---使用jdbc方式链接数据库时会经常看到这句代码

    目录(?)[-] 官方文档 类装载 两种装载方法的区别 不同的类装载器 是否实例化类 在jdbc链接数据库中的应用 资源   原文地址:http://yanwushu.sinaapp.com/clas ...

  4. 多线程设置flag标志位实现同步

    信号灯解决同步问题 我尽量注释了代码,可以很容易理解了. package Thread; /** * 信号灯 * 借助标志位 */ public class FlagThread { public s ...

  5. 解决同层hover事件重叠闪烁问题

    完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. vue中 使用SVG实现鼠标点击绘图 提示鼠标移动位置 显示绘制坐标位置

    <div class="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/sv ...

  7. 3d模型一般怎么导入到到Threejs中使用

    这是我之前做的一个demo,导入的3d模型文件是obj格式的,需要使用OBJLoader和MTLLoader, mtl文件用于描述多边形可视面貌的材质如果你可以导出obj.mtl文件的话,那么就可以使 ...

  8. 用Python介绍了企业资产情况的数据爬取、分析与展示。

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:张耀杰 PS:如有需要Python学习资料的小伙伴可以加点击下方链接自 ...

  9. 2019CISCN华南线下两道web复现

    原帖地址 : https://xz.aliyun.com/t/5558 2019CISCN华南线下的两个简单 web 部分题目下载地址,有的不完整 : 点我点我 web 1 考点 : 无参函数的 RC ...

  10. 如何用Github钩子做自动部署

    最近机缘巧合的购置了域名和服务器,不用实在是浪费,再加上一直没有属于自己的个人网站,所以打算用hexo在服务器上玩一下,这样也就不用再纠结用Github pages还是Gitee pages了.当然, ...