在Vue中写原生JS的方法有：直接在模板中使用原生JS、在生命周期钩子中使用原生JS、通过methods选项定义原生JS函数、在Vue指令中使用原生JS。其中，直接在模板中使用原生JS是最常见且简单的方法。下面将详细描述如何在Vue中运用这些方法。
一、直接在模板中使用原生JS
在Vue的模板中，你可以直接使用原生JavaScript表达式。例如，在v-bind或者v-on指令中直接编写JavaScript代码。
<template>
<div>
<button v-on:click="alert('Hello, World!')">Click Me</button>
</div>
</template>
这种方式非常直观，但也有局限性，适用于简单的操作。对于复杂的逻辑，建议使用以下其他方法。
二、在生命周期钩子中使用原生JS
Vue的生命周期钩子为我们提供了在组件不同阶段执行代码的机会。你可以在这些钩子函数中编写原生JS代码。例如，在mounted钩子中操作DOM。
export default {
mounted() {
document.getElementById('myElement').style.color = 'red';
}
}
这种方法适用于需要在组件挂载后立即进行的DOM操作。
三、通过methods选项定义原生JS函数
在Vue组件的methods选项中，可以定义原生JavaScript函数，然后在模板中调用这些方法。
export default {
methods: {
showAlert() {
alert('Hello, World!');
}
}
}
<template>
<div>
<button v-on:click="showAlert">Click Me</button>
</div>
</template>
这种方法适用于需要重复使用的逻辑。
四、在Vue指令中使用原生JS
自定义指令是Vue提供的一个功能，允许你将原生JavaScript逻辑封装在指令中，并在模板中使用。
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
<template>
<input v-focus>
</template>
这种方式适用于需要在多个组件中复用的逻辑。
五、在Vuex中使用原生JS
如果你的项目使用了Vuex进行状态管理，那么你也可以在Vuex的actions或mutations中编写原生JavaScript代码。例如，在action中进行异步操作。
const actions = {
fetchData({ commit }) {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
commit('setData', data);
});
}
}
这种方式适用于需要进行全局状态管理的项目。
六、在Vue Router中使用原生JS
如果你的项目使用了Vue Router进行路由管理，那么你也可以在路由钩子中编写原生JavaScript代码。例如，在路由守卫中进行权限验证。
const router = new VueRouter({
routes: [
{
path: '/dashboard',
component: Dashboard,
beforeEnter: (to, from, next) => {
if (isLoggedIn()) {
next();
} else {
next('/login');
}
}
}
]
});
这种方式适用于需要在导航过程中进行逻辑判断的项目。
七、在Vue的插件中使用原生JS
如果你需要将一些功能封装成插件供全局使用，那么你可以在插件中编写原生JavaScript代码。例如，创建一个全局的工具函数库。
const MyPlugin = {
install(Vue) {
Vue.prototype.$myMethod = function (methodOptions) {
// 原生JavaScript代码
alert('This is a method from MyPlugin');
}
}
}
Vue.use(MyPlugin);
这种方式适用于需要在多个组件中复用的逻辑。