vue一些注意事项
1.生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,经常导致
Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。2.
2.数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
3.如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。
4.Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化(https://cn.vuejs.org/v2/guide/instance.html)。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button @click="foo = 'baz'">Change it</button>
</div>
5.Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
6.
vue一些注意事项的更多相关文章
- vue项目注意事项
vue项目注意事项 1. 文件和路由命名规范 views里面代表的是你下面导航中的每一块,每个文件名 需要大写,路由命名全部小写,第一层路由就是最下面的那几个导航的名字,二级路由是在一 级路由的基础上 ...
- vue 学习注意事项
一:插值方式: 1:数据绑定,最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值 <span>Message: {{ msg }}</span> 通过使用 ...
- Vue.component注意事项
Vue.component前不要加 new,否则报错: Uncaught TypeError: Cannot read property '_base' of undefined
- Vue路由注意事项
一.vue中路由的使用 1.定义组件 <template> <div class="hello"> <h1 @click="info&quo ...
- vue todolist待办事项完整
<template> <div id="app"> <input type="text" v-model='todo' @keyd ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- vue.js学习 自定义过滤器使用(2)
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- 不一样的Vue实战3:布局与组件
不一样的Vue实战3:布局与组件 发表于 2017-06-05 | 分类于 web前端| | 阅读次数 11534 http://yangyi1024.com/2017/06/05/%E4%B ...
- vue-keep-alive
查看github源代码 https://github.com/Diamondjcx/vue-test Vue keep-alive实践总结 <keep-alive>是Vue的内置 ...
随机推荐
- luogu P4482 [BJWC2018]Border 的四种求法
luogu 对于每个询问从大到小枚举长度,哈希判断是否合法,AC 假的(指数据) 考虑发掘border的限制条件,如果一个border的前缀部分的末尾位置位置\(x(l\le x < r)\)满 ...
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- iOS H5页面打开APP技术总结
iOS端H5页面打开APP的方式目前主要有两种:URL Scheme和Universal Links.其中Universal Links是iOS9.0以后推出的一种新的方案,由于它需要在iOS9.0以 ...
- 利用selenium 爬取豆瓣 武林外传数据并且完成 数据可视化 情绪分析
全文的步骤可以大概分为几步: 一:数据获取,利用selenium+多进程(linux上selenium 多进程可能会有问题)+kafka写数据(linux首选必选耦合)windows直接采用的是写my ...
- Google浏览器显示URL的 http https ....
谷歌浏览器输入 chrome://flags/#omnibox-ui-hide-steady-state-url-trivial-subdomains 输入之后, 高亮部分选项 改为 Disabled ...
- ab测试工具的使用
下载地址:http://httpd.apache.org/download.cgi#apache24 编译安装后在安装目录bin下可以找到ab执行程序 基本用法: ab -n 5000 -c 1000 ...
- linux命令详解——vim
显示行号:命令模式下set nu 定位到指定行: 命令模式下,:n 比如想到第2行,:2 编辑模式下,ngg 比如想到第5行 5gg(或者5G) 打开文件定位到指定行 vim +n te ...
- Delphi PopupMenu组件
- vim编辑器学习
vim是一个非常强大的编辑器,看了很多文章能感受到它的强大,不过还需要不断地学习和使用来慢慢感受. 安装vim 在ubuntu 系统中使用 sudo apt-get install vim-gtk 安 ...
- Ext4文件系统修复
Ext4文件系统修复 目录 一. super block........................................................................ ...