Vue报错 [Vue warn]: Cannot find element
在前端开发全面进入前端的时代 作为一个合格的前端开发工作者 框架是不可或缺的Vue React Anguar 作为前端小白,追随大佬的脚步来到来到博客园,更新现在正在学习的Vue
注 : 相信学习Vue的都已经比较熟练的掌握了Js基础 ES6 jquery 日常代码调试 Node.js 环境 npm使用 不然学Vue可能比较吃力
推荐安装Vue的Chrome拓展程序方便调试代码(在谷歌商店搜索Vue 下载第一个)
vue官网指南 > https://cn.vuejs.org/v2/guide/index.html
vue在线库
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue -- Hello word
HTML代码:
<div id="app">
{{ message }}
</div>
js代码:
var app = new Vue({
el: '#app', //el指定位置 css选择器
data: {
message: 'Hello Vue!' //加载数据 app.message可以直接访问
}
})
看到这一步,可以确认我们打印出了第一行Vue代码,我们要怎么确认呢?打开你的浏览器的 JavaScript 控制台,并修改
app.message
的值,你将看到上例相应地更新
- 注意!!!!!!! 刚开始会遇到这样的错误
[Vue warn]: Cannot find element
为什么呢 ? 因为: 你的脚本是在目标dom元素被加载到dom之前执行
具体解释: 你已经将你的脚本放置在页面的头部或放置在div元素之前的脚本标记。所以当脚本执行时,它将无法找到目标元素,从而出现错误。
我的解决办法 将引用的Vue库 和main.js 放在代码的最后面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
</body>
<script src="vue.js"></script>
<script src="main.js"></script>
</html>
新手请勿踩坑
接下在就开始Vue学习了
参考 Vue官方文档 书籍:Vue.js实战 个人感觉文档说说的很好 但是细节说的并不多 在博客中也对小细节进行补充
实例与数据
Vue.js 的创建非常简单 ,使用构造函数Vue就可以创建Vue的根实例,并启动Vue实例
var app = new Vue({
el:"#app",
data:{}
//选项
})
变量app代表这个实例
事实上几乎 所有的代码都是一个对象,写入Vue的实例选项内
上面说的太正式了 说简单点 吧,首先说一下 el
与data
代表什么
- el : 用于指定一个页面已经存在的DOM (就是 id class) 来挂载Vue实例 可以使用js的DOM原生代码或者CSS选择器
- data : 可以理解为Vue用到的数据值
var app = new Vue({
el:"#app",//document.getElementById("app") 当然推荐css选择器写法啦
data:{
data:1 //html 的{{ data }} 就是 1
}
//选项
})
Vue特性 双向绑定
Vue.js很有特色的功能 不说太多 贴代码
<div id="app1">
<input type="text" v-model="my"> //v-model 双向绑定
{{ my }}
</div>
js:
new Vue({
el:"#app1",
data:{
my:"欢迎来到Vue"
}
})
在输入框内输入就是左边的input就会实时变化
虽然
v-model
虽然很像使用了双向数据绑定的 Angular 的ng-model
,但是 Vue 是单项数据流,v-model
只是语法糖而已 不过这不影响初学者使用,了解一下
今天就写这么多吧
2018-2-26 23:42
最新文章
- 谢欣伦 - OpenDev原创教程 - 本地IP查找类CxLocalHostIPAddrFind
- ionic cordova 热更新
- zw版【转发&#183;台湾nvp系列Delphi例程】HALCON HighpassImage
- Java从入门到精通——数据库篇之JAVA中的对Oracle数据库操作
- Python脚本控制的WebDriver 常用操作 <;十八>; 获取测试对象的css属性
- zzuli oj 1146 吃糖果
- openstack 集成显卡 对windroye 支持
- jquery事件之event.target用法详解
- python多字符中找出最大匹配(网友处学习)
- [BZOJ2339][HNOI2011]卡农
- Java-IO之FileDescriptor
- python可视化库 Matplotlib 01 figure的详细用法
- 由2个鸡蛋从100层楼下落到HashMap的算法优化联想
- asp.net mvc中的用户登录验证过滤器
- python拓展2 collections模块与string模块
- spring-boot前端参数单位转换
- openweathermap-免费的天气预报接口
- 在linux中禁用一块硬盘
- Presto通过RESTful接口新增Connector
- 在Azuer创建自己的Linux_VM
热门文章
- 使用angular帮你实现拖拽
- 3D开源推荐:全球卫星地图 Esri-Satellite-Map
- 【Mood-15】DailyBuild 1月
- ContentProvider启动浅析
- 向jsp页面传值时出现乱码
- python大数据
- Android学习——Fragment静态加载
- siebel 界面搭建
- 微软开源 PowerShell 并支持 Linux 和 OS X
- 启动eclipse出现“Error opening registry key &#39;software\Javasoft\Java Runtime Environment&#39;”