最近在维护公司的项目，当我拿到项目时，发现他用了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. 【python实现卷积神经网络】损失函数的定义（均方误差损失、交叉熵损失）

    代码来源:https://github.com/eriklindernoren/ML-From-Scratch 卷积神经网络中卷积层Conv2D(带stride.padding)的具体实现:https ...

  2. JSR303完成validate校验并编写BeanValidator工具类

    一.引入pom依赖 <!-- validator --> <dependency> <groupId>javax.validation</groupId> ...

  3. Python程序设计实验报告一：熟悉IDLE和在线编程平台

    安徽工程大学 Python程序设计 实验报告 班级   物流191   姓名  崔攀  学号3190505136 成绩_____           日期     2020.3.8     指导老师  ...

  4. Treasure Island DFS +存图

    All of us love treasures, right? That's why young Vasya is heading for a Treasure Island. Treasure I ...

  5. 学习JVM参数前必须了解的

    JVM参数是什么 大家照相通常使用手机就够用了,但是针对发烧友来说会使用更专业的设备,比如单反相机,在单反里有好几个模式,P/A/S/M,其中P是傻瓜模式,程序会自动根据环境设置快门速度和光圈大小,以 ...

  6. 腾讯云集群服务部署mysql并挂载到服务器

    一.背景 由于现在大部分的应用都是运行在云服务器上的,而现在大多数文章都是主要写如何在服务器上使用docker去运行mysql,比较少有介绍云服务器上的.再加上现在k8s比较火爆,而云厂商大多数都提供 ...

  7. MergeSort归并排序和利用归并排序计算出数组中的逆序对

    首先先上LeetCode今天的每日一题(面试题51. 数组中的逆序对): 在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对.输入一个数组,求出这个数组中的逆序对的总数. ...

  8. iOS重构项目之路

    iOS重构项目之路 1.整理目录 按照功能模块对整个工程的目录进行分类,比如 2.整理资源文件 删除多余的图片文件,资源文件 图片资源尽量添加到Assets.xcassets中 删除项目中未引用的图片 ...

  9. git flow配置问题

    Mac使用 git flow 的时候,当 -m 进行换行有时消息会被截断,怎么解决? 原因: brew 上的 gnu-getopt 这个包未配置好 步骤: 1. 在 ~/.gitflow_export ...

  10. 这是那些大佬程序员常用的学习java网站,这就是别人薪资上万的原因

    大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们.主要有:电子书搜索.实用工具.在线视频 ...