Vue
文章平均质量分 66
前端小猴
喜欢的小伙伴多来关注一下哦
展开
-
Vue:父子组件传值props、sync、v-model
在vue中父子组件中传值示例中:1. 父组件Father向子组件Son传值(num:100)2. 子组件Son点击修改按钮,需要修改接收父组件的传值,vue是单向数据流不允许直接修改接收的值。因此通知父组件Father去修改num值。props单向数据流1. 父子组件props传值:父组件:<template> <div> 父组件:{{ num }} <Son :value="num" @change="c.原创 2021-10-13 11:11:12 · 504 阅读 · 0 评论 -
vue Router 路由守卫
一、什么是导航守卫1、官方定义:提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的2、自己的理解:导航守卫就是路由跳转过程中的一些钩子函数,再直白点路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,比如跳转前是否验证登录等,这就是导航守卫。二、使用导航守卫安装步骤:1.npm install vue-router2.镜像淘宝原创 2021-10-07 19:38:00 · 612 阅读 · 0 评论 -
vue路由传参的三种方式和路由跳转的四种方式
第一种方法通过params与配置路由格式(特点:刷新数据不会丢失,会以/user/1234格式拼接显示在url里面)路由配置:{ path: '/user/:id', name: 'user', component: user }携带参数传递: //直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: '/user/123', })获取对应参数:转载 2021-10-06 17:35:15 · 883 阅读 · 0 评论 -
Vue组件通讯or插槽
组件通讯父子组件的通讯父组件通过props向子组件传递数据写法一:写法二:<div id="app"> // 在使用组件的时候绑定 // 不支持驼峰命名 cMovies要写成c-movies <cpm :c-movies="movies" :c-message="message"></cpn></div><template id="cpn"> <div>原创 2021-10-06 16:14:34 · 150 阅读 · 0 评论 -
Vue下篇-----组件化开发
组件的基本介绍注册组件的基本步骤调用Vue.extend()方法 - 创建组件构造器 调用Vue.component()方法 - 注册组件 在Vue实例的作用范围内 - 使用组件全局组件 / 局部组件全局组件如上代码案例局部组件:父组件 / 子组件语法糖:Vue为了简化注册组件的过程, 提供了注册的语法塘, 省去了调用Vue.extend()的步骤. 而是可以直接使用一个对象来代替组件模板抽离写法 :方法一:方法二:组件可以访问...原创 2021-10-06 15:34:33 · 87 阅读 · 0 评论 -
Vue基础篇1
1. VUE 概述Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架,发布于2014年2月。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库(如: vue-router: 跳转,vue-resource: 通信,vuex:管理)或既有项目整合2.前端组成的三个部分:HTML (结构) :超文本标记语言(Hyper Text Markup Language) ,决定网页的结构和内容CSS (表现) :层原创 2021-10-06 14:54:50 · 198 阅读 · 0 评论