最新Vue学习日志之组件基础_vue 日志查询组件，西安web开发培训

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

template必须被一个元素包含，否则无法渲染

局部注册组件：

<div id='app'>
		<my-component></my-component>
</div>
		<script src="../vue.js"></script>
		<script>
			var Baby ={
				template:'<div>Baby的显示</div>'
			}
			var app =new Vue({
				el:'#app',
				components:{
					'my-component':Baby
				}
			})
</script>

在Vue实例的components中注册，并且要在script中声明

但是在比如table标签中，是无法直接使用组件的，就要用特殊的is属性来挂载

<table>
<tbody is='my-component'></tbody>
</table>          

在之前提到data必须是函数，在此举个引用内部和外部data的区别：

<div id='app'>
			<my-component></my-component>
			<my-component></my-component>
			<my-component></my-component>
</div>
		<script>
			var data={number:0};
			Vue.component('my-component',{
				template:'<button @click="number++">{{number}}</button>',
					
				data:function(){
					return data;
				}	
			});
			var app =new Vue({
				el:'#app'
			})
		</script>

效果如上图，点击任何一个按钮，三个按钮的数值都会加一

如何让三个按钮独立显示？将外部data注释掉，改用内部data

data:function(){
return{
     number:0
	       }
	}


### 总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。



包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

![](https://img-blog.csdnimg.cn/img_convert/d74f8b42f4a63c76b18efc6a818147df.png)

![](https://img-blog.csdnimg.cn/img_convert/6deb905d9655a3f0f54b8920686e1970.png)

**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

**JavaScript**

![](https://img-blog.csdnimg.cn/img_convert/7796de226b373d068d8f5bef31e668ce.png)

**性能**

![](https://img-blog.csdnimg.cn/img_convert/d7f6750332c78eb27cc606540cdce3b4.png)



**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)



27cc606540cdce3b4.png)



**linux**

![](https://img-blog.csdnimg.cn/img_convert/ed368cc25284edda453a4c6cb49916ef.png)