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 ...
随机推荐
- 【javascript/PHP】当一个JavaScripter初次进入PHP的世界，他将看到这样的风景
本文将从以下11点介绍javascript和PHP在基础语法和基本操作上的异同: 1.数据类型的异同 2.常量和变量的定义的不同,字符串连接运算符不同 3.对象的创建方法的不同 4.PHP与JS在变 ...
- Python建代理配合burp实现自动免费用水
i春秋作家:凉风有信 Hi , 我是凉风 半年不见了啊,我又回来了因为太菜都不好意思发文章了 0×00 目录 0×01 前言0×02 利用fd分析与实战0×03 Python+burp简易搭建代理服务 ...
- CentOS 设置 oracle 开机自动启动
CentOS 设置 oracle 开机自动启动 1. [root@localhost ~]# gedit /etc/oratab 文件内容为: # # This file is used by ORA ...
- 优化openfire服务器提升xmpp 效率的15个方法（原创）
1.禁用原生xmpp搜索,使组织架构.人员数据本地化保存,并使客户端数据同步服务器,降低原生xmpp搜索的iq消耗,因为搜索是im应用的频繁操作: 2.禁用roster花名册.禁用presence包通 ...
- dubbo+zookeeper注册服务报错问题：No service registed on zookeeper
2019-04-04 11:23:40,372 ERROR [tomcat-threads--1] (com.bill99.dolphin.controller.ExceptionController ...
- 编程珠玑第一章的算法,Java实现,通俗易懂
该算法也就是所谓的位图算法,用一个int表示32位,也就是实际值为1~32的数. 按照书里说的, 该算法只适合内存有限,而磁盘和时间不限,且数字在1~MAX之间不重复的排序. package demo ...
- chromium浏览器开发系列第三篇：chromium源码目录结构
上两篇介绍了下载源码和编译源码,这次主要介绍chromium的源码目录结构,我也是通过源码和官网结合来跟大家说,如果有说的不准确的,欢迎交流. 另外,官网的不一定准确,他们其实也很懒,所以最主要还是靠 ...
- linux centos挂载数据盘教程
一.备份/home/liying目录数据前提条件:电脑重启下,保证服务关闭,以免进程影响操作 a.新建backup目录#cd /#mkdir backup b.把/home/liying/目录下的数据 ...
- Linux系统修改防火墙配置
防火墙配置文件位置 /etc/sysconfig/iptables 需要开放端口,请在里面添加一条内容即可: 1 -A RH-Firewall-1-INPUT -m state --state NEW ...
- 实现php的startsWith和endsWith
startsWith(): function startsWith($haystack, $needle){ return strncmp($haystack, $needle, strlen($ne ...