javascript - Vue.js 组件变成 Webpack 中的组件
问题描述
我从教程中获取了以下代码,我想对其进行修改以便在 Webpack 中编译 .. 在表单模板脚本和 css 中。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div id = "counter-event-example">
<p style = "font-size:25px;">Language displayed : <b>{{ languageclicked }}</b></p>
<button-counter
v-for = "(item, index) in languages"
v-bind:item = "item"
v-bind:index = "index"
v-on:showlanguage = "languagedisp"></button-counter>
</div>
</div>
<script type = "text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click = "displayLanguage(item)"><span style = "font-size:25px;">{{ item }}</span></button>',
data: function () {
return {
counter: 0
}
},
props:['item'],
methods: {
displayLanguage: function (lng) {
console.log(lng);
this.$emit('showlanguage', lng);
}
},
});
var vm = new Vue({
el: '#databinding',
data: {
languageclicked: "",
languages : ["Java", "PHP", "C++", "C", "Javascript", "C#", "Python", "HTML"]
},
methods: {
languagedisp: function (a) {
this.languageclicked = a;
}
}
})
</script>
</body>
</html>
我的问题是我有一个名为“按钮计数器”的“子组件”..
解决方案
使用单个文件组件并在那里定义您的按钮计数器和其他组件。
一般来说,如果你已经在使用Webpack,如果你对所有事情都使用 SFC,生活会更轻松。
推荐阅读
- python - 从函数的关键字参数生成 TypedDict
- android - 所有资源代码的格式都很奇怪 - android
- sql - PostgreSQL。仅允许许多可能值之一的约束
- python - 如何显示整列?
- reactjs - 覆盖阻止输入到 xlsx 电子表格如何在我的情况下解决这个问题
- ios - 快速条件编译块总是检查语句语法
- python - 如何在 asyncio 中使用 kqueue 进行文件监控?
- docker - kube-apiserver docker 不断重启
- python - 你能检查一下它是否可能(Selenium python 自动化 + PHP)
- unity3d - 用于 C# 统一游戏应用程序的 GPRC 下的 UDP 传输