vue脚手架引入组件和vueCDN引入组件
Posted web半晨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue脚手架引入组件和vueCDN引入组件相关的知识，希望对你有一定的参考价值。
1、vue脚手架引入组件
自知
2、vueCND引入组件
2.1、方式一
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueCDN引入组件的方式-01</title>
</head>
<body>
<div id="app">
<div>父组件</div>
<menu-component :title="title"></menu-component>
</div>
<!-- 把组件放到id为app的div里面有不一样的效果 -->
<template id="menu-component">
<div>
<div>子组件</div>
<div>title</div>
</div>
</template>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="./index.js"></script>
</body>
let MenuComponent =
name: 'MenuComponent',
template: '#menu-component',
props: ['title']
;
new Vue(
el: '#app',
components:
MenuComponent
,
data:
title: "父组件传值到子组件"
);
2.2、方式二
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue引入组件的方式-02</title>
</head>
<body>
<div id="app">
<div>父组件</div>
<templates></templates>
</div>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="./index02.js"></script>
</body>
const templates =
template: `
<div>
<div>子组件</div>
<button @click="clickFoo">点击</button>
<div>action</div>
</div>`,
data()
return
action: "",
isShow: true
,
methods:
clickFoo()
if (this.isShow)
this.action = "闪现";
this.isShow = false;
else
this.action = "";
this.isShow = true;
;
var app = new Vue(
el: '#app',
components:
templates
,
data:
);
2.3、方式三
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue引入组件的方式-03</title>
</head>
<body>
<div id="app">
<div>父组件</div>
<children></children>
</div>
<script src="/node_modules/vue/dist/vue.js"></script>
<script src="./index03.js"></script>
</body>
Vue.component('children',
name: "children",
template: "<div>子组件</div>"
);
new Vue(
el: '#app',
data:
);
3、完整代码
以上是关于vue脚手架引入组件和vueCDN引入组件的主要内容，如果未能解决你的问题，请参考以下文章