当前位置：首页 > news >正文

one dirve做网站/网站建设的技术支持

news 2025/6/30 10:56:35

one dirve做网站,网站建设的技术支持,浅谈天猫的电子商务网站建设,网站建设套餐内容组件化：一个页面拆分成一个个的功能块，每个功能块完成属于自己的这部分独立功能，整个页面的管理和维护变得更加容易维护。 vue中注册组件： 调用Vue.extend()方法，创建组件构造器调用Vue.component()方法注册组件在Vu…

组件化：一个页面拆分成一个个的功能块，每个功能块完成属于自己的这部分独立功能，整个页面的管理和维护变得更加容易维护。

vue中注册组件：

调用Vue.extend()方法，创建组件构造器
调用Vue.component()方法注册组件
在Vue实例的作用范围内使用组件

父传子：

子组件：

js中：使用props接收
html中：使用v-bind接收

在js中定义props可以是数组或者是对象
建议使用对象传入：

props:{data:String (String是当前的data的数值类型),person:[Stirng,Number]  (可能存在多种类型),给data一个默认值：data:{type:String,default:'22222',},给data一个必填data:{type:String,required:true, //必须传值}类型是对象或者数组时，默认值必须是个函数moviesList:{type:Array,default(){return{ message:['222','3333']}}自定义验证函数(这个值必须符合其中一个)data:{Validator:function(value){retrun ['11','222','3333'].indexOf(value) !==-1}}}

注意：default和required使用起来冲突，实际开发中使用一个即可

子传父：

子组件：

//发射-向外抛出一个观察者
this.$emit('itemclick')

父组件：

<child-item  @itemClick="getClick"></child-item>getClick(){//父组件接收到子组件传的值console.log('子组件的内容')
}

父子组件访问方式

访问其他组件:调用被访问组件内的方法和数据
父组件访问子组件：$children $refs【vue3已经废除了$children这个方法访问子组件，统一使用$refs】
子组件访问父组件：$parent

插槽

让原来的组件有扩展性=》使用插槽
抽取共性，保留不同

//父组件
<cnp>
<button>按钮</button>
</cnp>//子组件
<template id="cnp"><div><h3>吹牛皮的组件</h3><slot></slot></div>
</template>

v-show和v-if的区别

1）v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏；
2）编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
3）编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
4）性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
使用场景：如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
总结：v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性，可以使客户端操作更加流畅，但有更高的初始渲染开销。如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。