数据绑定和事件处理
v-bind v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。 v-model v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。 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
