v-on:指令用于绑定事件
v-on:click指令用于绑定点击事件
给对象添加属性
方式1：obj.name = '张三'
方式2：obj['age'] = 20
obj对象 sex对象属性 value:值
这种方式，给对象添加的属性，默认不可被枚举，不可被删除
方式3：Object.defineProperty(obj,'sex',{
value:'男',
enumerable:true //允许被枚举（默认不允许）
configurable:true //允许被删除 （默认不允许）
}）
Vue的常用指令
<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="../vue/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>
