站長資訊網(wǎng)
本篇文章給大家?guī)砹岁P(guān)于vue的相關(guān)知識，其中主要給大家介紹了我們?yōu)槭裁词褂胿-model？用vue怎么實現(xiàn)v-model的，感興趣的朋友一起來看一下吧，希望對大家有幫助。
- 為什么使用v-model? v-model作為雙向綁定指令也是vue兩大核心功能之一，使用非常方便，提高前端開發(fā)效率。在view層，model層相互需要數(shù)據(jù)交互，即可使用v-model。
- v-model的原理簡單描述
v-model主要提供了兩個功能，view層輸入值影響data的屬性值，data屬性值發(fā)生改變會更新view層的數(shù)值變化。
其核心就是，一方面modal層通過defineProperty來劫持每個屬性，一旦監(jiān)聽到變化通過相關(guān)的頁面元素更新。另一方面通過編譯模板文件，為控件的v-model綁定input事件，從而頁面輸入能實時更新相關(guān)data屬性值。
- v-model是什么 v-model就是vue的雙向綁定的指令，能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值。
vue2.0實現(xiàn)方法
- 父組件
<template> <div id="app"> {{username}} <br/> <my-input type="text" v-model="username"></my-input> </div> </template> <script> import myinput from './components/myinput' export default { name: 'App', components:{ myinput }, data(){ return { username:'' } } } </script>
登錄后復(fù)制
- myinput.vue：
<template> <div class="my-input"> <input type="text" class="my-input__inner" @input="handleInput"/> </div> </template> <script> export default { name: "myinput", props:{ value:{ //獲取父組件的數(shù)據(jù)value type:String, default:'' } }, methods:{ handleInput(e){ this.$emit('input',e.target.value) //觸發(fā)父組件的input事件 } } } </script>
登錄后復(fù)制
最常見的還有一種事控制模態(tài)框的展示與關(guān)閉，我們也可以用v-model 以element 的 el-dialog組件為例子
- App.vue
<template> <div> <kmDialog v-model="showDialog" > <el-button @click="show">點我</el-button> </div> </template> <script> import kmDialog from 'KmDialog.vue' export default { components: { KmDialog } data () { return { showDialog: false } }, methods: { show() { this.showDialog = true } } } </script>
登錄后復(fù)制
- KmDialog.vue
<template> <el-dialog :title="isEdit ? '編輯設(shè)備' : '新增設(shè)備'" :visible.sync="value" width="40%" @close="cancel" > <span>這是一段信息</span> </el-dialog> </template> <script> export default { props: { value: { default: false, type: Boolean } }, methods: { cancel() { this.$emit('input', false) } } } </script>
登錄后復(fù)制
推薦學(xué)習(xí)：《vue.js視頻教程》
