Vue简单语法记录

指令

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：超链接，跳转

常用方法

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"))

}