vue学习笔记---(1)数据绑定(v-model && v-bind)和事件处理(v-on)

数据绑定和事件处理

1. v-bind
   • v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。
2. v-model
   • v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。
3. v-on 事件处理
   • 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略
   • 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

   ---

Demo.vue

<template>
  <div>
    单向数据绑定：<input type="text" v-bind:value="name">
    <!-- 简写形式 -->
    单向数据绑定：<input type="text" :value="name">
    <hr>

    双向数据绑定：<input type="text" v-model="password">
    是否勾选：<input type="checkbox" v-model="isChecked">
    <hr>
    
    <button v-on:click="showMessage">点击提示输入信息</button>
    <!-- 简写形式 -->
    <button @click="showMessage">点击提示输入信息</button>
    <hr>
    
    <h4>用户信息: {{userMessage}}</h4>
  </div>
</template>

<script>
export default {
  name: 'Demo1',
  data() {
    return {
      name: '老六',
      password: '123456',
      isChecked: false,
    }
  },
  methods: {
    showMessage() {
      console.log(
        `name(单向数据绑定):${this.name}, password(双向数据绑定): ${this.password}, isChecked(是否勾选): ${this.isChecked}`
      )
    },
  },
  // 计算属性
  computed: {
    userMessage() {
      return `用户名为:${this.name}, 你的密码是: ${this.password}`
    },
  },
}
</script>

第一次渲染 页面显示

改变输入框的内容 单向数据绑定开发者工具中的值和计算属性计算出的值不会改变；双向数据绑定对应的值会一直同步改变

点击button按钮 会触发响应的事件----即showMessage