[vue]Vue使用说明

Vue使用说明v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-once1v-text更新元素textContent部分更新可以使用插值语法{{Mustache}}2v-hetmlupdate元素的innerHTML内容作为普通HTML插入——不会被编译为Vue模板在网站上动态渲染HTML是危险的，容易出现XSS攻击3v-showv-ifv-elsev-else-if条件渲染v-show相当于改变标签的显示v-if是真正的条件渲染，当值为falsy时，元素会被删除DOM结构v-elsev-else-if可以和v-if形成链式条件渲染，和日常的if-else代码块4v-forlist根据源数据渲染多个渲染元素或模块有类似的逻辑，表达式中的别名v-for的默认行为将尝试就地修改元素而不是移动它们。要强制对元素重新排序，需要一个特殊的属性键来提供排序提示表达式：ArrayObjectNumberStringIterable//array//对象//对象数组数据初始化：template->virtualDOM->realDOMkey作为virtualDOM中的一个标签属性，如果使用index作为key，数据更新后，新的virtualDOM会排列key不管更新的数据插入到哪个位置，数据更新将从0开始排列：NewTemplate->NewVirtualDOM->DiffalgorithmcomparesvirtualDOM->realDOM。在比较过程中，如果使用index作为key，首先比较key前后的DOM节点。由于key的重新排列，模板的复用率低，复用时也容易出错。如果使用数据的唯一标识作为键，那么在生成新的虚拟DOM时，会根据键进行比较。不会有太大变化。只有变化的部分才会被更新，没有变化的部分经过key比对后很容易被复用。当-for和v-if同时使用时，v-for的优先级高，表示会先渲染列表再判断是否渲染5v-on绑定事件监听器常用标签：监听原生DOM事件组件：监听自定义事件表达式：v-on:event="handle(param)"缩写：@parameter：事件处理函数中可以没有参数，可以传入多个参数。参数$event为触发的事件，通常可以通过$event.target来获取触发事件的元素。v-on之后，可以是触发事件的对象。v-on="{event1:handle1(),event2:handle2()}"5.1事件修饰符.stop：调用event.stopPropagation()阻止当前事件在捕获和冒泡阶段的进一步传播，不阻止任何默认行为不会发生。prevent：调用event.preventDefault()来阻止默认事件，比如某个标签href跳转，使用@click.prevent来阻止跳转改变行为。capture：添加事件监听时使用捕获方式元素发送发生冒泡时，有修饰符的元素先被触发，修饰符有多个，由外向内触发。self：仅当事件从绑定到侦听器的元素本身触发时才会触发回调。在冒泡阶段，从内部触发的事件不会在具有修饰符的父元素上触发。{keyCode|keyAlias}：回调仅在特定键触发事件时触发entertabdeleteescspaceupdownleftrightctrlaltshiftmeta.native：监听组件和元素的原生事件组件上的事件是默认情况下是一个自定义事件，需要由$emit触发。once：只触发一次。left：通过单击鼠标左键触发。right：通过单击鼠标右键触发。在{passive:true}模式下添加监听，告诉浏览器不要阻止默认行为，可以提高性能，事件捕获->事件冒泡->默认事件5.2.sync修饰符简化父子组件数据的双向绑定6v-bind动态绑定一个或多个属性，或者一个组件prop到一个表达式缩写::在组件上绑定时，需要在组件中使用props声明，然后才能使用6.1类和样式绑定动态切换类和绑定Linkedstyleclass//objectform