用vue写html页面

在Vue中，你可以使用模版语法来编写HTML页面。以下是一个简单的例子：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue!',
      message: 'Welcome to my Vue app!'
    }
  }
}
</script>

在上面的例子中，我们使用了Vue的模板语法来定义页面的结构和内容。在`<template>`标签中，我们定义了一个包含一个标题和一段消息的`<div>`元素。我们使用了双大括号语法来绑定Vue实例中的数据，这些数据在`<script>`标签中的`data`属性中定义。

在Vue中，你还可以使用指令来动态地修改HTML元素的属性和样式。例如，你可以使用`v-bind`指令来绑定HTML元素的`class`和`style`属性，或者使用`v-on`指令来绑定事件处理函数。以下是一个使用`v-bind`指令的例子：

<template>
  <div :class="{ 'active': isActive }">
    <button :style="{ 'background-color': bgColor }" @click="onClick">Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      bgColor: 'blue'
    }
  },
  methods: {
    onClick() {
      this.isActive = !this.isActive;
      this.bgColor = this.isActive ? 'blue' : 'red';
    }
  }
}
</script>

在上面的例子中，我们使用`v-bind`指令来绑定`<div>`元素的`class`属性和`<button>`元素的`style`属性。我们还使用了`v-on`指令来绑定`<button>`元素的`click`事件，并在事件处理函数中修改了Vue实例中的数据。