vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element


Posted in Vue.js onApril 11, 2022

出现function () { [native code] }错误的解决

控制台输出错误:

[Vue warn]: Unknown custom element: <p1> - did you register the component correctly? 
For recursive components, make sure to provide the "name" option.

页面提示:

function () { [native code] },无法出现我们想要的内容

vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element

页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
	<!-- 下面这行代码出错-->
    <p1>{{currentTime1}}</p1></br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#vue",
        data:{
            message:"hello world"
        },
        methods:{
            currentTime1: function () {
              return Date.now();//返回当前时间戳
          }
        }
    });
</script>
</body>
</html>

综上错误,究其原因就是新人对“计算属性”:computed和“事件处理”:methods傻傻分不清楚。根据官方文档总结如下:

对于任何复杂逻辑,你都应当使用计算属性。其余可以使用methods处理。

https://cn.vuejs.org/v2/guide/computed.html?

vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element

所以,下次如果再出现function () { [native code] },请使用对应的方法获取值。

这里的methods方法就应该使用currentTime1()调用,计算属性computed就应该使用currentTime2调用。

完整methods方法和计算属性对比运行代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="vue">
    <p1>{{currentTime1()}}</p1></br>
    <p1>{{currentTime2}}</p1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#vue",
        data:{
            message:"hello world"
        },
        methods:{
            currentTime1: function () {
              return Date.now();//返回当前时间戳
          }
        },
        computed:{  //存在缓存,建议不经常的变化的在次操作
            currentTime2:function () {
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

页面效果:


vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element

vue使用过程中遇到的bug及解决

1.用event.target操作当前元素出现bug

改为用event.currentTarget。

2.data数据更新之后渲染页面是异步的

所以要在$nextTick里面,DOM元素更新之后再操作DOM

3.v-cloak解决网络不好时页面显示双花括号{{}}问题

<template>
  <div id="app">
    <div v-cloak>{{ item.title }}</div>
  </div>
</template>
<style>
  [v-cloak] {
      display: none;
  }
</style>

4.v-pre跳过组件和子组件的编译过程

比如<span v-pre>{{ instead }}</span>渲染出来的是{{ instead }}字符串,不会再js中找instead这个数据

5.element的navMenu导航菜单的index不能用数字

而要用字符串。

解决办法: :index = "index + ‘’"    转化成字符串

6.vue中main.js一引入sass文件就报错

提示路径找不到或者依赖找不到,是因为webpack.base.conf.js中

{
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }

重复配了,把它删掉就好了(新版的vue-cli默认配置了这个)

7.所有的v-if最好都加上key

否则因为相同标签元素复用会导致意想不到的bug

Vue.js 相关文章推荐
Vue 的 v-model用法实例
Nov 23 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
详解Vue的options
May 15 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
vue选项卡切换的实现案例
分享一个vue实现的记事本功能案例
vue代码分块和懒加载非必要资源文件
Apr 11 #Vue.js
vue打包时去掉所有的console.log
三种方式清除vue路由跳转router-link的历史记录
Apr 10 #Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 #Vue.js
vue实力踩坑之push当前页无效
Apr 10 #Vue.js
You might like
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
2015/11/03 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
Vue中使用vux配置代码详解
2018/09/16 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
pygame实现简易飞机大战
2018/09/11 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Python错误的处理方法
2020/06/23 Python
Python如何使用input函数获取输入
2020/08/06 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
新颖的化妆品活动方案
2014/08/21 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
python 模块重载的五种方法
2021/04/24 Python
MySQL里面的子查询的基本使用
2021/08/02 MySQL
Python创建SQL数据库流程逐步讲解
2022/09/23 Python