在这里总结一下学习Vue遇到的易错点,持续更新

1.实例化一个Vue对象:

通过new Vue({

el:'#id',

data:{

a:'字符串1',

b:‘字符串2’

})

这里的Vue必须大写V!小写v是行不通的,刚开始没注意,多次实例化失败!

2.v-text属性

<div id="app2" v-text="message">

<input v-model="message" />
             <hello></hello>

</div>

父元素定义了v-text属性,那么内部添加的各种标签内容都不会显示了,只显示{{message}}

等同于:

<div id="app2">

{{message}}

</div>

3.由于ID的唯一性,相同ID定义的组件只能用一次

<div id="app" >
     {{message}}
  </div>
  <div id="app" v-text="message">
  </div>

上面用ID=“app”定义的组件,第二个是不会显示的。

4.v-for指令的列表渲染

  <div v-for="(value, key) in object">
     {{ key }}: {{ value }}
  </div>
  <div v-for="(key, value) in object">
     {{ key }}: {{ value }}
  </div>
仔细看这两个组件的v-for指令部分,虽然div内部的内容都是希望以“key:value”的方式展现出来,
但是只有上面v-for指令的写法才会“正确”的显示我们所想看到的键值对,
下面的写法最终会以“value:key”的方式显示。
 
5.数据绑定---数据源与变量的唯一性
最近在为轮播图插件绑定数据的时候遇到的:
在这里每个数据源赋值给了唯一变量,但是l1、l5两个变量在html里用了两次,造成页面最终无法渲染;
在这里每个变量都是唯一的,但是5.jpg、1.jpg这两个数据源都被赋值两次,造成页面最终无法渲染;
这是我最终的写法。
ps:将7张图片分成两个div然后分别绑定数据我也试过,html依旧无法渲染。
最后总结:在同一组件内变量是唯一的,而数据源在整个html文件内都是唯一的。
 
6.
 

Vue--学习过程中遇到的坑的更多相关文章

  1. 使用python requests库写接口自动化测试--记录学习过程中遇到的坑(1)

    一直听说python requests库对于接口自动化测试特别合适,但由于自身代码基础薄弱,一直没有实践: 这次赶上公司项目需要,同事小伙伴们一起学习写接口自动化脚本,听起来特别给力,赶紧实践一把: ...

  2. golang 学习过程中踩的坑

    目录 [他人总结] 首字母大写才是对外可见的 包的初始化函数顺序问题 DB 连接泄漏问题 err 常用写法 goroutine 内的变量 指针可能是 nil 多层 map 未初始化 [他人总结] ht ...

  3. java学习过程中遇到的坑及解决方法

    1. Table 'my_data_base.gjp_zhangwu' doesn't exist Query: select * from gjp_zhangwu Parameters: 数据库中的 ...

  4. python学习过程中的踩坑记录<若干,随时更新>

    问题1:python中print的连串输出与java不一样? 输入print(code +"+++"); --在代码中写入,界面未报错,但是告诉你不行 会报错,如图: 解决办法: ...

  5. vue中的css作用域、vue中的scoped坑点

    一.css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.导致在css中需要加上对应模块的html的id/class ...

  6. maven build和push image中遇到的坑(学习过程记录)

    最近在做jenkins的持续集成构建,其中一项是要实现docker容器化部署.项目本身是maven项目,我对于maven和docker都没有什么认知基础,于是求助百度和官网,从头开始啃起.遇到了不少的 ...

  7. Jmeter学习过程中遇到的那些坑

    开个新帖,持续记录学习jmeter过程中遇到的坑... (1)出师不利 由于公司的产品都是客户端模式,所以所有的接口测试都从获取access-token开始.妹的...上来就是一个坑... 一开始的配 ...

  8. vue中遇到的坑

    如何解决在vue中替换图片.一个使用base64,而我们使用zepto之后,src找不到资源,因为已经打包了,难道强行写base64. 1. 引入文件时语法很重要! import "Foot ...

  9. vue入坑教程(二)在vue项目中如何导入element以及sass

    在项目中导入element以及sass.stylus等方便开发的工具以及UI框架 (1)如何在vue项目中导入elementUI框架 elementUI是饿了么团队开发出来基于vue的前端UI框架,其 ...

  10. Vue基础系列(三)——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

随机推荐

  1. JDK6和JDK7中String的substring()方法及其差异

    翻译人员: 铁锚 翻译日期: 2013年11月2日 原文链接: The substring() Method in JDK 6 and JDK 7   在JDK6与JDK7这两个版本中,substri ...

  2. Linux IPC实践(7) --Posix消息队列

    1. 创建/获取一个消息队列 #include <fcntl.h> /* For O_* constants */ #include <sys/stat.h> /* For m ...

  3. 精通mysql之精通EXPLAIN

    EXPLAIN列的解释: table:显示这一行的数据是关于哪张表的 type:这是重要的列,显示连接使用了何种类型.从最好到最差的连接类型为const.eq_reg.ref.range.indexh ...

  4. SMEM介绍

    SMEM :shared memory,是高通平台各子系统共享信息的一种机制,通过SMEM机制,PBL可以将信息传递给SBL1,SBL1可以将信息传递给RPM.LK.下面分析一个SMEM信息传递的具体 ...

  5. C++ Primer 有感(复制控制)

    1.不管类是否定义了自己的析构函数,编译器都 自动执行类中非static数据成员的析构函数. 2.如果我们没有定义复制构造函数,编译器就会为我们合成一个.合成复制构造函数的行为是,执行逐个成员初始化, ...

  6. 【算法导论】图的深度优先搜索遍历(DFS)

    关于图的存储在上一篇文章中已经讲述,在这里不在赘述.下面我们介绍图的深度优先搜索遍历(DFS). 深度优先搜索遍历实在访问了顶点vi后,访问vi的一个邻接点vj:访问vj之后,又访问vj的一个邻接点, ...

  7. pyhton exit

    exit("0") is normally out, and means "successful termination" exit("1" ...

  8. ubuntu中taglist和ctags安装使用

    1.使用命令安装ctags: 2.安装taglist 下载: http://vim.sourceforge.net/scripts/download_script.php?src_id=6416 拷贝 ...

  9. windows下追踪路由

    追踪路由 tracert   目标ip/域名 测试两个ip是否畅通 ping    目标ip 在windows查看ip情况 ipconfig linux/unix下查看ip情况的使用 ifconfig

  10. Hadoop 的 TotalOrderPartitioner

    Partition所处的位置 Partition位置 Partition主要作用就是将map的结果发送到相应的reduce.这就对partition有两个要求: 1)均衡负载,尽量的将工作均匀的分配给 ...