怎么兼职做网站,网页传奇怎么开,简单的asp网站源码,微信做个小程序多少钱目录
一、事件修饰符
二、表单双向数据绑定
模拟双向数据绑定#xff08;双向数据绑定底层原理#xff09;
三、计算属性
计算属性和methods方法区别#xff1f;
计算属性和watch区别#xff1f; 一、事件修饰符 stop 阻止事件冒泡 prevent 阻止事件默认行为 ca…目录
一、事件修饰符
二、表单双向数据绑定
模拟双向数据绑定双向数据绑定底层原理
三、计算属性
计算属性和methods方法区别
计算属性和watch区别 一、事件修饰符 stop 阻止事件冒泡 prevent 阻止事件默认行为 capture 事件捕获阶段执行 self 仅当当前元素是event.target触发 once 执行一次事件 passive 与scroll滚动事件连用
div idapp!-- capture 事件捕获阶段执行 --div classouter click.captureouter!-- stop事件修饰符阻止事件冒泡 --div classinner click.stopinner/div/div!-- self 事件修饰符 仅当前元素是event.target(当前事件触发元素)时才触发 事件修饰符可以连用 --div classouter click.capture.selfouterdiv classinner click.captureinner/div/div!-- once 事件修饰符 事件只绑定(生效)一次 --div classouter click.captureouterdiv classinner click.capture.onceinner/div/div!-- prevent事件修饰符 阻止元素默认行为 --a hrefhttps://wwww.baidu.com click.preventtoJump百度一下/a!-- passive 事件修饰符 提升移动端滚动性能 --div classscroll scroll.passivescroll我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div我是一个div/div!-- 按键修饰符 按下按键之后才会触发 --input typetext keyup.13keyupinput typetext keyup.enterkeyup/divscriptlet vm new Vue({// 与模板绑定el: #app,// 数据模型 存放vue变量data: {},// 存放方法和事件处理程序methods: {keyup(){console.log(event.keyCode);},scroll(){console.log(正在滚动);},toJump() {// 阻止a标签默认行为// event.preventDefault();},outer() {console.log(outer);},inner() {console.log(inner);// 阻止事件冒泡// event.stopPropagation();}},});/script 二、表单双向数据绑定 v-model 监听用户输入事件以更新数据 创建双向数据绑定 v-model修饰符 lazy 输入事件input事件 change事件 失焦或者按下回车 number 将输入框双向绑定得数据设置为number类型 trim 过滤绑定数据前后空格
div idapp!-- v-model语法糖 可以根据表单控件类型正确更新元素 监听用户输入事件更新数据 --{{form}}用户名:input typetext v-modelform.usernamebr密码:input typepassword v-modelform.passwordbrlabel男:input typeradio v-modelform.gender valuemale/labellabel女:input typeradio v-modelform.gender valuefamale/labelbr爱好:游泳:input typecheckbox v-modelform.hobbies valueswimming篮球:input typecheckbox v-modelform.hobbies valuebasketball足球:input typecheckbox v-modelform.hobbies valuefootballbr描述:textarea v-modelform.desc cols30 rows10/textareabr城市:select v-modelform.cityoptgroup label一线城市option valuebeijing北京/optionoption valueshanghai上海/optionoption valueguangzhou广州/option/optgroup/select/divscriptlet vm new Vue({// 与模板绑定el:#app,// 数据模型 存放vue变量data:{form:{hobbies:[]},},// 存放方法和事件处理程序methods: {},});/script 模拟双向数据绑定双向数据绑定底层原理 利用Object.defineProperty()
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
body!-- 实现v-model --p极简版双向数据绑定/pinput typetextscriptvar p document.querySelector(p);var input document.querySelector(input);let obj {name:}Object.defineProperty(obj,name,{get(){return obj.name},set(newValue){p.innerHTML newValue}})// 监听用户输入框输入的事件input.oninput function(){obj.name event.target.value;}/script
/body
/html
浏览器运行结果如下 三、计算属性 对data中数据进行逻辑处理返回一个响应式数据,基于响应式依赖(data),只要响应式依赖不发生改变计算属性就不会重新计算多次调用计算属性会返回之前计算得结果。有缓存性计算属性默认只提供getter只允许读取不允许修改想要修改计算属性需要提供setter函数。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/script
/head
bodydiv idapp{{msg.split().reverse().join()}}{{reverseMsg}}{{reverseMsg}}{{reverseMsg}}{{reverseMsg}}{{reverse()}}{{reverse()}}{{reverse()}}{{reverse()}}/divscriptlet vm new Vue({// 与模板绑定el:#app,// 数据模型 存放vue变量data:{msg:hello},// 存放方法和事件处理程序methods: {reverse(){console.log(methods方法);return this.msg.split().reverse().join()}},// 计算属性--一般对data中数据处理后再返回一个数据 基于响应式依赖缓存 返回一个响应式依赖computed:{reverseMsg(){console.log(计算属性);return this.msg.split().reverse().join()}}});setTimeout((){vm.msg world},2000)/script
/body
/html
浏览器运行结果如下 2s后 计算属性和methods方法区别 1.计算属性有缓存性响应式依赖不发生改变多次调用计算属性会返回之前得计算结果。 2.methods多次调用会多次执行函数没有缓存性。 3.计算属性一般不用于异步操作methods可以处理异步操作。 4.可以定于计算属性被修改不仅可读。
计算属性和watch区别 1.计算属性具有缓存性响应式依赖不发生改变计算属性不会重新计算会返回之前得计算结果 2.watch不具有缓存性只要数据发生改变watch就会立即执行 3.watch一般用于异步操作(监听分页)或者开销较大操作 4.计算属性一般不用于异步操作只提供getter需要修改需要设置setter函数
