vue新手入门出现function () { [native code] }错误的解决方案
目录
- 出现function () { [native code] }错误的解决
- vue使用过程中遇到的bug及解决
- 1.用event.target操作当前元素出现bug
- 2.data数据更新之后渲染页面是异步的
- 3.v-cloak解决网络不好时页面显示双花括号{{}}问题
- 4.v-pre跳过组件和子组件的编译过程
- 5.element的navMenu导航菜单的index不能用数字
- 6.vue中main.js一引入sass文件就报错
- 7.所有的v-if最好都加上key
出现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] }，无法出现我们想要的内容
页面代码：
<!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?
所以，下次如果再出现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使用过程中遇到的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
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
简单学习5种处理Vue.js异常的方法
错误大全 为了测试各种异常处理技巧,我故意触发三种类型的错误. 第一种:引用一个不能存在的变量: <div id="app" v-cloak> Hello, {{name}} </div> 上述代码运行后不会抛出错误,但是在控制台会有[Vue warn]消息. 111111111111111111 你可以在Codepen查看例子完整代码. 第二种:将变量绑定到一个被计算出来的属性,计算的时候会抛出异常. <div id="app" v-
-
Vue全局loading及错误提示的思路与实现
前言 近期项目马上上线,前两天产品提个需求,加个全局loading,我这半路出家的vue选手,有点懵逼,这玩意还是第一次,但是作为一个初级的前端切图仔,这个东西是必须会的,花了五分钟思考了一下,然后动键盘码出来 ,今天总结一下,与各位分享交流,有错误还请各位指出. 思路 我们项目请求使用的是axios,那么我们就在请求前后进行拦截,添加我们需要的东西,然后通信控制loading,通信方式我就不写了,有个老哥写的不错,可以去看看传送门 代码实现 首先对axios进行封装 如果你想进行全局错误提醒
-
vue使用技巧及vue项目中遇到的问题
这里给大家分享一下vue中的一些技巧,希望对大家有用处.(话不多说上代码) 1,vue路由拦截浏览器后退实现表单保存类似需求(为了防止用户突然离开,没有保存已输入的信息.) //在路由组件中: mounted(){ }, beforeRouteLeave (to, from, next) { if(用户已经输入信息){ //出现弹窗提醒保存表单,或者自动后台为其保存 }else{ next(true);//用户离开 } 请参考vue文档全局钩子和组件钩子 2,路由懒加载写法: // 我所采用的方
-
vue深入解析之render function code详解
前言 最近在深入的学习研究vue,其实vue在使用上入门并没有什么太高的门槛,但前端同学们也不该仅仅停留在使用上.以 vue 设计.编码之优秀,足当抽丝剥茧,扒开它的外壳,深入其原理.让我们一起来刺破 vue 的心脏,下面话不多说了,来一起看看详细的介绍吧. vue核心执行过程图 vue核心的执行过程主要分为这几个阶段: 1) 编译模板,生成可复用的render function code(这是今天要重点解读的),这一步在vue实例的整个生命周期中只会执行一次甚至零次,因为我们可以在打包的时候可
-
vue新手入门出现function () { [native code] }错误的解决方案
目录 出现function () { [native code] }错误的解决 vue使用过程中遇到的bug及解决 1.用event.target操作当前元素出现bug 2.data数据更新之后渲染页面是异步的 3.v-cloak解决网络不好时页面显示双花括号{{}}问题 4.v-pre跳过组件和子组件的编译过程 5.element的navMenu导航菜单的index不能用数字 6.vue中main.js一引入sass文件就报错 7.所有的v-if最好都加上key 出现function () {
-
详解Vue中使用v-for语句抛出错误的解决方案
Vue 中使用v-for语句抛出错误的解决方案 今天在维护以前的项目的时候遇见了下面的报错情况,开始我以为是因为jQuery和Vue冲突了,所以把以前的jQuery改了,但是还是出现同样的错误-通过查阅资料,发现是因为循环的变量里面的值重复了,导致Vue报错. 复制代码 代码如下: Uncaught (in promise) TypeError: Cannot read property 'removeChild' of null 接下来查了一下解决方案,发现在Vue 2.0之前的版本可以通过在
-
Python新手入门最容易犯的错误总结
前言 Python 以其简单易懂的语法格式与其它语言形成鲜明对比,初学者遇到最多的问题就是不按照 Python 的规则来写,即便是有编程经验的程序员,也容易按照固有的思维和语法格式来写 Python 代码,之前小编给大家分享过了一篇<Python新手们容易犯的几个错误总结>,但总结的不够全面,最近看到有一个外国小伙总结了一些大家常犯的错误,16 Common Python Runtime Errors Beginners Find,索性我把他翻译过来并在原来的基础补充了我的一些理解,希望可以让
-
一篇超完整的Vue新手入门指导教程
前言 新建项目近些年前端开发快速发展,现在学习前端已经不像以前那样仅仅学习一个语法就可以了,它已经是一门编程技术了,它们有自己独立的类似Main函数的入口,有像MVC一样规范好的层次结构,有自己的开发工具可以发布打包程序,甚至还可以独立连接数据库,当然了,优点与缺点共存,不能向其他语言那样断点调试导致了,它的脉络更难被捕捉,犹如远古时代的代码开发一样,但它还是已经可以称为一门编程技术了,所以学习一门前端开发,已经是一件非常有意义的事儿了. 首先安装Nodejs,然后我们一起学习使用Vue. Vu
-
前端Vue单元测试入门教程
目录 一.为什么需要单元测试 二.如何写单元测试 三.测试工具 四.Jest入门 安装 简单示例 Jest Cli 使用配置文件 使用 Babel vue-cli 中使用 Jest 常见示例 判断值相等 检查类false值 数字大小比较 字符串比较 数组和类数组 异常 只执行当前test 测试异步代码 回调函数 Promises Async/Await 安装和拆卸 测试前和测试后 测试用例分组 执行顺序 mock 函数 测试mock mock的返回值 模拟接口返回 mock函数的匹配器 五.Vu
-
五分钟教你使用vue-cli3创建项目(新手入门)
目录 一.搭建vue环境 二.Vue脚手架工具 三.创建项目 四.选择manually select (enter键确认,并进入下一步) 五.选择完成之后回车 这里我们选择3.x的 六.完成之后回车 出现以下界面 七.回车 出现以下界面 八.回车出现以下界面 九.回车出现以下界面 十.回车出现以下界面 十一.回车出现以下界面 十二.根据提示,启动项目 一.搭建vue环境 安装Nodejs 官网下载Nodejs,如果希望稳定的开发环境则下LTS(Long Time Support)长期支持版,稳定
-
C语言文件操作零基础新手入门保姆级教程
目录 一.前言 二.文件操作基础知识 ①什么是文件 ②数据文件类型 ③数据如何存储 ④如何读取二进制文件 ⑤什么是文件名 ⑥文件缓冲区 ⑦文件指针 三.文件操作函数 ①fopen 与 fclose ②fputc与fgetc ③fputs与fgets ④fprintf与fscanf ⑤fwrite与fread ⑥fseek与ftell与rewind ⑦ferror与feof ⑧补充函数 sscanf sprintf ⑨补充函数perror strerror 总结 一.前言 我们如何使我们设计的程
-
Android Rreact Native 常见错误总结
Android Rreact Native 常见错误总结 1.invariant violation:expected a component class,got[object object] 创建自定义组件首字母要大写,否则会报错. 2.Module 0 is not a registered callable module. 将gradle升级成最新版本(cd Android 进入android目录执行:sudo ./gradlew clean) 或者通过android studio工具升级
-
Android Studio 新手入门教程（一）基本设置图解
##写在前面: 作为一个刚半只脚踏入android开发的新手,在使用eclipse开发了两个自我感觉不甚成熟的商城类app之后,遇到了一些问题,总结为如下: 1.代码复用性 .findviewById,onclick事件等,一遍遍重复这类无聊的代码简直浪费生命,这个问题推荐通过依赖注入框架ButterKnife解决,直接一键生成布局中的所有控件,包括onclick点击事件,但是诸如行布局item里的控件,以及布局中include复用的布局要如何使用框架解决,这个有待后续再看. 另一个代码重复率很
-
android studio 新手入门教程（二）项目的导入教程图解
上篇文章介绍了AS的一些常用设置方法,当工具调教妥当后,自然就要开始项目的开发啦.从零开始新建一个项目,这个简单,不必多说,这篇博客会分享我从旧平台eclipse导入项目到AS的过程,以及遇到的一些问题并如何解决.开篇先粗略的提一些需要注意的地方. ##结构目录 和eclipse不同,在android 视图下的项目目录分为java,res和manifests. manifests目录存放清单文件,不必多说. java目录会默认生成三个文件夹,其中test为在本机执行单元测试代码的目录, andr