vue 原理

v-model

• 表单控件在实际开发中非常常见 特别是对于用户信息的提交 需要大量表单
• Vue 中使用v-model 指令来实现表单元素和数据的双向绑定
• 案例分析
  • 当我们在输入框输入内容时
  • 因为input中的v-model 绑定了message 所以会实时将输入的内容传递给message message发生改变
  • 当message 发生改变时 因为上面我们使用Mustache语法 将message 的值插入到DOM中 所以DOM会发生响应的改变
  • 所以 通过v-model实现双向绑定

	<input  type='text' :value = 'message' v-on:input = 'inputchang'
	// 或者	<input  type='text' :value = 'message' v-on:input = 'message = $evnet.target.value'
	data:{
		message: '123'
	},
	methods:{
		inputchang(e) {
		this.message = e.target.value
	}
}

key 值解决复用问题

   <div>
        <template v-if="val">
             <label for="one" type='text'>用户名</label>
             <input   id="one">
        </template>
        <template v-else>
             <label for="one" type='text'>密码</label>
             <input   id="one">
        </template>
            <button @click="val = !val">切换类型</button>
    </div>

• 因为Vue 在进行DOM渲染时 出于性能考虑 会尽可能的复用已经存在的元素 而不是重新创建新的元素
• vue内部发现原来的input不再使用 直接作为else中的input来使用了
• 如果不希望vue出现类似的重复利用的问题 可以给对应的input添加key
• 并且保证key值的不同

持续更新