Vue.js文档学习
Vue细碎小点
生命周期钩子:created()、mounted()、updated()、destroyed()
不要在选项属性或回调上使用箭头函数,比如
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
{{}}双大括号语法,又叫'Mustache'语法,只能绑定单个表达式,不能是语句,或者流控制。
v-once v-html(容易导致XSS攻击,绝对不要对用户提供的内容使用插值)
? XSS攻击:全称为:跨站脚本攻击(Cross Site Scripting)
计算属性
对于任何复杂逻辑,你都应当使用计算属性。
// 属性reversedMessage的getter函数
computed: {
reversedMessage: function(){
return this.message.split('').reverse().join('')
}
}
计算属性是基于它们的依赖进行缓存的,只在相关依赖发生改变时它们才会重新求值。
Date.now()不是响应式依赖。
相比之下,每当出发重新渲染时,调用方法将总会再次执行函数。
侦听属性:watch(命令式的)
// 计算属性的setter
computed: {
fullName: {
// getter
get: function() {
return this.firstName + ' ' + this.lastName
},
//setter
set: function(newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
}
现在再运行 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
侦听器:
需要在数据变化时执行异步或者开销较大的操作时,这个方法最有用。
?绑定HTML Class:
<div v-bind:class="(active: isActive)"></div>
上面的语法表示这个class是否存在取决于数据属性isActive的值。其也可以与普通class属性共存。
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
绑定的数据对象不必内联定义在模板中,
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
或者我们可以绑定一个返回对象的计算属性。
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
数组:
应用一个class列表:
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
Vue.js文档学习的更多相关文章
- Vue.js文档
参考网址:https://vuefe.cn/ 第一 安装 1.下载到本地后使用<script>标签直接引入 2.使用CDN引入 例如:使用CDN引入 <script src=&qu ...
- EasyUI文档学习心得
概述 jQuery EasyUI 是一组基于jQuery 的UI 插件集合,它可以让开发者在几乎完全不需要CSS以及复杂的JS代码情况下完成美观且功能强大的Web界面. 本文主要说明一些如何利用Eas ...
- 解放生产力,自动化生成vue组件文档
一.现状 Vue框架在前端开发中应用广泛,当一个多人开发的Vue项目经过长期维护之后往往会沉淀出很多的公共组件,这个时候经常会出现一个人 开发了一个组件而其他维护者或新接手的人却不知道这个组件是做什么 ...
- gulpfile.js文档
gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...
- 使用node.js 文档里的方法写一个web服务器
刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...
- Spring文档学习
Spring文档学习 参考Spring Framework Documentation学习 1. IoC 容器 1.1 容器实例化 <beans> <import resource= ...
- Vue.js 源码学习笔记
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些.那么,就让我来吧:) 程序 ...
- vite插件-自动生成vue组件文档
特点 支持热更新 快速启动,依赖于 vite,无需另起服务 自动生成组件导航 ui 采用了vant-ui的样式 核心方法覆盖率达到了 92.86% 使用 yarn add vite-plugin-vu ...
- 打造自己的Vue组件文档生成工具
程序员最讨厌的两件事情,第一种是写文档,另一种是别人没有写文档.有没有直接根据vue组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用 ...
随机推荐
- 牛客网练习赛 2 烟花(概率dp)
题目传送门 烟花 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言524288K Special Judge, 64bit IO Format: %lld 题目 ...
- poj1285 Combinations, Once Again(泛化背包)
题目传送门 Combinations, Once Again Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1897 A ...
- Java面试之String、StringBuffer和StringBuilder的区别和原理
首先我们先来谈谈String: String 对象一旦创建,其值是不能修改的,如果要修改,会重新开辟内存空间来存储修改之后的对象,即修改了 String 的引用. 因为 String 的底层是用数组来 ...
- 开源图标字体 uiw-iconfont v1.2.6 发布,新增图标
uiw-iconfont v1.2.6 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体. 更新内容 新增 map android-o das ...
- 2019-1-28-WPF-高性能笔
title author date CreateTime categories WPF 高性能笔 lindexi 2019-1-28 14:21:5 +0800 2018-2-13 17:23:3 + ...
- How can I check the last time stats was run on Oracle without using OEM
All of the following data dictionary tables have a LAST_ANALYZED column (replace * with USER/ALL/DBA ...
- 你(可能)不知道的 web api
转自奇舞周刊 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法.用 ...
- @InitBinder 前端传递date时间类型属性时,转换错误问题
在Controller里加上这段代码 @InitBinder public void initBinder(WebDataBinder binder) { binder.registerCustomE ...
- mysql 存储引擎介绍2
了解MYSQL的都知道,在MYSQL中建立任何一张数据表,在其数据目录对应的数据库目录下都有对应表的.frm文件,.frm文件是用来保存每个数据表的元数据(meta)信息,包括表结构的定义等,.frm ...
- mysql的一个工具 mysql-utilities
mysql-utilities是mysql的一个工具集合,它是基于----- python2 --- 实现的,从官网查看到最新版本为mysql-utilities-1.6.5.tar.gz编译安装 w ...