网站开发岗位思维导图,电商网站开发流程list,商品详情页面模板,建设银行济宁分行网站v-model
原理#xff1a;v-model本质上是一个语法糖。例如应用于输入框#xff0c;就是value属性和input事件的合写。
作用#xff1a;提供数据的双向绑定
数据变#xff0c;视图跟着变 :value视图变#xff0c;数据跟着变 input
注意#xff1a;$event用于在模板中v-model本质上是一个语法糖。例如应用于输入框就是value属性和input事件的合写。
作用提供数据的双向绑定
数据变视图跟着变 :value视图变数据跟着变 input
注意$event用于在模板中获取事件的参数
templatediv classappinput v-modelmsg typetextbrinput :valuemsg1 inputmsg1 $event.target.value typetext/div
/template表单类组件封装$v-model简化代码
表单类组件 封装 实现子组件和父组件数据的双向绑定
父传子数据应该是父组件props传递过来的v-model拆解绑定数据子传夫监听输入子传夫值给父组件修改
父元素
templatediv idapp
HelloWorld :citiyIdselectId changeIdselectId $event/HelloWorld/div
/templatescript
import HelloWorld from ./components/HelloWorld.vueexport default {data(){return{selectId: 101}},components:{HelloWorld}
}
/scriptstyle/style子元素
templatediv classappselect :valuecitiyId changehandleChangeoption value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104深圳/optionoption value105广州/option/select/div
/templatescript
export default {props:{citiyId: String},methods:{handleChange(e){this.$emit(changeId,e.target.value)}}
}
/scriptstyle/style
父组件 v-model简化代码实现子组件和父组件数据双向绑定
子组件中props通过value接收事件触发input父组件中v-model给组件直接绑数据
父组件
templatediv idapp
HelloWorld v-modelselectId
/HelloWorld/div
/templatescript
import HelloWorld from ./components/HelloWorld.vueexport default {data(){return{selectId: 105}},components:{HelloWorld}
}
/scriptstyle/style
子组件
templatediv classappselect :valuevalue changehandleChangeoption value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104深圳/optionoption value105广州/option/select/div
/templatescript
export default {props:{value: String},methods:{handleChange(e){this.$emit(input,e.target.value)}}
}
/scriptstyle/style
表单类基础组件封装思路
父传子父组件动态传递prop数据拆解v-model绑定数据子传父监听输入子传父值给父组件修改
本质实现了实现子组件和父组件的双向绑定
v-model简化代码的核心步骤
子组件中props通过value接收事件触发input父组件中v-model给组件直接绑数据
.sync修饰符
作用可以实现子组件与父组件数据的双向绑定简化代码
特点prop属性名可以自定义非固定为value
ref和$refs
作用利用ref和$refs可以用于获取dom元素或组件实例
特点查找范围当前组件内更精确稳定
获取组件
1.ref
在vue模板中可以使用ref特性来标识子组件或DOM元素通过ref可以访问子组件实例或DOM元素一般在组件内部使用ref来获取子组件实例或DOM元素并只能在组件内部使用
templatechild-component refmyComponent/child-component
/templatescript
export default {mounted() {this.$refs.myComponent.doSomething();}
}
/script2.$refs
$refs是vue实例上的一个对象用来存储所有拥有ref特性的子组件或DOM元素引用。
通过$refs可以直接访问子组件实例或DOM元素
templatechild-component refmyComponent/child-component
/templatescript
export default {mounted() {this.$refs.myComponent.doSomething();}
}
/script调用组件内的方法
templatedivchild-component refchildRef/child-componentbutton clickcallChildMethod调用子组件方法/button/div
/templatescript
import ChildComponent from ./ChildComponent.vue;export default {components: {ChildComponent},methods: {callChildMethod() {this.$refs.childRef.childMethod(); // 调用子组件的方法}}
}
/script
vue异步更新$nextTick
templatedivp{{ message }}/pbutton clickupdateMessage更新消息/button/div
/templatescript
export default {data() {return {message: 初始消息};},methods: {updateMessage() {this.message 更新后的消息;this.$nextTick(() {// 在 DOM 更新完成后执行的操作console.log(DOM 更新完成);});}}
}
/script
