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:判断是否加载,在需要的时候加 ...
随机推荐
- PostgreSQL - 模糊查询
前言 like.not like在SQL中用于模糊查询,%表示任意个字符,_表示单个任意字符,如果需要在模糊查询中查询这两个通配符,需要用ESCAPE进行转义,如下: select * from ta ...
- sublime text 插件的删除方法
1.ctr+shift+P,输入Package Control: Remove Package 2.回车, 3.出现一个弹出框,输入你要删除的package 4.回车,OK!!!
- django_uWSGI+nginx环境
1 uWSGI 作用 Django 默认使用的是 Python 自带的 simple HTTPServer 提供web服务的,在安全性和效率上都是不行的,只能用作django开发测试. WSGI是一个 ...
- python入门之实例-用户登录、注册
用户密码存储文件db(其中用户和密码之间用$符合隔开): admin$123456 root$sdfk9f24 chy$654321 代码如下: def login(username,password ...
- 113 Path Sum II 路径总和 II
给定一个二叉树和一个和,找到所有从根到叶路径总和等于给定总和的路径.例如,给定下面的二叉树和 sum = 22, 5 / \ 4 ...
- Unity Shader入门精要学习笔记 - 第14章非真实感渲染
转载自 冯乐乐的 <Unity Shader 入门精要> 尽管游戏渲染一般都是以照相写实主义作为主要目标,但也有许多游戏使用了非真实感渲染(NPR)的方法来渲染游戏画面.非真实感渲染的一个 ...
- Perl的Notepad++环境配置
Notepad++打开pl文件F5录入命令分别保存. Run_Perl(F9): cmd /k F:\Strawberry\perl\bin\perl.exe -w "$(FULL_CURR ...
- ES-windos环境搭建(2)
下载 打开elasticsearch官网.选择downloads. 选择elasticsearch,并单击Download. 这里我们不选择最新版,而是选择靠前的版本,下拉选择past release ...
- Selenium私房菜系列9 -- Selenium RC服务器命令行参数列表【ZZ】
本文转载自:http://wiki.javascud.org/display/SEL/Selenium+Remote+Control+-+options 使用示例: java -jar seleniu ...
- MyBatis插入数据之后返回插入记录的id
MyBatis插入数据的时候,返回该记录的id<insert id="insert" keyProperty="id" useGeneratedKeys= ...