vue2.0的基本特性
本文目前总结的特性如下
1.侦听属性和计算属性
2.class的绑定
3.条件渲染时的注意事项
4.v-if和v-for同时使用的注意事项
5.插槽
6.ref,父组件调用子组件的另一种方式
7.<keep-alive>标签
侦听属性和计算属性
计算属性computed
假设有A、B两个变量,B的值依赖于A,B=A的平方
<p>A的值:{{A}}</p>
<p>A的平方:{{B}}</p>
//B的值依赖于A,当A发生改变时B也会改变
computed:{
B(){
//这个方法在A发生改变时会触发,返回值传给B
return A*A
}
}
当计算很简单的时候,可以直接使用{{A*A}}来代替计算属性。
可是当计算变得逻辑变得复杂时,如果嵌套在template的表达式并不适用于这种方法,而且这样会使代码的可读性变差,难以维护
而且使用计算属性是有缓存的,只有当A发生改变时,才会再次触发
watch侦听属性
watch的功能computed类似,watch的方法在监听的属性改变时触发
watch:{
A(){
this.B = A*A;
}
}
class的动态修改
当一个元素的样式需要根据数据来动态改变时,使用:class属性
<div :class="{类名:变量}"></div>,类名是否存在取决于变量值是否为真
当元素有多个样式时:
<div :class="['类1',{'类名2':变量2}]">
类名也可以用计算属性来监听:
isEnoug为true,class="cartLeast unEmpty" 否则class="cartLeast"
<div :class="classObj"></div>
computed:{
classObj(){
let classArr = ['cartLeast'];
if(this.isEnough){
classArr.push('unEmpty');
}
return classArr;
}
}
在引用组件的时候增加class,这是组件child的类名有a,b两个
<template><div class="a"></div></template>
<child class="b"></child>
条件渲染时的注意事项
vue为了高性能渲染,一般会复用已渲染过的标签。
假如有一个登录框,根据选择的登录方式切换input,一个是手机登录,一个是邮箱登录。因为vue会复用原来已有的input,所以当你切换到邮箱登录时,input里还会保存有手机登录时的内容,这显然是不符合条件的。
通过在input上添加key可以区别元素
<div class="" v-if="isSeen">
<input type="text" name="" value="" placeholder="enter a" key="a">
</div>
<div class="" v-else>
<input type="text" name="" value="" placeholder="enter b" key="b">
</div>
<div class="" @click="isSeen=!isSeen">
toggle
</div>
data:{
isSeen:true
}
当同时使用v-for和v-if的注意事项
v-for的优先级是高于v-if的,当只需要渲染满足一些特点条件的元素时,是很有效的
但是当需要全部渲染时,把v-if放在外面
<div v-if="{{a}}"><div v-for="item in list"></div></div>
原文地址:https://segmentfault.com/a/1190000016679712
vue2.0的基本特性的更多相关文章
- 项目vue2.0仿外卖APP(六)
goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...
- 项目vue2.0仿外卖APP(五)
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
- Vue2.0环境搭建和测试demo
Vue2.0 推荐开发环境 Homebrew 1.0.6(Mac).Node.js 6.7.0.npm 3.10.3.webpack 1.13.2.vue-cli 2.4.0.Atom 1.10.2 ...
- Webpack+vue2.0如何注册全局组件 (01)
Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程
缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单
前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...
- vue2.0 微信分享
需求:首页,列表页,详情页的分享,活动页分享并进行相关操作,比如分享一次活动次数加1 首先:阅读微信开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_ ...
- 重开Vue2.0
目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...
随机推荐
- D - Fliptile
#include <stdio.h> #include <iostream> #include <math.h> #include <algorithm> ...
- ZROI #365. 【2018普转提day18专题】嘤嘤嘤嘤
ZROI #365. [2018普转提day18专题]嘤嘤嘤嘤 直接放代码 具体做法见注释 #include<stdio.h> #include<cstring> #inclu ...
- Gym - 101810A ACM International Collegiate Programming Contest (2018)
bryce1010模板 http://codeforces.com/gym/101810/problem/A 大模拟,写崩了,代码借队友的...... 注意处理段与段的连接问题: #include&l ...
- 用python将多个文档合成一个
可以参考下以下网址(读写文件):https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/ ...
- json数据有换行符时提交不成功的坑
这是在有多行文本框表单提交时遇到的问题.. 整理所有的表达数据,合并到一个json中然后jsonp方式提交给后端时,发现只要有换行符,总是提交失败. 目前的解决办法就是在合并数据的时候把换行\n替换为 ...
- hdu1754I Hate It(splay)
链接 线段树的水题,拿来学习一下splay. 本题涉及到求最大值以及单点更新,折腾了许久,差不多把splay搞明白了. 按位置建树,按位置是一颗排序二叉树,对于区间的操作非常方便,每次操作都将需要的结 ...
- Partition(线段树的离线处理)
有一点类似区间K值的求法. 这里有两颗树,一个是自己建的线段树,一个是题目中给定的树.以线段树和树进行区分. 首先离散化一下,以离散化后的结果建线段树,线段树的节点开了2维,一维保存当前以当前节点为权 ...
- pm2日志切割
此为pm2 日志按每天切割的示例 1.在crontab里添加定时任务 * * * >& 2.cutlog.sh 代码内容 #!/bin/bash CURPATH="/var/l ...
- 阻塞 io 非阻塞 io 学习笔记
阻塞 io 非阻塞 io 学习笔记
- [BZOJ1047][HAOI2007]理想的正方形 二维单调队列
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1047 我们对每矩阵的一列维护一个大小为$n$的单调队列,队中元素为矩阵中元素.然后扫描每一 ...