当前位置: 首页 > Web前端 > vue.js

前端实训-中级阶段(38)-vue2.x使用说明和自定义使用说明

时间:2023-03-31 20:27:14 vue.js

前端最基础的就是HTML+CSS+Javascript。掌握这三项技术算是入门,但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂(HTML/CSS/JS),本着提高技术水平,夯实基础知识的中心思想,开课(每周四)。在前面的章节中我们或多或少地看到了一些指令,今天我们将详细介绍内置指令以及如何自定义指令。内置指令v-text、v-htmlv-text更新元素的textContent。注意,不是innerText。我更喜欢使用插值,如果你想更新部分textContent,显然使用{{Mustache}}插值。{{msg}}v-html更新元素的innerHTML。注意:内容以纯HTML形式插入——它不会被编译为Vue模板。如果你这么认为,那么你应该学习如何使用组件模式开发。比如你插入的内容不会有scoped样式,有v-if之类的也没用。不建议大家使用这个命令,因为XSS风险太大

v-show,v-if,v-else,v-else-ifv-show通过控件样式的显示来实现显示和隐藏。(可以理解为还在DOM树中)
小菜鸟=10">大菜鸟=20">老鸟
v-if、v-else、v-else-if通过创建控制显示和隐藏和破坏。(可以理解为DOM树中不存在,已经释放)
小菜鸟大菜鸟老鸟
v-for来自遍历渲染数据。可以迭代值、数组和对象。
v-on用于绑定事件。缩写为@btnbtn>>v-bindsetattribute,property,componentprops.缩写是:。设置类或样式时,支持数组、对象、字符串V-model数据双向绑定。可以理解为语法糖(:value@input),对不同的元素有不同的处理方式。原生DOMinput、textarea和select以input为例。可以这样理解,下面两个是一样的。(其实是不一样的,比如输入法)自定义组件component一个名为slot的v-slot或需要接收prop的插槽。缩写#。标题内容默认插槽内容页脚内容{{slotProps.item.text}}Mouseposition:{{x}},{{y}}v-pre跳过此元素及其子元素的编译。可用于显示原始Mustache标签。在没有指令的情况下跳过大量节点可以加快编译速度。v-cloak隐藏未编译的Mustache标签,直到实例准备就绪。原则是该指令会保留在元素上,直到关联实例完成编译,并与CSS规则[v-cloak]{display:none}一起使用。v-once只渲染元素和组件一次。随后的重新呈现、元素/组件及其所有子项将被视为静态内容并被跳过。这可用于优化更新性能。自定义说明一般来说,在Vue2.0中,代码复用和抽象主要是基于组件的开发。我们在组件开发中不关心DOM,只关心组件的生命周期(创建、挂载等钩子函数)。如果我们需要关心DOM,那么我们可以使用自定义指令。RegisterDirectiveGlobalRegistration//注册一个全局自定义指令`v-focus`Vue.directive('focus',{//当绑定元素插入到DOM中时...inserted:function(el){//焦点元素el.focus()}})本地注册{data(){},...,directives:{focus:{//插入的指令定义:function(el){el.focus()}}}}钩子函数bind:只调用一次,当指令第一次绑定到元素时。可以在这里进行一次性的初始化设置。inserted:绑定元素插入到父节点时调用(只保证父节点存在,不一定插入到文档中)。update:组件的VNode更新时调用,但也有可能发生在其子VNode更新之前。指令的值可能已更改,也可能未更改。但是可以通过比较更新前后的值来忽略不必要的模板更新(钩子函数参数详见下文)。componentUpdated:命令所在组件的VNode及其子VNode全部更新后调用。unbind:仅在指令与元素解除绑定时调用一次。钩子函数的输入参数接下来我们看一下钩子函数的参数(即el、binding、vnode和oldVnode)。命令钩子函数会传入以下参数:el:命令绑定的元素,可以用来直接操作DOM。binding:包含以下属性的对象:name:指令的名称,不包括v-前缀。value:指令的绑定值,例如:在v-my-directive="1+1"中,绑定值为2。oldValue:指令绑定的前一个值,仅在update和componentUpdated钩子中可用。无论值是否已更改均可用。expression:字符串形式的指令表达式。例如,在v-my-directive="1+1"中,表达式为"1+1"。arg:传递给命令的参数,可选。例如,在v-my-directive:foo中,参数是“foo”。修饰符:包含修饰符的对象。例如:在v-my-directive.foo.bar中,修饰符对象为{foo:true,bar:true}。vnode:Vue编译生成的虚拟节点。oldVnode:前一个虚拟节点,仅在update和componentUpdatedhooks中可用。除了el,其他参数应该是只读的,不应该被修改。如果需要在hook之间共享数据,建议通过元素的数据集(data-*)来完成。微信公众号:前端力农参考前端培训目录,前端培训规划,前端培训计划