Vue入门 ---- 组件式开发

##组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="../lib/vue.js"></script><script src="../lib/vue-router.js"></script><script>window.onload = function() {Vue.component('com1', {template: '<h1>调用Vue.component方法定义</h1>'})new Vue({el: "#app",components: {'com2': {template: '<h2>直接定义在内部</h2>'},'com3': {template: '#com3'},'com4': {template: '#com4'}},})}</script>
</head>
<body><template id="com3"><div><h3>通过将template分离出来定义</h3></div></template><div id="app"><com1></com1><com2></com2><com3></com3><com4></com4></div><script type="x-template" id="com4"><h4>通过script定义</h4></script>
</body>
</html>

动态组件
< component :is=“a”> < /component>

<script>window.onload = function() {new Vue ({el: '#box',data: {a: 'aaa',},components: {'aaa': {template: '<h2>我是aaa</h2>'},'bbb': {template: '<h2>我是bbb</h2>'}}})}
</script>
</head>
<body><div id="box"><input type="button" @click="a='aaa'" value="aaa组件"><input type="button" @click="a='bbb'" value="bbb组件"><component :is="a"></component></div>
</body>

##安装vue-devtools插件
https://github.com/vuejs/vue-devtools
官方提供了一下的几种方式，可以安装到谷歌、火狐等浏览器，使用谷歌浏览器但是不能翻墙的读者也可以使用yum安装
这里写图片描述
安装完很多朋友都会遇到这样的问题，我们可以通过一下的方式来改进

在谷歌浏览器输入chrome://version/，查看个人资料路径
找到相应路径下的Extensions目录，这里面存放了下载过的Chrome插件的内容，因为插件的文件名大多不好辨认，我们可以通过修改日期来找到我们最近安装的vue-devtools插件
修改里面的manifest.json文件夹
重启浏览器，再次打开vue项目，按下F12，效果如下