建设银行e路通网站,青岛李沧建设局网站,邢台网站制作的地方,暴雪国服回归目录
1、计算属性
2、事件修饰符
2.1、stop事件修饰符
2.2、prevent事件修饰符
2.3、self事件修饰符
2.4、once事件修饰符
3、按键修饰符
3.1、enter回车键 1、计算属性 计算属性#xff1a; computed#xff1a;vue官方提供一个计算属性作用#xff1a;在完成某种业…目录
1、计算属性
2、事件修饰符
2.1、stop事件修饰符
2.2、prevent事件修饰符
2.3、self事件修饰符
2.4、once事件修饰符
3、按键修饰符
3.1、enter回车键 1、计算属性 计算属性 computedvue官方提供一个计算属性作用在完成某种业务时往往页面结果需要经过多次计算才能获取computed属性就是用来完成页面结果多次计算好处在完成计算同时也会将计算结果进行缓存如果数据没有发生变化在页面中多次使用计算方法仅执行一次使用{{ }}在里面填写方法名即可
代码举例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapph1{{count}}/h1h2总数{{test2}}/h2h2总数{{test2}}/h2h2总数{{test2}}/h2/div
/body
/html
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptnew Vue ({el:#app,data:{count:1},methods:{test() {}},computed:{test2() {console.log(调用了computed方法)return 3*this.count}}})
/script
重点代码: 效果 2、事件修饰符
修饰符用来和事件连用用来决定事件触发条件或者是阻止事件的触发机制~
2.1、stop事件修饰符
.stop用来阻止事件冒泡
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!-- 对冒泡事件不处理 --div stylewidth: 200px;;height: 200px;background-color:red; clickparentdiv stylewidth: 100px;;height: 100px;background-color:blue; clickchild/div/divhr!-- 阻止事件冒泡了 --div stylewidth: 200px;;height: 200px;background-color:red; clickparentdiv stylewidth: 100px;;height: 100px;background-color:blue; click.stopchild/div/div/div
/body
/html
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptnew Vue({el:#app,data:{},methods:{parent() {alert(parent)},child() {alert(child)}}})
/script
主要代码 效果
当你点击第一个父div下的子div时会连续有两个alert弹框这就叫做冒泡当你点击第二个父div下的子div时只会有一个alert弹框这就是阻止了冒泡
2.2、prevent事件修饰符
.prevent用来阻止标签的默认行为
主要代码 没有添加.prevent时点击后会有alert弹框然后跳转至百度。当我们不想让他执行默认行为跳转时就可以使用.prenvent来控制
2.3、self事件修饰符
.self用来针对当前标签的事件触发——只触发自己标签上的特定动作只关心自己标签上触发的事件不监听事件冒泡
主要代码 此时我们点击子div也不会触发父div的alert因为添加了.self他只关心自己标签上的事件
2.4、once事件修饰符
.once一次作用——就是让指定事件只触发一次
主要代码 不管是点击子div冒泡触发的还是点击父div自己触发的一共只触发一次~ 3、按键修饰符
作用用来与键盘中按键事件绑定在一起用来修饰特定的按键事件的修饰符
例如下面的例子【其他.tab .delete .esc .space .up .down .left .right】
3.1、enter回车键
enter回车回车键修饰符用来在触发回车按键之后触发的事件
主要代码 如上述我们enter后就会触发提交函数
好啦我们先学到这里哦下期继续
