<div id="app">
<div>
<span>姓名：</span>
<!-- v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值可以写表达式 -->
<!-- v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法 -->
<input type="text" v-bind:value="name" v-on:input="updateName">{{name}}
</div>
<div>
<span>年龄：</span>
<!-- v-bind:可以用:简写。 -->
<!-- v-on:可以用@简写。 -->
<!-- 如果事件方法的代码不是很多，可以写在行内，注意：这里不能写this，$event是事件对象 -->
<input type="text" :value="age" @input="age = $event.target.value">{{age}}
</div>
<div>
<span>工作：</span>
<!-- 通过v-model指令，可以实现对数据的双向绑定，
v-model指令是 v-bind:value 和 v-on:input 的简写。-->
<input type="text" v-model="job">{{job}}
</div>
</div>
<script src="../js/vue.js"></script>
<script>
// 关闭生产提示
Vue.config.productionTip = false
let vm = new Vue({
el: '#app',
//数据
data: {
name: '张三',
age: 20,
job:'程序员'
},
methods: {
updateName(e){
//获取文本框里面的内容，更新数据
this.name = e.target.value
}
},
})
</script>
