版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39630587/article/details/79841172
组件
<!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安装
安装完很多朋友都会遇到这样的问题，我们可以通过一下的方式来改进
1. 在谷歌浏览器输入chrome://version/，查看个人资料路径
2. 找到相应路径下的Extensions目录，这里面存放了下载过的Chrome插件的内容，因为插件的文件名大多不好辨认，我们可以通过修改日期来找到我们最近安装的vue-devtools插件
3. 修改里面的manifest.json文件夹
4. 重启浏览器，再次打开vue项目，按下F12，效果如下
