Question

我实际上只是试图实现到vuejs组件中。任何人都可以帮助将JavaScript放在哪里，以便它可以正常工作吗？我是vuejs的新手，我仍然不确定如何在脚本部分中设置所有内容，以使其正常工作。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
	acc[i].addEventListener("click", function() {
		this.classList.toggle("active");
		var panel = this.nextElementSibling;
		if (panel.style.maxHeight){
			panel.style.maxHeight = null;
		} else {
			panel.style.maxHeight = panel.scrollHeight + "px";
		} 
	});
}

.accordion {
	background-color: #eee;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
}

.active, .accordion:hover {
	background-color: #ccc;
}

.accordion:after {
	content: '\002B';
	color: #777;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}

.active:after {
	content: "\2212";
}

.panel {
	padding: 0 18px;
	background-color: white;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

<h2>Accordion with symbols</h2>

<button class="accordion">Section 1</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

谢谢！

Answer 1

由于您正在尝试学习Vue，因此建议您研究如何使用Vues自己的工具集实现所需的功能，而不是使用本机JS事件处理程序，文档选择等。

您可以使用v-on:指令（或简称为@）轻松添加最常见事件的事件侦听器：

<button class="accordion" @click="myClickHandler">Section 1</button>

您可以通过ref属性引用其他元素，该属性随后在this.$refs下的Vue组件中可用：

<div class="panel" ref="myPanel">...

以及您的myClickHandler方法中

：

methods: {
  myClickHandler() {
    let panel = this.$refs.myPanel
    ... do stuff ....
  }
}

这将是解决问题的“ Vue方式”-与本机JS dom选择，事件监听器等相比，一旦您习惯了它，它真的很棒而且很简单。

我建议您更多地研究如何通过Vues工具实现此目标，而不是尝试强制使用本机JS并超越所有Vue的简单性。

Answer 2

您可以将常规javascript放在Vue组件的script标签中。它将执行与执行常规app.js文件相同的方式。

如何将普通的Javascript放入VueJS

2 个答案: