vue 笔记
来源:互联网 发布:淘宝运营多少钱一个月 编辑:程序博客网 时间:2024/06/05 19:43
1.基本绑定:
new Vue(
{
el:’#elID’,
data:{
// data obj
},
computed:{
// computed obj
},
methods:{
// methods obj
},
}
);
2.指令:
前缀为v-
*v-if, v-for, v-bind, v-on…
*特性插值会转为v-bind绑定: href=’{{url}}’ –> v-bind:href=’url’
3.数据绑定只接受单个表达式:
{{number+1}} ok
{{ok?’yes’:’no’}} ok
{{message.split(”).reverse().join(”)}} ok
{{var a=1}} no
{{if(ok){return message}}} no
4.过滤器:
管道式的写法 –> {{message|capitalize}}
*可以串联: filterA|filterB
*可以带参数: filterA ‘arg1’ arg2
5.修饰符
前缀为.
*v-bind:href.literal=’a/b/c’
6.缩写
v-bind:href=’url’ –> :href=’url’
v-on:click=’dosomething’ –> @click=’dosomething’
7.计算setter
computed:{
fullName:{
get:function(){
// getter
}
set:function(newValue){
//setter
}
}
}
8.Class与Style绑定
*变量语法:v-bind:class=”{‘class-a’:isA, ‘class-b’:isB}” –> data:{isA:true, isB:false}
*对象语法:v-bind:class=”classObj” –> data:{classObj:{‘class-a’:true, ‘class-b’:false}}
*数组语法:v-bind:class=’[classA, classB]’ –> data:{classA:’class-a’, classB:’class-b’}
9.条件渲染
*v-if, v-show, v-else
*
Yes
No
*
Yes
No
*show只是简单的display:none
10.列表渲染
v-for
*内置变量:{{$index}}
*用法:v-for=’item in items’
v-for=’(index, item) in items’ *数组则是索引,遍历对象则是键
11.数组变动检测
能触发视图更新的方法:
*push, pop, shift, unshift, splice, sort, reverse // 变异方法
*filter, concat, slice // 替换数组
*尽可能复用DOM: track-by
v-for=”item in items” track-by=”_uid”
track-by=’$index’ // 根据index追踪,不是很明白!…片段不被移动,简单地已对应索引的新值刷新,也能处理数据数组中重复的值…
不能检测到以下变化: 1.直接用索引设置元素: vm.items[0]={}; // vue解决方案:vm.items.$set(0, { childMsg: 'Changed!'}), vm.items.$remove(item) 2.修改数据的长度: vm.items.length=0; // js中常见的清空, vue解决方案:直接用空数组替换
12.对象v-for
内置变量:$key
13.值域v-for
{{ n }}
14.内置的过滤器
filterBy 和 orderBy
15.方法与事件处理器
·v-on 监听DOM事件
- Vue笔记
- vue 笔记
- vue笔记
- Vue笔记
- Vue笔记
- Vue笔记
- vue笔记
- vue 笔记
- vue学习笔记:vue-router
- Vue.js学习笔记
- Vue.js 学习笔记
- Vue.js学习笔记
- VUE学习笔记
- Vue.js学习笔记
- vue.js 笔记
- Vue.js 实践笔记
- Vue学习笔记
- vue.js基础笔记
- web项目下的各种路径
- exception
- hitTest事件
- spring 的(注解)介绍
- 微信网页授权和部分公众号接口接入(详细流程介绍)
- vue 笔记
- android studio 模拟器没有logcat
- 分布式Session共享方案
- 恐惧:中年程序员会害怕丢掉工作吗?
- 机器学习中的数据预处理(sklearn preprocessing)
- 一个揭露动画的的折线图
- C# 获取当前程序运行路径
- Linux 自动任务生成数据
- 粒子群算法 的理解 伪代码版