Vue之组件使用(一)
这仅仅是个人为了防止忘记做的笔记而已,仅供参考,有不对的地方请纠正
组件这种东西用来封装多次使用的控件还是很有用处的,我还是挺喜欢这种模式,优化了前端的工作,写个组件也比较简单。下次有时间记录一下样式的复用
首先呢,使用webstorm创建一个新的Vue项目
创建完毕项目后,我们在component目录下创建一个index页面,然后在这里做测试,因为我所有的选择都是默认的,自己在做的时候可以根据实际需求来写,都无所谓,这不是重点。
那么重点来了,组件,我首先,引入Vue.js,引入完毕后来写组件
引入之后,使用component属性自定义所需的控件
vue.component('Hello',{
template:'<h1>Hello World</h1>'
});
我这里定义了一个Hello,我在页面上可以这么引用自定义组件
<div id="app">
<Hello></Hello>
</div>
那么我运行之后在页面上显示的结果就是这样的,这就是一个最简单的组件使用方式。
至于Vue,可以自己去官网找下载链接,我这里就不放Vue的下载链接了,下面我附上整个页面的源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="vue.min.js"></script>
<script>
vue.component('Hello',{
template:'<h1>Hello World</h1>'
});
new vue({
el:"#app" }); </script>
</head>
<body>
<div id="app">
<Hello></Hello>
</div>
</body>
</html>
Vue之组件使用(一)的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- 为什么VUE注册组件命名时不能用大写的?
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
- vue的组件化运用(数据在两个组件互传,小问题总结)
一.vue的组件化应用 首先,知道有哪些相关的属性需要用到,再慢慢去理解,运用. 1.两个vue页面 2. slot占位符(可用可不用) 3.props内置属性 4.watch监听函数 5.impor ...
随机推荐
- Git错误日志--! [rejected]
当出现下面错误时 ,是因为和仓库两端版本不一致时,常见于刚创建仓库时,中只有readme文件的情况.执行下面的运行完毕之后.再push到仓库即可 ! [rejected] master -> m ...
- [模板]最小割树(Gomory-Hu Tree)(luogu4897)
给定一个\(n\)个点\(m\)条边的无向连通图,多次询问两点之间的最小割 两点间的最小割是这样定义的:原图的每条边有一个割断它的代价,你需要用最小的代价使得这两个点不连通 Input 第一行两个数\ ...
- 使用httpClient模拟http请求
在很多场景下都需要用到java代码来发送http请求:如和短信后台接口的数据发送,发送数据到微信后台接口中: 这里以apache下的httpClient类来模拟http请求:以get和Post请求为例 ...
- Docker - Docker与Vagrant的区别
Docker Docker - HomePage Wiki - Docker Docker简介 Overview Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从 Apache2.0 协 ...
- java极光推送记录
1. 添加poom依赖: <dependency> <groupId>cn.jpush.api</groupId> <artifactId>jigu ...
- maven build的常用生命周期
常用的maven build goals: validate - validate the project is correct and all necessary information is av ...
- maven搭建ssm初级框架
喜欢的朋友可以关注下,粉丝也缺. 前言: 想必大家对smm框架已经熟悉的不能再熟悉了,它是由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. ...
- oracle 11g RAC数据库监听配置相关
oracle RAC 监听配置基本和单实例的配置相同 11g之后 安装RAC的过程中,不需要执行netca来手动创建监听,在安装集群软件的时候,会自动创建监听程序: 而在DBCA建库的时候,又会自动创 ...
- StringBuffer、StringBuilder、冒泡与选择排序、二分查找、基本数据类型包装类_DAY13
1:数组的高级操作(预习) (1)数组:存储同一种数据类型的多个元素的容器. (2)特点:每个元素都有从0开始的编号,方便我们获取.专业名称:索引. (3)数组操作: A:遍历 public stat ...
- / | \ # $ ^ & *这些符号怎么读
供参考: /: slash或forward slash 英 [slæʃ] |: vertical bar或pipe #: number sign或pound sign \: backslash 英 [ ...