在html中使用vue组件
最近在维护公司的项目,当我拿到项目时,发现他用了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组件的更多相关文章
- Laravel 如何在blade文件中使用Vue组件
Laravel 如何在blade文件中使用Vue组件 1. 安装laravel/ui依赖包 composer require laravel/ui 2.生成vue基本脚手架 php artisan u ...
- 在webpack中配置.vue组件页面的解析
1. 运行`cnpm i vue -S`将vue安装为运行依赖: 2. 运行`cnpm i vue-loader vue-template-compiler -D`将解析转换vue的包安装为开发依赖: ...
- Laravel 项目中编写第一个 Vue 组件
和 CSS 框架一样,Laravel 不强制你使用什么 JavaScript 客户端框架,但是开箱对 Vue.js 提供了良好的支持,如果你更熟悉 React 的话,也可以将默认的脚手架代码替换成 R ...
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
- Vue (三) --- Vue 组件开发
------------------------------------------------------------------好心情,会让你峰回路转. 5. 组件化开发 5.1 组件[compo ...
- vue 组件开发、vue自动化工具、axios使用与router的使用(3)
一. 组件化开发 1.1 组件[component] 在网页中实现一个功能,需要使用html定义功能的内容结构,使用css声明功能的外观样式,还要使用js定义功能的特效,因此就产生了一个功能先关的代码 ...
- 三: vue组件开发及自动化工具vue-cli
一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...
- 基于vue组件,发布npm包
亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project n ...
- Vue组件介绍及开发
一. 通过axios实现数据请求 1.json json是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于 ...
随机推荐
- logger日志级别
Level 描述 ALL 各级包括自定义级别 DEBUG 指定细粒度信息事件是最有用的应用程序调试 ERROR 错误事件可能仍然允许应用程序继续运行 FATAL 指定非常严重的错误事件,这可能导致应用 ...
- SpringMVC框架详细教程(二)
创建动态Web项目 1.创建动态Web项目: 打开Eclipse,在Package Explorer右击,创建项目,选择动态Web项目(Dynamic Web Project). 填写项目名称,并选择 ...
- docker中的dockerfile
什么是dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档.可以使用在命令行中调用任何命令. Docker通过读取Dockerfile中的指令自动生成映像. docker ...
- Volatile可见性分析(一)
JUC(java.util.concurrent) 进程和线程 进程:后台运行的程序(我们打开的一个软件,就是进程) 线程:轻量级的进程,并且一个进程包含多个线程(同在一个软件内,同时运行窗口,就是线 ...
- Vmware Centos 与 windows 创建共享目录
一路路都是坑~~ 只为了安装orcle的jdk~~,然而Orcle下载jdk是需要登录才能下载的,所以我在Centos7下使用 wget / curl 都下载不了哦~jdk7 第一步:Vmvare ...
- Qt发送一次信号触发两次槽函数的原因
在手动为控件编写槽函数的时候,如果将槽函数名字按如下格式编辑,则不需要再次进行手动关联 void on_pushButton_1_clicked(); void on_radioButton_clic ...
- MySQL 5.7.18 zip 文件安装过程
安装最新MySQL:5.7.18 1.下载路径 https://dev.mysql.com/downloads/mysql/ 有账号登陆下载, 没有账号:no thanks;just start my ...
- VCL安装有哪几种方法?
不是由Borland 提供的组件叫第三方组件: 就目前常见的各种形式的组件的安装方法介绍一下. 1.只有一个DCU文件的组件.DCU文件是编译好的单元文件,这样的组件是作者不想把源码公布.一般来说,作 ...
- C. Beautiful Regional Contest
用前缀和写一直wa.. 思路:让金牌和银牌最少,通多增加铜牌的方式来扩大总奖牌的个数. #include<bits/stdc++.h> using namespace std; map&l ...
- 微信小程序之base64图片如何预览与一键保存到本地相册?
需求:由于后台服务器各方面的限制,现在服务器返回的图片是base64格式的,小程序端需要支持预览图片和多个图片一键下载功能 一.如何预览base64位图片? WXML页面:item.src的值是bas ...