如何在vue写原生js

在Vue中写原生JavaScript主要可以通过以下几种方式：1、在生命周期钩子中使用原生JS；2、在methods中使用原生JS；3、在模板中通过事件绑定调用原生JS。

一、在生命周期钩子中使用原生JS

Vue的生命周期钩子方法（如created、mounted等）允许你在组件的不同生命周期阶段执行代码。你可以在这些钩子方法中编写原生JavaScript代码。例如：

export default {
  mounted() {
    // 原生JS代码
    document.querySelector('#example').textContent = 'Hello, world!';
  }
}

在这个例子中，mounted钩子在组件被挂载到DOM后执行，使用了原生JavaScript方法querySelector来修改DOM元素的内容。

二、在methods中使用原生JS

Vue组件的methods部分是定义和组织组件行为的地方。在methods中，你可以自由地使用原生JavaScript。例如：

export default {
  methods: {
    changeContent() {
      // 原生JS代码
      document.querySelector('#example').textContent = 'Content changed!';
    }
  }
}

然后在模板中通过事件绑定调用这个方法：

<template>
  <div>
    <div id="example">Original content</div>
    <button @click="changeContent">Change Content</button>
  </div>
</template>

三、在模板中通过事件绑定调用原生JS

你也可以直接在模板中绑定事件，并在事件处理函数中使用原生JavaScript。例如：

<template>
  <div>
    <div id="example">Original content</div>
    <button @click="changeContent">Change Content</button>
  </div>
</template>
<script>
export default {
  methods: {
    changeContent() {
      // 原生JS代码
      document.querySelector('#example').textContent = 'Content changed!';
    }
  }
}
</script>

这种方法与在methods中使用原生JavaScript类似，但绑定事件的方式直接在模板中显得更加直观。

四、综合运用实例

为了更好地理解如何在Vue中编写和使用原生JavaScript代码，我们可以结合以上方法，创建一个更复杂的实例。假设我们要实现一个简单的计数器功能，当用户点击按钮时，计数器会增加，并且在页面上显示当前的计数值。

<template>
  <div>
    <div id="counter">Counter: 0</div>
    <button @click="incrementCounter">Increment Counter</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    incrementCounter() {
      this.count += 1;
      document.querySelector('#counter').textContent = `Counter: ${this.count}`;
    }
  },
  mounted() {
    // 初始化计数器值
    document.querySelector('#counter').textContent = `Counter: ${this.count}`;
  }
}
</script>

在这个实例中：

在data中定义了一个计数器变量count。
在methods中定义了一个incrementCounter方法，该方法每次调用时都会增加计数器变量的值，并使用原生JavaScript更新页面上的计数器显示。
在mounted钩子中，初始化计数器的显示值。

五、使用外部JavaScript库

在Vue项目中使用原生JavaScript代码时，也可以引入和使用外部JavaScript库。例如，如果你想在Vue项目中使用Lodash库，可以按照以下步骤进行：

安装Lodash库：
```
npm install lodash
```

在Vue组件中引入并使用Lodash：

import _ from 'lodash';
export default {
  methods: {
    useLodash() {
      let array = [1, 2, 3, 4];
      let reversed = _.reverse(array);
      console.log(reversed); // 输出: [4, 3, 2, 1]
    }
  }
}

六、注意事项

在Vue中使用原生JavaScript时，需要注意以下几点：

避免直接操作DOM：尽量通过Vue的数据绑定和指令操作DOM，避免直接使用原生JavaScript操作DOM，以免破坏Vue的响应式机制。
保持代码整洁：将原生JavaScript代码与Vue代码合理分离，保持代码的可读性和可维护性。
性能优化：在生命周期钩子和方法中使用原生JavaScript时，注意性能优化，避免不必要的DOM操作和频繁的重绘。

总结来说，在Vue中编写原生JavaScript代码是完全可行的，并且可以通过生命周期钩子、methods以及事件绑定等多种方式实现。需要注意的是，应合理使用原生JavaScript，保持代码的整洁和可维护性，并尽量通过Vue的机制操作DOM以保证应用的性能和响应式。通过综合运用这些方法，你可以在Vue项目中灵活地编写和使用原生JavaScript代码。