最近在维护公司的项目，当我拿到项目时，发现他用了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. 数据结构和算法(Golang实现)(9)基础知识-算法复杂度及渐进符号

    算法复杂度及渐进符号 一.算法复杂度 首先每个程序运行过程中,都要占用一定的计算机资源,比如内存,磁盘等,这些是空间,计算过程中需要判断,循环执行某些逻辑,周而反复,这些是时间. 那么一个算法有多好, ...

  2. AJ学IOS（44）之网易彩票自定义图片在右边的Button_弹出view_ios6,7简单适配

    AJ分享,必须精品 效果: 注意图里面了吗,其实那个效果做起来真的很简单,在iOS中苹果给我们封装的很好,关键是那个按钮 系统的按钮的图片是在左边的,这里我们需要把他调整到右边,然后呢需要我们自己做一 ...

  3. AJ学IOS（09）UI之UIScrollView代理触摸实现_图片缩放

    AJ分享,必须精品 先看效果 代码 // // NYViewController.m // 05-放大缩小图片UIScrollView // // Created by apple on 15-3-2 ...

  4. 学习Salesforce | Platform Developer Ⅰ 平台初级开发认证考试指南及备考资源

    一.平台开发人员考试计划 Salesforce平台开发人员初级认证面向具有在Lightning平台上构建自定义应用程序的知识.技能和经验的个人. 该认证考核Lightning平台的基本编程能力,并会使 ...

  5. 字符串的常用操作和方法（Python入门教程）

    字符串的常用操作 很好理解 字符串可以用 ' + ' 连接,或者乘一个常数重复输出字符串 字符串的索引操作 通过一对中括号可以找到字符串中的某个字符 可以通过正负数双向操作噢 用一个中括号来实现 为什 ...

  6. tortoise 设置beyond Compare比较工具

    1.桌面右击tortoiseSVN->setting->Diff Viewer面板,选择external,选中beyond Compare路径

  7. 网站假死 重启NGINX无效 必须重启PHP 原因分析

    一.错误提示说明: Nginx 502 Bad Gateway:请求的PHP-CGI已经执行,但是由于某种原因(一般是读取资源的问题)没有执行完毕而导致PHP-CGI进程终止. Nginx 504 G ...

  8. net core天马行空系列：降低net core门槛，数据库操作和http访问仅需写接口，实现类由框架动态生成

    引文   hi,大家好,我是三合.不知各位有没有想过,如果能把数据库操作和http访问都统一封装成接口(interface)的形式, 然后接口对应的实现类由框架去自动生成,那么必然能大大降低工作量,因 ...

  9. 尝试用python开发一款图片压缩工具1：尝试 pillow库

    开发目的 我经常使用图片.公众号文章发文也好,还是生活中要使用素材.图片是一种比文字更加直观的载体.但是图片更加占用带宽,很多软件都对图片有大小限制.图片太大也会影响加载速度.我试过几款图片压缩工具, ...

  10. Idea上tomcat部署细节

    ​ 一.On Update action: (1)Update resources:更新项目变更的.jsp,.xml文件等资源文件,而不会更新源码文件:(仅修改项目的JS文件.JSP文件.CSS文件推 ...