最近在维护公司的项目，当我拿到项目时，发现他用了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. Idea离线安装plugins插件 如Lombok

    由于公司不允许使用外网,之前用的idea 15 安装了一次.但是idea15的提示不够友好,今天升级idea2017.3.2,同样又需要安装,那就写个教程吧. 网上其他的安装教程不通用,也是针对不同i ...

  2. Netperf网络性能测试工具详解教程

    本文下载链接: [学习笔记]Netperf网络性能测试工具.pdf 一.Netperf工具简介 1.什么是Netperf ? (1)Netperf是由惠普公司开发的一种网络性能测量工具,主要针对基于T ...

  3. AJ学IOS 之第一次打开Xcode_git配置，git简单学习

    AJ分享,必须精品 一:错误 当第一次打开Xcode我们进行commit操作的时候会报错: The working copy “测试” failed to commit files. * Please ...

  4. C#_关键字：Lock的解释和使用

    定义 lock关键字,互斥锁,通过锁住某一对象从而将语句块({})里面的代码设置为临界区. 线程在线性执行代码时若遇到互斥锁,必须先申请互斥锁的访问权,若访问成功,则继续线性访问互斥锁后的临界区代码块 ...

  5. C - Sigma Function LightOJ - 1336 (数论)

    一个让人脑洞大开的题. 题目大意比较简单,询问[1,n]有多少个数其因子和为偶数. 因子分解定理中求因子和的公式是 f(n)=(1+p1+p1^2+p1^3+...+p1^a1)(1+p2+p2^2+ ...

  6. G - Messy codeforces1262C

    题目大意: 输入n和m,n是n个字符,m是m个前缀.对前缀的规定可以配对的括号.比如(),,((()))等等.在输入n个括号字符,对这个n个字符,通过交换使其满足m个前缀.交换次数不限,规则想当与re ...

  7. PIL库之图片处理

    (1)对图片生成缩略图 from PIL import Image im = Image.open("C:\Users\litchi\Desktop\picture1.jpg") ...

  8. vue2.x学习笔记（九）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12577948.html. 数组的更新检测 数组在javascript是一种特殊的对象,不是像普通的对象那样通过Ob ...

  9. Jmeter 使用正则表达式提取响应结果中的值

    正则表达式提取的界面如下图: apply to: Main sample and sub-samples:作用于父节点取样器及对应子节点取样器Main sample only:仅作用于父节点取样器Su ...

  10. C++养成好的代码习惯

    [C++小技巧] -------------------------------------------------------------#ifdef _DEBUG    imwrite(" ...