vue1.0用什么监听

在Vue1.0版本中，可以使用以下几种方式来进行事件监听：

1. v-on指令： v-on指令用于监听DOM事件，可以通过简单的指令绑定来触发相应的事件处理函数。

例如，在模板中使用v-on指令监听点击事件：

<button v-on:click="handleClick"></button>

在对应的Vue实例中，通过在methods选项中定义handleClick函数来处理点击事件：

var vm = new Vue({
  el: '#app',
  methods: {
    handleClick: function(event) {
      // 处理点击事件的逻辑代码
    }
  }
})

2. 直接在模板中绑定事件处理函数： 除了使用v-on指令，Vue1.0还支持直接在模板中绑定事件处理函数。

例如，在模板中直接绑定点击事件：

<button onclick="handleClick"></button>

在Vue实例中定义handleClick函数：

var vm = new Vue({
  el: '#app',
  methods: {
    handleClick: function(event) {
      // 处理点击事件的逻辑代码
    }
  }
})

3. 使用自定义事件： 在Vue1.0中，可以使用$on方法来监听自定义事件，然后使用$emit方法触发相应的事件。

例如，在Vue实例中监听和触发自定义事件：

var vm = new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      this.$emit('customEvent')
    }
  }
})

vm.$on('customEvent', function() {
  // 处理自定义事件的逻辑代码
})

以上是Vue1.0版本中一些常用的事件监听的方式，我们可以根据具体的需求选择合适的方式进行事件监听。

在Vue1.0中，你可以使用以下方法来监听和观察数据的变化：

1. watch：Vue提供了一个watch选项，你可以用它来监听特定数据的变化。你可以将需要监听的数据以及对应的回调函数作为watch选项的属性。

例如：

new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message: function(newValue, oldValue) {
      console.log('message changed', newValue, oldValue);
    }
  }
});

2. 计算属性（Computed Properties）：Vue中的计算属性是一种特殊的观察者，它依赖于其他属性，并在其依赖发生改变时自动更新。

例如：

new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

在上面的例子中，当firstName或lastName发生变化时，fullName也会自动更新。

3. $watch方法：除了在Vue实例中使用watch选项外，你也可以在任何属性上使用$watch方法来监听变化。

例如：

var app = new Vue({
  data: {
    message: 'Hello, Vue!'
  }
});

app.$watch('message', function(newValue, oldValue) {
  console.log('message changed', newValue, oldValue);
});

4. 事件监听器：你可以使用Vue的事件系统来监听DOM事件和自定义事件。

例如：

<div id="app">
  <button v-on:click="onClick">Click me!</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    onClick: function() {
      console.log('button clicked');
    }
  }
});
</script>

在上面的例子中，当按钮被点击时，onClick方法会被调用。

5. $watch方法的深度观察：在Vue1.0中，你还可以使用$watch方法来进行深度观察。

例如：

var app = new Vue({
  data: {
    obj: {
      message: 'Hello, Vue!'
    }
  }
});

app.$watch('obj', function(newValue, oldValue) {
  console.log('obj changed', newValue, oldValue);
}, { deep: true });

在上面的例子中，当obj中的任何属性发生变化时，回调函数都会被触发。

这些是在Vue1.0中监听数据变化的几种方法。每种方法都有不同的应用场景，你可以根据自己的需求选择合适的方法来监听和观察数据的变化。

在Vue 1.0中，我们可以使用v-on指令来监听DOM事件。v-on指令可以在Vue实例中绑定一个事件监听器，通过它可以在触发事件时执行相应的方法。

下面是Vue 1.0中监听事件的方法和操作流程：

方法一：使用v-on指令直接绑定事件监听器

要在Vue 1.0中监听一个DOM事件，可以在模板中使用v-on指令，并将事件名和方法名作为指令的参数传递。

<template>
  <button v-on:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

在上述例子中，我们在<button>元素上使用v-on:click指令来监听点击事件，并将handleClick方法作为事件处理函数。当点击按钮时，控制台会输出"Button clicked"。

方法二：使用@符号简化v-on指令

Vue 1.0还提供了一种简化写法，可以使用@符号代替v-on:来绑定事件监听器。

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

在上面的例子中，我们直接使用@click来绑定点击事件，效果与前一个例子相同。

事件修饰符

Vue 1.0还支持事件修饰符，用于修改事件监听的行为。

.stop 修饰符

可以使用.stop修饰符阻止事件继续传播。

<template>
  <button @click.stop="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

在上述例子中，点击按钮时，事件不会继续传播给父元素。

.prevent 修饰符

可以使用.prevent修饰符阻止事件的默认行为。

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="formData" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: ''
    }
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted')
      // 阻止表单默认提交行为
    }
  }
}
</script>

在上述例子中，点击提交按钮时，事件不会触发表单的默认提交行为。

以上是Vue 1.0中监听事件的方法和操作流程，通过v-on指令可以方便地绑定DOM事件，并执行相应的方法。同时，还可以使用事件修饰符来修改事件监听的行为。