在vue中什么标签不要 • Worktile社区

worktile

Worktile官方账号

在Vue中不要使用"script"标签来编写Vue的模板代码。Vue的模板语法是基于HTML的，而"script"标签用于执行JavaScript代码。在Vue中，我们应该使用"template"标签来包含Vue的模板代码。这样可以使代码更易于阅读和维护，并且可以使HTML和JavaScript代码更加分离，提高代码的可维护性和可复用性。此外，还有一些其他的标签在Vue中也尽量避免使用，比如"style"标签和"v-html"指令等。在Vue中，我们可以使用"scoped"属性来为组件的样式添加作用域，而不需要使用"style"标签。而"v-html"指令可以将HTML代码作为字符串插入到模板中，但是它存在安全性问题，容易受到XSS攻击，因此在开发中应尽量避免使用它。总之，在Vue中，我们应该遵循Vue的组件化开发思想，将HTML、CSS和JavaScript代码尽量分离，使代码更加清晰、可维护和可复用。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，没有特定的标签是被禁止使用的，因为Vue本身是一个JavaScript框架，与HTML标签没有直接的限制关系。然而，有一些标签可能会导致一些问题或不适用于某些情况，因此可能需要谨慎使用或避免使用。

标签（双向绑定）：
虽然在Vue中可以使用标签进行数据的双向绑定，但Vue官方文档已经不再推荐使用这种方式，而是使用.v-model指令来实现双向绑定。因此，使用标签进行双向绑定可能会导致一些问题，如无法正确更新数据等。
标签：
在Vue中，推荐使用Vue提供的表单组件，如、等。使用</p> <form>标签可能会导致一些与Vue表单组件不兼容的问题，如无法正确获取表单数据等。<br /> </form> <p>
标签（页面跳转）：
在Vue中，通常会使用Vue Router来管理页面跳转和路由。在单页应用中，标签的默认行为（即页面跳转）可能会导致与Vue Router冲突或不兼容。因此，建议在Vue中使用Vue Router提供的组件来进行页面跳转。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue中，我们应该避免使用 <script> 标签来直接写 JavaScript 代码。虽然在一些简单的示例中，在 <script> 标签中直接编写 JavaScript 代码是可以的，但推荐的做法是将 JavaScript 代码写在 .js 文件中，然后通过 <script> 标签引入。以下是详细的操作流程和方法：

第一步是创建一个Vue项目。可以使用Vue官方提供的Vue CLI或者其他工具来快速搭建项目结构。使用以下命令来安装Vue CLI并创建一个新项目：

npm install -g @vue/cli
vue create my-project

创建Vue项目的示例文件结构如下：

my-project/
├─ public/
│  └─ index.html
├─ src/
│  ├─ App.vue
│  └─ main.js
└─ package.json

在 public/index.html 文件中，可以看到以下的代码片段：

<!DOCTYPE html>
<html>
  <head>
    <title>Vue App</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这是Vue项目的主HTML文件，可以在 <div id="app"></div> 这个标签中编写Vue组件。

在 src/App.vue 文件中，可以看到以下的代码片段：

<template>
  <div>
    <h1>Hello Vue!</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "This is a Vue app"
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

这是Vue项目的根组件，也是整个应用的入口组件。在 <template> 标签中编写HTML模板，在 <script> 标签中编写JavaScript代码，在 <style> 标签中编写CSS样式。

在 src/main.js 文件中，可以看到以下的代码片段：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App),
}).$mount('#app')

这是Vue项目的入口文件，主要负责创建Vue实例。通过 import 命令引入根组件 App.vue，然后创建一个Vue实例，并将根组件作为参数传递给 render 方法。最后使用 $mount 方法将Vue实例挂载到HTML文件中的 #app 元素上。

综上所述，我们应该避免直接在 <script> 标签中编写JavaScript代码，而是将其放在单独的 .js 文件中，然后通过 <script> 标签引入。这样可以提高代码的可维护性和可读性，并且更符合Vue的组件化开发理念。

1年前 0条评论