vue踩坑记

易错点

语法好难啊qwq

  • 不要把'data'写成'date'
  • 在v-html/v-bind中使用vue变量时不需要加变量名
  • 在非vue事件中使用vue中变量时需要加变量名
正确
<div id="vue">
<button onclick="vm.ColorRed=vm.ColorRed^1">gg</button>
<div v-html="site" v-bind:class="ColorRed ? MyClass : TwoClass"></div>
</div>
错误
<div id="vue">
<button onclick="ColorRed=ColorRed^1">gg</button>
<div v-html="site" v-bind:class="ColorRed ? MyClass : TwoClass"></div>
</div>
  • vue结构内赋值使用:,不要写成=
data : {
answer: "123",
inputval: "1234",
},
  • 使用v-html,v-bind, v-modelv前缀赋值时使用=
<div id="vue_work_area">
<input v-model="inputval">
<button v-on:click="work">print</button>
<p>{{answer}}</p>
</div>
  • component注册时Vue首字母必须大写
Vue.component('attack',{
template: '<h1>attack caiji</h1>'
});
  • 在methods内部调用变量名时需要在前面加上this.

methods与computed

computed与methods的区别在于:使用computed的计算时,只有当对象发生改变时才会重新计算,而methods没有缓存

示例链接

<div id="vue">
<input v-model="str">
<p>{{ans()}}</p> <!--这里的ans是函数,需要加括号-->
<p>{{reans}}</p>
</div>
<script>
var vm = new Vue({
el: '#vue',
data: {
str: "",
},
methods: {
ans: function() {
return this.str.split('').reverse().join('');
}
},
computed: {
reans: function() {
return this.str.split('').reverse().join('');
}
},
})
</script>

vue踩坑记的更多相关文章

  1. vue踩坑记,持续更新中......

    1.运行项目报错 you may use special comments to disable some waring. use //eslint-disable-next-line.....吧啦吧 ...

  2. Vue 踩坑记

    参考: https://forum.vuejs.org/t/unknown-issues-in-change-event-of-radio-in-vue-2-x-webpack-2-x/11034 v ...

  3. vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modu ...

  4. vue踩坑记- Cannot find module 'wrappy'

    找不到模块"包装" 当你维护别人的项目代码的时候,在自己这里电脑上运行,打开一个项目cnpm run dev的时候,报错如下 Cannot find module 'wrappy' ...

  5. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  6. djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记

    情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...

  7. [技术博客] 敏捷软工——JavaScript踩坑记

    [技术博客] 敏捷软工--JavaScript踩坑记 一.一个令人影响深刻的坑 1.脚本语言的面向对象 面向对象特性是现代编程语言的基本特性,JavaScript中当然集成了面向对象特性.但是Java ...

  8. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  9. Spark踩坑记——数据库(Hbase+Mysql)

    [TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...

随机推荐

  1. TestNG Suite 运行出现中文乱码如何解决

    场景: 用TestNG框架运行测试类,控制台视图输出出现中文乱码. 解决方案: 1.eclipse属性>workspace>other>utf-8 2.修改eclipse.ini 文 ...

  2. 共享文件 Ubuntu下安装Samba与Windows

    Author:Xianghai Ding.Date:2019/01/08**************************************************************安装 ...

  3. awk命令使用经验

    1.为什么要使用awk 举一个简单的例子,作为一个java开发人员,在查看日志服务器(即时保存所有线上环境的日志)上的日志的时候,由于部署了服务的服务器不止一台,当想要查找某一个特定信息的时候,由于不 ...

  4. 初识python爬虫框架Scrapy

    Scrapy,按照其官网(https://scrapy.org/)上的解释:一个开源和协作式的框架,用快速.简单.可扩展的方式从网站提取所需的数据. 我们一开始上手爬虫的时候,接触的是urllib.r ...

  5. python发送邮件心得体会

    利用本地smtp server发送 windows下尝试装了两个smtp server大概配置了下,发现没法生效,也没时间仔细研究了.装上foxmail发现以前可以本地发送的选项已经无法找到. 不带附 ...

  6. 深入理解Java虚拟机8-chap12-13-斗者5星

    一.操作系统与内存 通过在处理器与内存之间添加一层访问及更新速度更快的高速缓存,可以一定程度解决处理器与内存速度的矛盾 引入新问题:缓存一致性,即每个处理器只与自己的缓存交互,如果操作的是内存中的同一 ...

  7. 中国省市区json数据 三级联动

    <label> <span>购买地址</span> <select name="PurchaseProvince" style=" ...

  8. object tracking 词汇积累

    1. off-the-shelf adj. 现成的:常备的:成品的 adv. 现成地:无需作重大修改地 commercial off-the-shelf商用现货商规成品商业货架产品供应 off-the ...

  9. HTTP笔记1

    传输层:提供进程地址 TCP:传输控制协议,面向连接的协议:通信前需要建立虚拟链路:结束后拆除链路.端口号:0-65535 UDP:用户报文协议,无连接的协议.端口号:0-65535 IANA(互联网 ...

  10. 2017-2018-2 20155228 《网络对抗技术》 实验五:MSF基础应用

    2017-2018-2 20155228 <网络对抗技术> 实验五:MSF基础应用 1. 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需 ...