
Vue框架#组件
cjx177187
这个作者很懒,什么都没留下…
展开
-
Vue----全局组件和局部组件
1.全局组件:组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符。2.局部组件:一个vm实例可以有多个局部组件,但是只能供当前vm实例使用。(filter举例,不只filter只要是Vue里面的方法都是可以用的)(不会报错,但是只能使用一次 多次使用只显示第一个)只有当前组件拥有的功能(指令,过滤器,组件)所有组件共同的功能(指令,过滤器,组件)没有单文件组件时不能使用单标签。注册的组件不要跟系统标签同名。原创 2022-10-10 23:24:37 · 180 阅读 · 0 评论 -
组件----总结
v-for、v-if优先级:2.0 v-for优先 3.0 v-if优先 v-fi和v-for不能写在一行。name:‘devtool’====>意义看见组件的名字,打包时要用到,路由也可以用到。computed:{}===>特点:缓存起来,数据变化才会重新计算。comments:true/false===>要不要注释。首屏白屏 首屏加载慢====>答案不是v-cloak。v-on:事件名(可以是自定义事件)=”监听“components:{}===>注册组件。methods:{}===>方法。原创 2022-09-26 17:16:05 · 137 阅读 · 0 评论 -
组件---缓存组件
动态组件的切换,切换后是不会缓存之前被切换掉的组件的,每次切换新组件的时候,Vue 都创建了一个新的组件对象。有时候我们希望在A组件时用户做了一些操作,切换B组件时做了一些操作,当切回A组件时希望记住A的操作,不要重新创建A组件,keep-alive可以缓存动态切换的组件。最多缓存多少组件,缓存最近被渲染过的几个组件一旦数字达到了,最近被创建的组件就会被销毁。====>最近被访问的两个组件会被缓存。===>只有box被缓存了。//不包含box3的缓存。原创 2022-09-26 17:15:24 · 448 阅读 · 0 评论 -
组件---动态组件
实现点击按钮切换页面。原创 2022-09-26 17:14:34 · 120 阅读 · 0 评论 -
Vue----事件总线
这样就可以直接向任何组件进行传值,只需要给替我们绑定$on和$emit事件就行了,但是这样得事件是绑定在根节点上的,根节点还要会绑定其他得任务,所以这样绑定会影响性能。2.接受值得组件调用this.$root.$on("绑定函数名",(e)=>{console.log(e)})在main.js中给vue得原型上添加一个$bus给其添加上$emit,$on,$off方法。1.给要传值的组件调用this.$root.$emit("绑定函数名","传值")"tbox2给App传的值""tbox2给App传的值"原创 2022-09-15 14:53:09 · 273 阅读 · 0 评论 -
Vue---反向传值
注意:父组件传值一定要用v-model ,子组件接受值用value 利用$emit绑定事件时使用input为参数。3.子组件中利用this.$emit出发事件并向父组件传值。4.父组件中调用自定义事件绑定的函数,并接受子组件传参。利用组件的自定义事件反向修改父组件的值------father的数据-----father的数据-----father的数据-----father的数据-----father的数据-----child2的数据---child3的数据---tboxs.vue文件。原创 2022-09-15 14:52:38 · 564 阅读 · 0 评论 -
Vue---单向数据
tbos和app文件都是用的同一个变量,但是我们修改tbos文件中的变量值时,app文件的值并没有发生变化,这就是单向数据绑定。father的数据-----child的数据---tbos.vue文件。原创 2022-09-15 14:52:03 · 113 阅读 · 0 评论 -
Vue---SCSS
重新创建一个Vue框架,版本选择时选择最下面的自选,选版本2,后面选css那个选项。写scss时,style标签要带上lang="scss"原创 2022-09-15 14:51:19 · 114 阅读 · 0 评论 -
Vue---网络
credentials: true//后端会给去前端返回缓存数据包 告诉浏览器 去做缓存。// credentials: true 跨域服务的页面去做cookie缓存。2.1 原理: 把用到的axios等网络请求工具封装成自己的工具。1.具体的网络请求的工具的用法见node阶段视频。//关闭eslint的严格模式检测。//关闭eslint的严格模式检测。//关闭eslint的严格模式检测。vue.config.js文件。vue.config.js文件。配置baseURL====>tbox.vue文件。原创 2022-09-15 14:50:45 · 225 阅读 · 0 评论 -
Vue---CSS样式的作用域
结果:(因为vue文件比css文件先导入,所以vue文件得优先级低于Css文件得;结果:(因为App.vue文件中的style标签比tbox.vue文件后运行,所以其样式优先级高于tbox.vue文件中的style样式)vue文件中可以出现多个style标签 但凡添加了scoped属性的,里面的选择器就会被修改 没添加scoped属性的就不会被修改。:在 .vue文件中的style标签中写入样式 打包以后就是全局样式。并且添加scoped的style中的标签上添加一个属性选择器。文件,再次文件中添加变量。原创 2022-09-15 14:50:11 · 759 阅读 · 0 评论 -
Vue---组件的自定义事件和原生事件
/ tbox组件是时间源 myevent是tbox组件绑定的事件类型 ,fn是tbox绑定的监听器。-- 1.在原生组件(就是html标签)中 事件是由系统来设计触发条件的: -->//事件的三要素: 事件源 target 事件类型type 监听器handler。-- 自定义组件:在自定义组件中,事件是由自己来设计什么时候触发的: -->// fn要myevent触发了救护运行 myevent事件什么条件下才会触发?-- 变成原生组件:+ .native -->-- 自定义组件 -->原创 2022-09-15 14:49:39 · 424 阅读 · 0 评论 -
Vue---插槽
具名槽位:< slot name="s1"> < /slot> < slot name="s2"> < /slot>< template v-slot:s2>插入东西必须放这个标签中,老版本不用< template>没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot中的数据插槽名不用使用引号引起来,直接写变量名。总结: v-slot:s2 是具名插槽的用法 #s1是插槽的语法糖。< 组件名> 尖括号中的东西插入默认槽位 < /组件名>插槽, 具名插槽 slot,原创 2022-09-15 14:49:02 · 465 阅读 · 0 评论 -
Vue---组件的属性
4.1.简单声明props:["prop1","prop2"]4.2对属性做详细的描述。Goods.vue文件。原创 2022-09-15 14:48:26 · 174 阅读 · 0 评论 -
Vue----单文件组件
/ 如果,Vue的script注释了,在打包的时候vue的打包环境 会帮我们把这个文件解析成为一个对象 然后添加一个。// 也就是说 .vue文件中 可以不要和但是不能不写单文件组件也有全局组件和局部组件只是把一个组件单独写在一个.vue文件中,供别的组件引入然后注册。引入文件时:一般使用相对路径 上一下用../ 同级使用./ 下级使用/ @ 代表src文件夹。// 注册的组件使用时可以用双标签也可以用单标签;// @代表src目录的意思。原创 2022-09-15 14:47:37 · 488 阅读 · 0 评论