最近在维护公司的项目,当我拿到项目时,发现他用了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. Struts2-学习笔记系列(3)-返回视图

    Action执行execute返回字符串,又如何返回对应的页面呢? 关在在于struts中action节点配置的result.如下: 内置有的ERROR  SUCCESS等好几种.看源码即可 publ ...

  2. 并查集---体会以及模板&&How Many Tables - HDU 1213

    定义&&概念: 啥是并查集,就是将所有有相关性的元素放在一个集合里面,整体形成一个树型结构,它支持合并操作,但却不支持删除操作 实现步骤:(1)初始化,将所有节点的父亲节点都设置为自己 ...

  3. 74HC595芯片的特性及使用方法和点评

    一 它能干什么?   74HC595是一个8位串行输入.平行输出的位移缓存器:平行输出为三态输出.在SCK的上升沿,单行数据由SDL输人到内部的8位位移缓存器,并由Q7‘输出,而平行输出则是在LCK的 ...

  4. Win32 Disk Imager刻录过的U盘恢复容量的方法

    近日遇到一个问题,使用Win32 Disk Imager刻录过的U盘,想恢复使用,但无法正常使用. 按WIN+R键调出Win10运行框,输入diskmgmt.msc,打开磁盘管理工具. 看到U盘的状况 ...

  5. Cucumber(4)——jenkins的集成

    目录 回顾 必备知识 集成方法 回顾 在上几节中,关于cucumber的知识我已经全部的介绍完了,但是近期,jenkins大行其道,在工作上面能为我们节省大量的时间. 所以在本节中,我会介绍cucum ...

  6. JMeter分布式压测-常见问题之( Cannot start. localhost.localdomain is a loopback address)

    问题描述: JMeter分布式测试时,以Linux系统作为被测服务器,在其中启动 jmeter-server 服务时出现异常,系统提示如下: [root@localhost bin]# ./jmete ...

  7. PHP函数:array_chunk

    array_chunk()  -  将一个数组分割成多个. 说明: array_chunk ( array $array , int $size [, bool $preserve_keys = fa ...

  8. 数据挖掘入门系列教程(十)之k-means算法

    简介 这一次我们来讲一下比较轻松简单的数据挖掘的算法--K-Means算法.K-Means算法是一种无监督的聚类算法.什么叫无监督呢?就是对于训练集的数据,在训练的过程中,并没有告诉训练算法某一个数据 ...

  9. 重启mysql服务

    重启mysql 启动mysql: 方式一:sudo /etc/init.d/mysql start 方式二:sudo service mysql start 停止mysql: 方式一:sudo /et ...

  10. 从零开始学习docker之在docker中运行springboot项目

    一.docker环境配置 首先需要一个安装了docker的服务器(本地或者云服务器),如果没有请看上文,传送门---https://www.cnblogs.com/wdfordream/p/12737 ...