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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vuex的使用和简易实现
Jan 07 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue数据字典取键值项目的字典问题
Apr 12 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 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
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
基于jquery的loading效果实现代码
2010/11/05 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
js实现简单计算器
2015/11/22 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
2017/01/06 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
如何在python中使用selenium的示例
2017/12/26 Python
python 识别图片中的文字信息方法
2018/05/10 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
个人自我鉴定
2013/11/07 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
世博会口号
2014/06/20 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
中学教师教学工作总结
2015/08/13 职场文书
2016年五一促销广告语
2016/01/28 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL
win11无线投屏在哪设置? win11无线投屏功能的使用方法
2022/04/08 数码科技
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python
详解MySQL的内连接和外连接
2023/05/08 MySQL