本文目前总结的特性如下
1.侦听属性和计算属性
2.class的绑定
3.条件渲染时的注意事项
4.v-if和v-for同时使用的注意事项
5.插槽
6.ref,父组件调用子组件的另一种方式
7.<keep-alive>标签


侦听属性和计算属性

计算属性computed
假设有A、B两个变量,B的值依赖于A,B=A的平方


&lt;p&gt;A的值:{{A}}&lt;/p&gt;
&lt;p&gt;A的平方:{{B}}&lt;/p&gt;
//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可以区别元素


&lt;div class="" v-if="isSeen"&gt;
&lt;input type="text" name="" value="" placeholder="enter a" key="a"&gt;
&lt;/div&gt;
&lt;div class="" v-else&gt;
&lt;input type="text" name="" value="" placeholder="enter b" key="b"&gt;
&lt;/div&gt;
&lt;div class="" @click="isSeen=!isSeen"&gt;
toggle
&lt;/div&gt;
data:{
isSeen:true
}

当同时使用v-for和v-if的注意事项

v-for的优先级是高于v-if的,当只需要渲染满足一些特点条件的元素时,是很有效的
但是当需要全部渲染时,把v-if放在外面


&lt;div v-if="{{a}}"&gt;&lt;div v-for="item in list"&gt;&lt;/div&gt;&lt;/div&gt;

原文地址:https://segmentfault.com/a/1190000016679712

vue2.0的基本特性的更多相关文章

  1. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  2. 项目vue2.0仿外卖APP(五)

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

  3. 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 ...

  4. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  5. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战:Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

  8. vue2.0 微信分享

    需求:首页,列表页,详情页的分享,活动页分享并进行相关操作,比如分享一次活动次数加1 首先:阅读微信开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_ ...

  9. 重开Vue2.0

    目录: 内容: 一.Vue内部指令: 1.v-if v-else&v-show v-if与v-show都是选择性显示内容的指令,但是二者之间有区别: 1.v-if:判断是否加载,在需要的时候加 ...

随机推荐

  1. mysql ERROR 2003 (HY000): Can't connect to MySQL server on '' (10060

    关闭防火墙即可连接成功: systemctl stop firewalld

  2. 自定义的cell上面有图片时,如果产生了重用,图片可能会错乱问题

    当被重用的cell将要显示时,会调用这个方法,这个方法最大的用武之地是当你自定义的cell上面有图片时,如果产生了重用,图片可能会错乱(当图片来自异步下载时及其明显),这时我们可以重写这个方法把内容抹 ...

  3. 简单总结ConcurrentHashMap

    一.HashTable hashTable是一个线程安全的容器,是线程安全版本的HashMap.但它的底层是和HashMap一样的,只是在方法上都加上了synchronized关键字. 这样子有什么后 ...

  4. VMware的linux虚拟机实现和windows的文件共享

    使用的centos7和windows10,在虚拟机centos7中是root身份.由于是第一次用没有界面的linux,可谓是困难重重…… 一 打开VMware,然后选中你的虚拟机,我的是centos7 ...

  5. libev 使用

    观察器 IO ev_io_init (ev_io *, callback, int fd, int events) ev_io_set (ev_io *, int fd, int events) I/ ...

  6. Nginx 开启目录浏览功能配置

    在server节点下添加 server { listen ; server_name default; #index index.php; # 目录浏览功能 autoindex on; # 显示文件大 ...

  7. 開玩樹莓派(二):配置IP,實現無顯示器局域網內Putty連接和RDP遠程

    目錄: 開玩樹莓派(一):安裝Raspbian系統 開玩樹莓派(二):配置IP,實現無顯示器局域網內Putty連接和RDP遠程 開玩樹莓派(三):Python編程 開玩樹莓派(四):GPIO控制和遠程 ...

  8. SQL Server插入中文数据出现乱码问题

    我在用sql server存储数据的时候发现中文全变成了问号,我知道中文是特殊的编码.所以在数据库设计的时候包含中文的字段就是nvarchar,但是还是成了问号 好了,不多说了,解决方案如下: 在存储 ...

  9. leetcode128 Longest Consecutive Sequence

    思路: 维护一个unordered_map,key是每个连续区间的端点,value是该区间的长度. 实现: class Solution { public: int longestConsecutiv ...

  10. -bash: mail: command not found

    近日,安装了一个最小化的centos 6.3 6,用mail发送邮件进行测试的时候提示-bash: mail: command not found mailx没有安装,于是: yum -y insta ...