0
点赞
收藏
分享

微信扫一扫

AlmaLinux 8.8 发布 - RHEL 下游免费发行版(CentOS 稳定版的替代品)

雨鸣静声 2023-05-20 阅读 106

常用规则

@ 代表src目录


指令

v-show:展示和隐藏  如图片的展示和隐藏  (底层是其实已经创建了 加了个css属性,display = none)
v-if:创建和删除  创建和删除,删除就真的没了
v-for: 遍历指令   v-for="item in list" 或 = "(item,index) in list" 还可以显示索引 如for循环中需要删除某行,就需要Index进行传参,in和of完全一样,如果遍历对象,结构是(value,key) in Object

还可以,遍历常量,item in 10 输出结果为 1/2/3....10
v-bind:动态绑定一个指令 ,如 v-bind:isShow   可以直接省略为   :isShow   b-bind可以用:替代
v-on:绑定事件:如v-on:click:方法名()          可以简写为@:click     可以将v-on替换为@
v-model:双向绑定表单    只要属性值改变,输入框的值也会改变,相反一样

v-html:解析文本,{{}}中默认解析为普通文本,就是普通的字符串,防止第三方传来的数据有问题,使用v-html进行解析,如<b>加粗的</b> 需要注意XSS攻击问题

==:比较的是两边变量的值

===:比较的是两边的类型和值

template:包装元素,不会破坏项目结构,不像div会在外面套一层

key:跟踪每个节点的身份,重用和排序现有元素,理想Key是每项都有的且唯一的id

事件

@click:点击事件

@click.self:点自己本身才会触发,点内部事件不会触发    

@click.stop:阻止事件向外传播

@click.once:只可以执行一次

@click.prevent:阻止默认行为

@input:输入框事件,失去焦点等

调用方法时不传参数,可以通过传入系统参数evt.target 可以获取事件源,如evt.target.valu0e

@keyup:按键相关,抬起触发

@keyup.enter:抬起回车触发

属性

href:超链接,跳转

Vue属性

default export {

        return: {

                数据

                data: {

                        a:"aa"

                },

                方法

                methods:{

                        handleChange:""

                },

                监听

                wathc:{

                        a(newValue,oldValue):{

                                当A改变时进行的操作

                        },

                计算属性

                computed:{

                }

               引入局部组件

                components:{

                       组件A:组件A                可以直接简写为组件A 

                }

                }                 

        } 

}

路由

redirect:重定向

index中的路由属性按照顺序从上往下依次匹配

常用方法

includes("a"):arr.filter(item => item.includes("aa"))  包含a的~

数组更新检测

  • 使用以下方法操作数组,可以检测变动,这类方法可以vue调用完会自动刷新页面数据

                push() pop() shift() unshift() splice() sort() reverse()        

  • 这类方法需要使用新数组替换原数组来使页面刷新

                filter(),concat()和slice() ,map() 对于原数组没有任何影响,页面不会变动

  •  list[0] = 1 ,此时数组确实被修改了,但是页面数据没有被刷新
  • Vue2中使用Vue.set(datalist,1,"aa"),将datalist数组中的1替换为aa,页面同步展示,或者使用datalist.splice(0,1,"aa")

模糊查询

v-model = datalist  v-for="item in test()"

test(){

return datalist.filter(item => item.includes("aa"))

}

举报

相关推荐

0 条评论