在前端开发全面进入前端的时代 作为一个合格的前端开发工作者 框架是不可或缺的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

Vue报错 [Vue warn]: Cannot find element的更多相关文章

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

    vue浏览器报错,如下 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-Link> - di ...

  2. vue报错[Vue warn]: The data property "record" is already declared as a prop. Use prop default value instead.

    当我写了一个子组件,点击打开子组件那个方法时报了一个错 这句话说明意思呢?谷歌翻译一下↓ 数据属性“record”已声明为prop. 请改用prop默认值. 感觉翻译的有点怪,通过最后修改代码后大概意 ...

  3. vue报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's

    [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...

  4. Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

    场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...

  5. Vue 报错Error in render: “TypeError: Cannot read properties of null (reading ‘xxx’)” found in

    前端vue报错 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'name' ...

  6. Vue报错 type check failed for prop “xxx“. Expected String with value “xx“,got Number with value ‘xx‘

    vue报错    [Vue warn]: Invalid prop: type check failed for prop "name". Expected String with ...

  7. Vue报错——“Trailing spaces not allowed”

    在VSCode中开发Vue 报错:“Trailing spaces not allowed” 这是空格多了,删除多余的空格就可以了

  8. vue报错Error in render: "TypeError: Cannot read property '0' of undefined"

    通常有两种情况: 1.在模板的html标签上使用length报错 vue 中使用 length判断的时候,有时会报错,如下: <div class="item_list" v ...

  9. vue 报错 ：属性undefined（页面成功渲染）

    vue 报错:Cannot read property 'instrumentId' of undefined" 相关代码如下: <template> ... <span& ...

随机推荐

  1. RecycleView + SwipeRefreshLayout 实现下拉刷新和底部自动加载

    前段时间项目里面使用了RecycleView 但是里面的刷新和加载都是框架里面封装好的,直接使用 这几天比较闲就自己来实现以下. 因为SwipeRefreshLayout是一个下拉刷新控件所有直接和R ...

  2. C++中char*与wchar_t*之间的转换

    http://blog.163.com/tianshi_17th/blog/static/4856418920085209414977/ 关于C++中的char*与wchar_t*这两种类型的相互转换 ...

  3. jmeter简单录制

    JMeter介绍 1.JMeter,一个100%的纯Java桌面应用,它是Apache组织的开放源代码项目,它是功能和性能测试的工具.JMeter可以用于测试静态或者动态资源的性能(文件.Servle ...

  4. Gson 转换hibernate级联对象出现StackOverFlow（堆栈溢出）问题

    < many-to-one>和< one-to-many>属性的对象级联关系在转换时会造成死循环,报stackOverFlowException. 比如下面这段: @OneTo ...

  5. SQL Server ->> 重新创建Assembly和自动重建相关的数据库编程对象（存储过程，函数和触发器）

    在SQL Server中,一旦一个Assembly被其他的数据库编程对象(存储过程,函数和触发器)引用了,这个Assembly就不能被删除.但是问题是,在SQL Server要更新一个Assembly ...

  6. python 02/100例

    题目 输入某年某月某日,判断这一天是这一年的第几天? 分析 例如:2018年6月19日 天数 = 19天 + 一月天数 + 2月天数 + ... + 6月天数 注意 闰年的2月是29天,如果年份是闰年 ...

  7. 【Leetcode】【Easy】Valid Sudoku

    Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku board could be ...

  8. 在同一网关下ping不通其他电脑

    最近在做数据库相关的程序,所以想先用ping试下和主机连没连着,但发现虽然两台电脑在同一网关下,但却互相ping不通,后来才发现,原来是防火墙在作怪. Omg!感慨一下!默认的情况下,保守的windo ...

  9. Git/Github Learning

    通过网上查找资料,我了解到Git/Github是一款免费.开源的分布式版本控制系统,它可以敏捷高效地处理任何或小或大的项目.同时,它是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的 ...

  10. Python简单介绍以及Python环境搭建(入门1)

    转载请标明出处: http://www.cnblogs.com/why168888/p/6400694.html 本文出自:[Edwin博客园] Python 简单介绍 适合领域: Web网站和各种网 ...