精华内容
下载资源
问答
  • 主要介绍了vue 实现通过手机发送短信验证码注册功能的相关资料,需要的朋友可以参考下
  • 主要介绍了vue 动态加载并注册组件且通过 render动态创建该组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue数据更新页面刷新问题

    千次阅读 2020-12-07 10:18:24
    可能会出现两种情况: 1、替换其中某个数据 2、替换掉整个数组 || 对象 第一种: Vue官方文档给我们提供了两种方法:Vue.set()和this.set()区别:Vue.set可以设置实例创建之后添加的...3、Vue 能检测对象属性的添加

    可能会出现两种情况:

    1、替换其中某个数据
    2、替换掉整个数组 || 对象

    第一种:

    Vue官方文档给我们提供了两种方法:Vue.set()和this. s e t ( ) 区 别 : V u e . s e t 可 以 设 置 实 例 创 建 之 后 添 加 的 属 性 , 而 t h i s . set() 区别:Vue.set 可以设置实例创建之后添加的属性,而this. set()Vue.setthis.set只能设置实例创建后存在的属性
    最常见错误:
    1、通过数组索引修改数组元素
    2、修改数组长度时
    3、Vue 不能检测对象属性的添加或删除:你可以这样添加一个属性
    数组原型上的方法vue可直接检测到变化的方法有:push(),pop(),shift(),unshift(),splice(),sort(),reverse()
    在这里插入图片描述

    第二种:

    在这里插入图片描述

    第三种:

    在这里插入图片描述

    如果还不行,也可以使用:
    但你的数据缺实修改了,可以使用this.$forceUpdate()方法 (强制刷新)

    以上这些可以解决大部分问题,不明白的可以留言联系哦

    第四种:

    你就要考虑利用 vue 提供的 provide 和 inject 自定义刷新了
    我觉得,在我切换部门时候应该刷新整个页面的,毕竟之前的操作是之前的了
    this.reload()

    备注:

    有人遇到上面都不行,数据组成是[{a:1},{b:2}]这种数据组成的折叠tree
    因为数据不多:他解决的方法用了第一种:push(),pop(),shift(),unshift(),splice(),sort(),reverse()这些的变异方法

    展开全文
  • VUE页面demo

    2018-12-25 13:02:59
    vue+elementUi构建的40个页面demo 适合新手参考和学习,里面有源码
  • Vue项目之登录注册

    万次阅读 多人点赞 2019-08-31 16:46:58
    Vue项目之登录注册1. 注册1.1 注册页面的布局 1. 注册 1.1 注册页面的布局 ...3.给注册页面添加一个单独的路由,注册页面需要底部。(注意,相关样式需要引入不同的组件,请细心查看官方文档,按需拿取内容) 4...

    1. 注册

    1.1 注册页面的布局

    需要用到Vant的Field组件
    1.views下新建一个注册页面 ,完成基本布局。引入Vue和Field并使用。
    2.在官方文档中搜索,查看自己需要的内容,将其直接粘贴到页面中。
    3.给注册页面添加一个单独的路由,注册页面不需要底部。(注意,相关样式需要引入不同的组件,请细心查看官方文档,按需拿取内容)
    4. 利用计算属性给输入框做条件判断。本案例以手机号为例。

    <template>
      <div class="container">
        <header class="header">注册</header>
        <div class="content">
          <van-field
            v-model="username"
            placeholder="请输入手机号"
            clearable
            :error-message="usernamemsg"
          />
          <van-field
            v-model="password"
            type="password"
            clearable
            placeholder="请输入密码"
            error-message="密码格式错误"
          />
          <van-field
            v-model="code"
            center
            clearable
            placeholder="请输入短信验证码"
            error-message="验证码格式错误"
          >
            <van-button slot="button" size="small" type="primary">发送验证码</van-button>
          </van-field>
        </div>
      </div>
    </template>
    
    <script>
    import Vue from 'vue'
    import { Field, Button } from 'vant'
    
    Vue.use(Field)
    Vue.use(Button)
    export default {
      data () {
        return {
          username: '18813007814',
          password: '123456',
          code: ''
        }
      },
      computed: {
        usernamemsg () {
          if (this.username === '') {
            return ''
          } else if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.username)) {
            return '手机号码格式错误'
          } else {
            return ''
          }
        }
      }
    }
    </script>
    

    1.2 注册业务逻辑的实现

    注:在此之前,记住要先去路由页面添加一个注册页面的路由。
    1.补充了密码以及验证码的计算属性判断
    密码:如果为空返回空,如果不符合正则,返回格式错误,否则表示可以直接返回空
    验证码:如果为空返回空,否则不为五位,返回验证码格式错误,否则成功返回空

    2.验证码

    • 绑定点击事件senCode
    • 将提示信息{{buttonmsg}}放在按钮内容中。
    • 定义函数:(定时器注意用箭头函数)每一秒钟定义一次,先提前声明时间,在计时器内让时间减减,当时间为零时,清除定时器,同时btn的内容改为发送验证码,最后return。未return时,让按钮内的内容为时间减减+后重新发送(注意:在开启定时器时,要让按钮禁止点击,在清除定时器后再让按钮可点。)

    3.验证码跟接口做交互
    在setCode最后定义一个getCode函数,在下方定义该函数(类似面向对象写法)。
    定义getCode:

    • 需要引入Toast并使用,请提示
    • 在该函数中也可以去验证手机号是否正确,不正确显示相关提示信息
    • 否则正确,就去axios去post请求数据,然后打印数据,去判断返回信息,跟接口文档相对应,如果为1则是用户名已经注册,0为获取验证码失败,成功在data里再定义adminCode用来存放验证码,通过res.data.code可以获取,加入该值中。

    4.引入一个按钮,作为注册按钮
    定义register函数
    1.判断:

    • 将手机号的验证再写一遍,如果不符合,则toast提示,直接return
    • 验证密码,不符合同样提示并return
    • 验证码验证,不符合toast提示,并return

    2.当上面的判断都通过,再定义真正的注册函数

    • 调接口,修改注册按钮为不可点,并修改值为注册中,在注册按钮写上:loading=“loading” loading-text=“注册中” disabled=“flag”
    • this.flag=true,this.loading=true
    • axios的post请求数据,第二个参数为用户手机号和密码。请求成功后先去更改按钮的状态,this.flag,this.loading都改为false。 再去判断返回值(根据接口文档定义) 2->用户名已经注册,0->注册失败,否则注册成功
      5.在注册页面增加登录按钮,用来做跳转。
      记住不能用声明式跳转,用编程式跳转,用replace跳转到另一个页面(返回直接回到个人中心)
    <template>
        <div class="container">
            <header class="header">注册头部</header>
             <div class="content">
                 <van-field
                     v-model="tel"
                     placeholder="请输入手机号"
                     :error-message="usertel"
                     
                      clearable
                 />
                 <van-field
                     v-model="password"
                     type="password"
                     placeholder="请输入密码"
                     :error-message="pass"
                    
                     clearable
                 />
                 <van-field
                     v-model="sms"
                     center
                     clearable                
                     placeholder="请输入短信验证码"
                     :error-message="test"
                  >
                 <van-button :disabled="flag" slot="button" size="small" type="primary" @click="sendCode">{{ buttonmsg }}</van-button>
                
                 </van-field>
                  <van-button type="primary" :loading="loading" loading-text="注册..." size="large" :disabled="zhud" @click="register">注册</van-button>
                  <van-divider @click="toLogin">去登录</van-divider>
             </div>
        </div>
    </template>
    <script>
    import Vue from 'vue'
    import { Field,Button,Toast,Divider } from 'vant'
    import axios from 'axios'
    Vue.use(Field)
    Vue.use(Button)
    Vue.use(Toast)
    Vue.use(Divider)
    
    export default {
        data () {
            return {
                tel:'',
                password:'',
                sms:'',
                buttonmsg:'点击发送验证码',
                flag:false,
                adminCode:'',
                zhud:false,
                loading:false
            }
        },
        computed: {
            usertel () {
                if (this.tel === ""){
                    return ''
                }else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){
                    return '手机号格式错误'
                }else {
                    return ''
                }
            },
            pass () {
                if (this.password === ""){
                    return ''
                }else if(this.password.length<6){
                    return '密码不可小于6位'
                }else {
                    return ''
                }
            },
            test () {
                if (this.sms === ""){
                    return ''
                }else if(this.sms.length !== 5){
                    return '验证码格式错误'
                }else {
                    return ''
                }
            }
        },
        methods: {
            toLogin () {
               this.$router.replace('/login') 
            },
            sendCode () {
                let time = 4
                let timer
                timer = setInterval(()=>{                           
                    time --
                    if(time === 0){
                        clearInterval(timer)
                        this.flag=false
                        this.buttonmsg = '点击发送验证码'
                        return
                    }
                    this.flag = true  
                    this.buttonmsg = time + '秒后重新发送' 
                                  
                },1000)
                this.getCode()
            },
            getCode () {
                if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel) || this.tel===""){
                    Toast('手机号码输入有误')
                }else{
                    axios.get('https://www.daxunxun.com/users/sendCode?tel='+this.tel).then(res=>{
                        if(res.data === 1){
                            Toast('用户名已注册,请更改')
                        }else if(res.data === 0){
                            Toast('获取验证码失败')
                        }else{
                            this.adminCode = res.data.code
                            console.log(this.adminCode)
                        }
                    })
                }
            },
            register () {
                if (this.tel === '' || this.usertel === '手机号码格式错误') {
                    Toast('手机号码输入有误')
                    return
                }
                if (this.password === '' || this.pass === '密码格式错误,最少为6位') {
                    Toast('密码输入有误')
                    return
                }
                if (this.sms === '' || this.sms !== this.adminCode) {
                    Toast('验证码输入有误')
                    return
                }
                this.reallR()
            },
            reallR () {
                this.zhud=true
                this.loading=true
                axios.post('https://www.daxunxun.com/users/register', {
                username: this.tel,
                password: this.password
            }).then(res=>{
                this.zhud=false
                this.loading=false
                if (res.data === 2) {
                    Toast('用户名已注册,请直接登录')
                } else if (res.data === 0) {
                    Toast('注册失败')
                } else {
                Toast('注册成功')
                }
            })
            }
        }
    }
    </script>
    

    2. 登录

    页面布局以及基本逻辑同注册基本相同,可直接复制注册,将相关注册字样更改为登录。删除相关的判断。更改相关函数。

    <template>
        <div class="container">
            <header class="header">注册头部</header>
             <div class="content">
                 <van-field
                     v-model="tel"
                     placeholder="请输入手机号"
                     :error-message="usertel"
                     
                      clearable
                 />
                 <van-field
                     v-model="password"
                     type="password"
                     placeholder="请输入密码"
                     :error-message="pass"
                    
                     clearable
                 />
                  <van-button type="primary" :loading="loading" loading-text="登录..." size="large" :disabled="zhud" @click="login">登录</van-button>
                  <van-divider @click="toRegister">去注册</van-divider>
             </div>
        </div>
    </template>
    <script>
    import Vue from 'vue'
    import { Field,Button,Toast,Divider} from 'vant'
    import axios from 'axios'
    // import { setInterval, clearInterval } from 'timers';
    // import func from '../../../vue-temp/vue-editor-bridge';
    Vue.use(Field)
    Vue.use(Button)
    Vue.use(Toast)
    Vue.use(Divider)
    
    export default {
        data () {
            return {
                tel:'',
                password:'',
                zhud:false,
                loading:false
            }
        },
        computed: {
            usertel () {
                if (this.tel === ""){
                    return ''
                }else if(!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.tel)){
                    return '手机号格式错误'
                }else {
                    return ''
                }
            },
            pass () {
                if (this.password === ""){
                    return ''
                }else if(this.password.length<6){
                    return '密码不可小于6位'
                }else {
                    return ''
                }
            }
        },
        methods: {
            toRegister () {
                this.$router.replace('/register')
            },
            login () {
                if (this.tel === '' || this.usertel === '手机号码格式错误') {
                    Toast('手机号码输入有误')
                    return
                }
                if (this.password === '' || this.pass === '密码格式错误,最少为6位') {
                    Toast('密码输入有误')
                    return
                }
                if (this.sms === '' || this.sms !== this.adminCode) {
                    Toast('验证码输入有误')
                    return
                }
                this.reallR()
            },
            reallR () {
                this.zhud=true
                this.loading=true
                axios.post('https://www.daxunxun.com/users/login', {
                username: this.tel,
                password: this.password
            }).then(res=>{
                this.zhud=false
                this.loading=false
                if (res.data === 2) {
                    Toast('用户未注册')
                } else if(res.data === -1){
                    Toast('密码错误')
                }else if (res.data === 0) {
                    Toast('登录失败')
                } else {
                Toast('登录成功')
                localStorage.setItem('isLogin','ok') //登录标识
                this.$router.back()  //登陆成功返回上一页
                }
            })
            }
        }
    }
    </script>
    

    3.导航守卫

    3.1全局导航守卫,全部路由都会经过这里。一定要调用next方法向下执行

    除了登陆路由,其他页面都需要登录验证。

    router.beforeEach((to,from,next)=>{
      // console.log(to)
      // console.log(from)
      // next()   //至此就可以显示页面了
      //做业务逻辑,如果是登录状态,就进行下一步(注意登录页面不可做这个判断)
      if(to.name = 'login'){  //如果要去的页面是登录页面,就进行下一步,不做判断
        next()
      }else{
        if(localStorage.getItem('isLogin')==='ok'){
          next()
        }else{
          next('/login')
        }
      }
    

    3.2 路由独享的导航守卫

    路由独享的导航守卫—一般不推荐直接使用
    比如在购物车路由下方加入下面一段代码,可以实现购物车页面的相关判断。
    没有登录状态就直接去到登录页面,有登录状态就继续下一步。

    beforeEnter (to,from,next) {
              if(localStorage.getItem('isLogin')==="ok"){
                next()
              }else{
                next('/login')
              }
            }
    

    3.3 组件内的导航守卫

    先来简单看一下组件内的导航守卫相关介绍:

    const Foo = {
      template: `...`,
      beforeRouteEnter (to, from, next) {
        // 在渲染该组件的对应路由被 confirm 前调用
        // 不!能!获取组件实例 `this`
        // 因为当守卫执行前,组件实例还没被创建
      },
      beforeRouteUpdate (to, from, next) {
        // 在当前路由改变,但是该组件被复用时调用
        // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
        // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
        // 可以访问组件实例 `this`
      },
      beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
      }
    }
    

    beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

    不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。

    beforeRouteEnter (to, from, next) {
      next(vm => {
        // 通过 `vm` 访问组件实例
      })
    }
    

    本文以购物车页面为例,在路由进入之前,做一个判断,有登录状态进行下一步,没有登录状态就直接去到登录页面。组件内的导航守卫有两张写法,请看案例,且不同写法有不同的效果,按需而定。

    <template>
        <div class="container">
            <header class="header">购物车头部</header>
             <div class="content">购物车内容</div>
        </div>
    </template>
    <script>
    export default {
        beforeRouteEnter (to,from,next) {
            // if (localStorage.getItem('isLogin')==='ok'){
            //     next()
            // }else{
            //     next('/login')  //这种登陆成功返回点击购物车之前的页面
            // }
            next(vm => {
                if (localStorage.getItem('isLogin')==='ok'){
                next()
            }else{
               // next('./login')
               vm.$router.push('/login')  //这种登录成功直接返回到了购物车
            }
            })
        }
    }
    </script>
    

    补充:个人中心的校验

    • 在个人中心写业务逻辑,如果本地读取登录状态则跳到相关页面,没有登录的话就跳转到未登录页面
    • 涉及到重定向,一开始就将路由盖过去了,因此未登录页面同样需要业务处理
    • 注意,要在未登录页面部署同样的业务逻辑,有登陆跳转登录,没有登录next
    • 想让业务更加严谨就去登录页面设置业务逻辑,(虽然效果已经实现了)

    4.列表进入详情返回还在原位置

    基本思路:在离开页面前将内容高度存储到本地,在返回页面后在去本地获取并设置内容高度。

    • 添加meta标签,keepAlive,表示当前路由涉及到缓存
    • 在app.vue修改路由的显示部分,将视图放进标签,并且做一个判断,注意需要缓存的才放在标签中(可以避免组件的重新渲染)
    • 找位置:离开时记录位置,返回时回到这个位置
      利用keepAlive,可以在activated中进行操作
    1. 在需要 缓存的列表中定义路由时添加如下代码 router.js中针对于 首页的路由

    在这里插入图片描述
    2.修改App.vue中路由的显示部分
    在这里插入图片描述
    3.在离开首页时,记录滚动条的位置,返回时滚动到该位置即可,下方案例有一句代码是为了实现其他业务需求,可以忽略不看。
    在这里插入图片描述
    4.利用keepAlive,可以在activated中进行返回后的操作,设置内容高度为本地存储的值。
    在这里插入图片描述

    5. 路由相关问题

    对于导航守卫还需要补充一些相关知识,上面步骤执行完会发现个人中心存在一些问题。当在个人中心页面显示已经登录时,无法后退。
    通过vue开发者工具,我们可以观察到,当我们未登录时,先去到首页,再去到个人中心,此时个人中心应该是未登录页面(/user/nologin),我们点击登录,会去到登录页面,点击登录后,在开发者工具中,我们会看到,我们先到了个人中心的未登录页面,再去到了个人中心的已登录页面,并且每次后退,都是先后退到个人中心未登录页面,又跳转到个人中心登录页面。(因为未登录页面有一个判断,所以我们每次点击后退,在视觉上感觉无法后退,实际上是退回到了未登录页面,这个页面又做了个判断,又回到已登录页面,如此循环往复。)
    在这里插入图片描述
    解决:

    • 在个人中心的未登录页面,将之前的next、vm删去。
    • 在个人中心的登录页面,将之前的判断删去,此页面不做判断也可以执行业务逻辑。

    执行完以上解决方法,发现我们可以后退了,但是,需要后退两次才能返回主页。通过开发者工具我们可以看到页面路由跳转的流程,见下图:
    在这里插入图片描述
    相关原因以及解决方法:
    1.在路由文件中将重定向删除。
    2.个人中心未登录页面到登录页面的跳转是声明式挑战,需要更改为编程式跳转。在编程式跳转中,运用replace方法()
    3.在个人中心页面,我们之前用的是beforeRouteEnter,如果是该页面下的其它页面做跳转,此方法无法触发。所以我们此处应该将该方法替换成侦听属性。(侦听属性可以侦听路由的变化,打印可以获取相关的路由,因此我们可以做判断。)
    4.但是我们发现侦听属性在别的页面跳转到该页面时,第一次不会触发监听。因此第一次监听还是需要用到beforeRouteEnter,再此方法中也需要用到replace,至此可以解决问题了。

    步骤详情
    1.在路由文件中,将个人中心页面的重定向删除

    在这里插入图片描述
    2.在nologin页面将路由守卫删去,改变登录跳转方式。在个人中心的login页面,直接将业务逻辑删去。
    在这里插入图片描述
    3.个人中心页面,将beforeRouteEnter中的next改为replace方法。(因为没有重定向,默认跳转为/user替换为/user/login或者/user/nologin)在下面利用侦听属性侦听路由的变化,并做判断。 (replace和push页面显示不同)

    <template>
      <div class="container">
        <header class="header">个人中心头部</header>
        <div class="content">
          <router-view></router-view>
          个人中心内容
        </div>
      </div>
    </template>
    <script>
    export default {
      beforeRouteEnter (to, from, next) {
        next(vm => {
          if (localStorage.getItem('isLogin') === 'ok') {
            // 因为没有重定向,默认跳转为 /user 替换为/user/loging
            vm.$router.replace('/user/loging')
          } else {
            vm.$router.push('/user/nologin')
          }
        })
      },
      watch: {
        $route (val) {
          console.log(val)
          if (localStorage.getItem('isLogin') === 'ok') {
            this.$router.replace('/user/loging')
          } else {
            this.$router.replace('/user/nologin')
          }
        }
      }
    }
    </script>
    
    展开全文
  • vue 全局组件注册With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js...

    vue 全局组件注册

    With the new versions of Vue3 out now, it’s useful to start learning how the new updates will change the way we write code. One example is the changes in the way we write our index.js file (the file that handles creating our Vue app).

    随着新版本Vue3的发布,开始学习新更新将如何改变我们编写代码的方式非常有用。 一个例子是我们编写index.js文件(用于处理创建Vue应用程序的文件)的方式的变化。

    Today, we’ll take a look at how to register Vue3 Global Components that can be used across our entire Vue app. It’s a little different from how we declared them in Vue2, but it’s just as simple.

    今天,我们将研究如何注册可在整个Vue应用程序中使用的Vue3全局组件。 与我们在Vue2中声明它们的方式稍有不同,但它很简单。

    For this tutorial, I am working with the beta release of Vue3 that can be found via the vue-next Github repository.

    对于本教程,我正在使用Vue3beta版本 ,可以通过vue-next Github存储库找到它。

    Alright. Let’s just get straight to it.

    好的。 让我们直接说吧。

    什么是Vue全球组件? (What are Vue Global Components?)

    First off, we have to understand what a Vue3 global component is and why we might want to use one.

    首先,我们必须了解Vue3全局组件是什么以及为什么要使用它。

    Normally, when we want to include a component inside our Vue instance, we register it locally. That normally looks something like this.

    通常,当我们想在Vue实例中包含一个组件时,我们会在本地注册它。 通常看起来像这样。

    <script>
    import PopupWindow from '../components/PopupWindow.vue';
    export default {
    components: {
    PopupWindow
    }
    }
    </script>

    However, let’s say that there is a component that we know we’re going to be using many times across our Vue project. It can get messy to register this component locally inside every file — especially if our project gets refactored or something.

    但是,假设有一个组件,我们知道我们将在整个Vue项目中多次使用它。 在每个文件中本地注册此组件可能会很麻烦-尤其是在我们重构了项目或其他内容的情况下。

    In this case, it could be useful to globally register the component — making it accessible in all subcomponents of our main root Vue instance. In other words, globally registering a component means that we don’t have to import it in each file.

    在这种情况下,全局注册该组件可能会很有用-使它可以在我们的主根Vue实例的所有子组件中访问。 换句话说,全局注册一个组件意味着我们不必将其导入每个文件中。

    Let’s take a look at how this is done in Vue2 and how we can do it now in Vue3.

    让我们看一下如何在Vue2中完成此操作以及现在如何在Vue3中进行操作

    全局组件如何在Vue2中工作 (How global components work in Vue2)

    In Vue2, wherever we create our Vue instance, we just have to call a Vue.component method to register a global component.

    在Vue2中,无论我们在哪里创建Vue实例,我们都只需要调用Vue.component方法来注册全局组件。

    This method takes two arguments:

    此方法有两个参数:

    1 — the name of our global component

    1-我们的全球组成部分的名称

    2 — our component itself

    2-我们的组件本身

    Here’s a quick example of what that might look like.

    这是一个大概的例子。

    import Vue from 'vue'
    import PopupWindow from './components/PopupWindow'
    import App from './App.vue'
    Vue.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
    new Vue({
    render: h => h(App)
    }).$mount('#app')

    Now this ‘PopupWindow’ component can be used in all children of this Vue instance! Easy as that.

    现在,此“ PopupWindow”组件可以在此Vue实例的所有子级中使用! 那样简单。

    现在,在Vue3中呢? (Now, what about in Vue3?)

    In Vue3, the code varies slightly just because of creating our Vue instance works a little differently (using createApp), but it is just as simple to understand.

    在Vue3中,由于创建我们的Vue实例(使用createApp)的工作方式略有不同,因此代码略有不同,但是它很容易理解。

    Instead of declaring global components from our Vue object, we first have to create our app. Then, we can run the same .component method as we would before.

    首先必须创建应用程序,而不是从Vue对象声明全局组件。 然后,我们可以运行与以前相同的.component方法。

    import { createApp } from 'vue'
    import PopupWindow from './components/PopupWindow'
    import App from "./App.vue"
    const app = createApp(App)
    app.component('PopupWindow', PopupWindow) // global registration - can be used anywhere
    app.mount('#app')

    As you can see, it’s very similar, but the slight differences in the way our Vue instance is initialized make us change up our syntax a little bit.

    如您所见,它非常相似,但是Vue实例的初始化方式略有不同,使我们对语法进行了一些更改。

    就是这样! (And that’s it!)

    There you have it! We can now use our COMPONENT component in any Vue component that comes from this root instance. It’s a great way to keep our code DRY.

    你有它! 现在,我们可以在此根实例提供的任何Vue组件中使用COMPONENT组件。 这是使我们的代码保持干燥的好方法。

    It’s important to carefully consider when we want to use a global component vs. a local component. If we just make everything a global component by default, it means that even when we’re not using a component, it would still be included in our build — increasing page load times.

    重要的是要仔细考虑何时要使用全局组件还是本地组件。 如果我们默认将所有内容都设为全局组件,则意味着即使不使用组件,该组件仍将包含在我们的构建中-增加页面加载时间。

    Global components can be a very powerful tool when used properly, and with the new changes in Vue3, it is still very easy to use these types of components in your Vue project.

    正确使用全局组件可以成为非常强大的工具,并且随着Vue3新变化,在Vue项目中使用这些类型的组件仍然非常容易。

    If you have any questions, leave them in the comments down below.

    如有任何疑问,请在下面的注释中保留。

    Happy coding :)

    快乐的编码:)

    翻译自: https://medium.com/swlh/how-to-register-a-vue3-global-component-5a6e2fe4dd31

    vue 全局组件注册

    展开全文
  • Vue注册组件的3种方式

    万次阅读 2019-05-30 17:38:08
    第一种方式 extend: vue.js中这样写: var com1 = Vue.extend({ template:'<h3>这是第一种方式</h3>' }); Vue.component("myCom1",com1); 注:myCom1是采用的驼峰命名方式,所以...注:如果采用驼...

    第一种方式 extend:
    vue.js中这样写:

    var com1 = Vue.extend({
       template:'<h3>这是第一种方式</h3>'
    });
    Vue.component("myCom1",com1);
    

    注:myCom1是采用的驼峰命名方式,所以html中这样写:

    <my-com1></my-com1>
    

    注:如果不采用驼峰命名方式,js和html中这样写:
    vue.js中这样写:

    var com1 = Vue.extend({
        template:'<h3>这是第一种方式</h3>'
    });
    Vue.component("mycom1",com1);
    

    html中写法:

    <mycom1></mycom1>
    

    上面可以不使用中间变量,即把com1的内容直接写在Vue.component(“mycom1”,com1)里面,如:

    Vue.component("mycom1",Vue.extend({
        template:'<h3>这是第一种方式</h3>'
    }));
    

    第二种方式:不用extend
    vue.js中这样写:

    Vue.component("mycom1",{
        template:'<div><h3>这是h3标签</h3><span>这是span标签</span></div>'
    });
    

    注:不论是哪种方式创建出来的组件,必须只有一个根元素,即多个html元素的时候,要用一个div包裹
    html中依旧写成:

    <mycom1></mycom1>
    

    第三种:在页面上定义外部template元素
    vue.js中这样写:

    Vue.component("mycom1",{
        template:'#temp'
    });
    

    html中写template结构:

    <template id="temp">
        <h3>这是html中的temp</h3>
    </template>
    
    PS:以上是全局注册,局部注册如下:

    第一种局部注册:
    js文件中写:

    var vm = new Vue({
        el:"#newBrand",
        data:{},
        components:{
            mycom1:{
                template: '<div><h3>这是局部template</h3></div>'
            }
        }
    });
    

    html文件中写:

    <div id="newBrand">
    	<mycom1></mycom1>
    </div>
    
    

    第二种局部注册:

    js文件中这样写:

    var vm = new Vue({
        el:"#newBrand",
        data:{},
        components:{
            mycom1:{
                template: '#temp'
            }
        }
    });
    

    html文件中写法:

    <template id="temp">
        <div><h3>这是局部template啦</h3></div>
    </template>
    
    展开全文
  • Vue.js组件注册自定义组件成功

    千次阅读 2018-08-30 16:04:23
    Vue.js组件注册自定义组件成功 Vue.js组件注册自定义组件成功: 报下列错误: vue.js:584 [Vue warn]: Unknown custom element: &lt;buttoncount&gt; - did you register the component correctly...
  • Vue实战篇一: 使用Vue搭建注册登录界面

    千次阅读 多人点赞 2020-10-20 14:03:12
    Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:Vue的指令 Vue基础篇六:Vue使用JSX进行动态渲染 ...
  • vue注册全局弹窗组件

    千次阅读 2020-04-16 12:30:03
    —|— elert.vue —|— elert.js elert.vue代码: <template> <div class="modal fade" data-backdrop="static"> <div class="modal-dialog"> <div class="modal-content"...
  • vue 注册子组件

    千次阅读 2018-06-15 15:05:17
    vue 组件注册 注册一个子组件并引用 在父组件中引入子组件 import sonComponents from &quot;./son.vue&quot; 在components中注册该组件 export default { data(){ return{ } }, ...
  • 1.全局注册vue实例前写,如: Vue.directive('focus',{ inserted:function(el){ el.focus()//添加焦点事件,也可以给dom元素添加其它,比如input标签中用到el.value='请输入内容' } }) 注意:全局注册是没有directive...
  • Vue注册登录实例

    千次阅读 2019-01-17 14:50:20
    自己写的一个登陆注册实例 &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt;...~/Scripts/vue.js"&am
  • vue实现登录注册模板

    万次阅读 多人点赞 2019-11-11 23:36:23
    login.vue <template> <p class="login"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="登录" name="first"> <el-form :model="ru...
  • vue 全局注册过滤器 filter

    千次阅读 2021-03-11 16:25:43
    随着 vue 的脚手架不断更新,搭建项目的时候很多东西都需要我们自己来配置,比如说过滤器 filter。 以我个人习惯为例: 1、创建一个 filters.js 文件,在这里定义多个过滤器 //时间过滤器 let formatTime = time =&...
  • vue组件全局注册和局部注册

    千次阅读 2019-09-03 10:43:21
    如果想要一个组件在项目中哪里都可以直接调用,这个时候就需要用到全局注册,全局注册的缺点就是:注册了的全局组件,就算需要用到,仍会占用内存 1.创建组件 创建一个文件zujian,在这个文件中创建zujian.vue,在...
  • 2.此为注册的弹框,最下面的div为上面的弹框,绑定的表单为form1,表单在data里声明,加后台传入的字段,是否显示为dialogFormVisible1。 3.方法里 筛选用户名且注册 ps:另一个组件接收的状态,()里可以加...
  • 基于vue,新手必备项目,结构布局,都有很好的借鉴,购购物车动画,登录拦截都做了处理,
  • CDN方式Vue组件注册

    千次阅读 2019-09-21 00:01:29
    代码示例 <div id="app"> <global-child></global-child> <local-child></local-child> </div> <script src="./vue.js"></script>... Vue.c...
  • vue面试题总汇

    千次阅读 多人点赞 2019-02-22 15:26:53
    vue面试题总汇 vue的底层原理? vue组件之间的通信? JS中判断数据类型的方法有几种? 最常见的判断方法:typeof 判断已知对象类型的方法: instanceof 根据对象的constructor判断: constructor 无敌万能的...
  • VUE组件component注册后获取

    千次阅读 2018-09-30 00:00:36
    首先我注册一个组件 Vue.component("item-groceryText",{ template:"&lt;p&gt;这是一个组件&lt;/p&gt;" }); &lt;item-groceryText&gt;&lt;/item-groceryText&...
  • vue之登录注册

    千次阅读 2020-08-23 11:51:50
    vue之登录注册 目录vue之登录注册主要内容步骤总结 主要内容 本章目标:vue+elementUI完成注册及登陆 vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack pro01 1.2...
  • vue注册公共多个组件的方法

    千次阅读 2020-04-02 16:18:57
    文件目录如下: commenComponents 文件夹下 index.js代码如下: // 一次引入终身受用 /** * require.context()参数的意义 ...const requireComponent = require.context('./', true, /\.vue$...
  • vue+springboot 登录注册功能

    千次阅读 2020-06-01 22:25:49
    一、前端 1、引入element ui npm i element-ui -S 2、在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI); 二、后端 1、
  • Vue注册全局组件-弹窗组件

    千次阅读 2018-08-30 20:00:02
    在src目录下新建components文件夹 ...1.新建module文件夹,然后新建v-alert.vue <template> <transition name="fade"> <div class="v-alert g-center" :style="{zIndex}"> <div ...
  • vue 登录注册模板

    千次阅读 2020-04-21 15:56:10
    https://blog.csdn.net/qq_40323256/article/details/103020807
  • Vue注册全局子组件和局部子组件

    千次阅读 2019-01-25 16:50:21
    Vue注册全局子组件和局部子组件 ps: 这里是使用vue-cli搭建的vue开发目录 Vue注册全局子组件 第1步: 创建子组件,代码如下 &lt;template&gt; &lt;div id="header"&gt; &lt;div ...
  • vue-cli 登录注册的实现

    千次阅读 2019-07-01 20:40:26
    本文章给大家介绍使用vue.js完成简单的登录注册功能 功能概览 登录界面,登录用户存在 提示用户进行注册 前往注册页面进行注册 注册成功后自动跳转到浏览博客页面 可以看到这时候数据表中已有数据 登录测试:...
  • 登录注册vue

    千次阅读 2019-04-03 15:52:58
    登录和注册,主要演示如何用axios请求接口以及后期逻辑书写。各个功能如下所示: 登录模块 用户存在,密码错误,登陆成功 注销登录 注册模块 项目功能梳理 在创建项目之前,我们先理一下整个项目的功能模块。 登录...
  • 出场率100%的Vue面试题

    千次阅读 多人点赞 2019-11-06 17:26:57
    出场率100%的Vue面试题 前言 注意本次用cdn形式引入js学习,有node.js的玩家可以用node.js。CDN下载地址:https://vuejs.org/js/vue.min.js以及Node.js:Vue系列: windows下npm安装vue 有一个强大的地基才能写出...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,921
精华内容 35,968
关键字:

vue注册不了

vue 订阅