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组件生成文档的呢?当然是有的的.但第三方使用起来不一定能和现有项目结合使用,往往需要额外的注释用来标记提取信息.使用 ...
随机推荐
- python3.6:AttributeError: 'generator' object has no attribute 'next'
环境:PyCharm+Anaconda python版本:3.6 协程测试: #!/usr/bin/env python # -*- coding:utf-8 -*- import time def ...
- 关于sizeof的几个问题
#include <stdio.h> #include <stdlib.h> int main(int argc, char const *argv[]) { char *ps ...
- Vue中组件间传值常用的几种方式
版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...
- springmvc 异常统一处理的三种方式详解
1 描述 在J2EE项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都不可避免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦 ...
- Android面向切面编程(AOP)(转)
转自:https://www.jianshu.com/p/aa1112dbebc7 一.简述 1.AOP的概念 如果你用java做过后台开发,那么你一定知道AOP这个概念.如果不知道也无妨,套用百度百 ...
- java 方法的定义与调用
/* 定义一个方法的格式: public static void 方法名称(){ 方法体 } 方法名称的命名规则和变量一样,使用小驼峰 方法体:也就是大括号里面的可以包含任何语句 注意事项: 1.方法 ...
- 网络编程NIO-异步
异步I/O是没有阻塞地读写数据的方法.通常在代码进行read调用时,代码会阻塞直至可供读取的数据.同样,write调用将会阻塞直至数据能够写入. 1.selector是一个对象,可以注册到很多个cha ...
- Electron-vue实战(二)— 请求Mock数据渲染页面
Electron-vue实战(二)— 请求Mock数据渲染页面 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.环境搭建 1.安装Mock.js 如果仅仅用作脱离后台的模拟数据,就安装在 ...
- 使用pytorch测试单张图片(test single image with pytorch)
以下代码实现使用pytorch测试一张图片 引用文章: https://www.learnopencv.com/pytorch-for-beginners-image-classification-u ...
- 【leetcode】421. Maximum XOR of Two Numbers in an Array
题目如下: 解题思路:本题的难点在于O(n)的复杂度.为了减少比较的次数,我们可以采用字典树保存输入数组中所有元素的二进制的字符串.接下来就是找出每个元素的异或的最大值,把需要找最大值的元素转成二进制 ...