本文目前总结的特性如下
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. PostgreSQL - 模糊查询

    前言 like.not like在SQL中用于模糊查询,%表示任意个字符,_表示单个任意字符,如果需要在模糊查询中查询这两个通配符,需要用ESCAPE进行转义,如下: select * from ta ...

  2. sublime text 插件的删除方法

    1.ctr+shift+P,输入Package Control: Remove Package 2.回车, 3.出现一个弹出框,输入你要删除的package 4.回车,OK!!!

  3. django_uWSGI+nginx环境

    1 uWSGI 作用 Django 默认使用的是 Python 自带的 simple HTTPServer 提供web服务的,在安全性和效率上都是不行的,只能用作django开发测试. WSGI是一个 ...

  4. python入门之实例-用户登录、注册

    用户密码存储文件db(其中用户和密码之间用$符合隔开): admin$123456 root$sdfk9f24 chy$654321 代码如下: def login(username,password ...

  5. 113 Path Sum II 路径总和 II

    给定一个二叉树和一个和,找到所有从根到叶路径总和等于给定总和的路径.例如,给定下面的二叉树和 sum = 22,              5             / \            4 ...

  6. Unity Shader入门精要学习笔记 - 第14章非真实感渲染

    转载自 冯乐乐的 <Unity Shader 入门精要> 尽管游戏渲染一般都是以照相写实主义作为主要目标,但也有许多游戏使用了非真实感渲染(NPR)的方法来渲染游戏画面.非真实感渲染的一个 ...

  7. Perl的Notepad++环境配置

    Notepad++打开pl文件F5录入命令分别保存. Run_Perl(F9): cmd /k F:\Strawberry\perl\bin\perl.exe -w "$(FULL_CURR ...

  8. ES-windos环境搭建(2)

    下载 打开elasticsearch官网.选择downloads. 选择elasticsearch,并单击Download. 这里我们不选择最新版,而是选择靠前的版本,下拉选择past release ...

  9. Selenium私房菜系列9 -- Selenium RC服务器命令行参数列表【ZZ】

    本文转载自:http://wiki.javascud.org/display/SEL/Selenium+Remote+Control+-+options 使用示例: java -jar seleniu ...

  10. MyBatis插入数据之后返回插入记录的id

    MyBatis插入数据的时候,返回该记录的id<insert id="insert" keyProperty="id" useGeneratedKeys= ...