《Vue.js前端开发实战（慕课版第2版）》课件 第7--9章 表单控件绑定、自定义指令、 组件.ppt

钩子函数6个钩子beforeMountmountedbeforeUpdateupdatedbeforeUnmountunmounted3个参数elbindingvnodeoldVnodeinstancevalueoldValuedirargmodifiers钩子函数在页面中定义一张图片和一个文本框，在文本框中输入表示图片宽度的数字，实现为图片设置宽度的功能。实例钩子函数在页面中定义3个下拉菜单和一行文字，通过第一个下拉菜单为文字设置大小，通过第二个下拉菜单为文字设置颜色，通过第3个下拉菜单为文字设置间距。实例绑定数值常量绑定字符串常量绑定对象字面量自定义指令的绑定值绑定数值常量divid=appspanv-set-position=100目标越接近，困难越增加。/span/divscriptsrc=/vue@3/scriptscripttype=text/javascriptconstvm=Vue.createApp({directives:{setPosition:function(el,binding){el.style.position=fixed;el.style.left=binding.value+px;}}}).mount(#app);/script绑定字符串常量divid=apppv-set-size=30px业精于勤，荒于嬉。/p/divscriptsrc=/vue@3/scriptscripttype=text/javascriptconstvm=Vue.createApp({directives:{setSize:function(el,binding){el.style.fontSize=binding.value;}}}).mount(#app);/script绑定对象字面量divid=apppv-set-style={size:26,color:blue,weight:bold}会当凌绝顶，一览众山小。/p/divscriptsrc=/vue@3/scriptscripttype=text/javascriptconstvm=Vue.createApp({directives:{setStyle:function(el,binding){el.style.fontSize=binding.value.size+px;el.style.color=binding.value.color;el.style.fontWeight=binding.value.weight;}}}).mount(#app);/scriptAI辅助编程设置图片的不透明度设置元素的边框组件02数据传递03自定义事件04内容分发05动态组件AI辅助编程06注册组件01注册组件注册全局组件注册局部组件注册全局组件ponent(tagName,options)定义的组件名称组件的选项对象语法格式tagName/tagName使用组件的方式注册全局组件divid=appdemo/demo/divscriptsrc=/vue@3/scriptscripttype=text/javascriptconstvm=Vue.createApp({});ponent(demo,{template:h2天才出于勤奋/h2});vm.mount(#app);/script注册全局组件divid=appdemo/demo/divscriptsrc=/vue@3/scriptscript