vue 笔记

最新推荐文章于 2020-11-10 22:41:57 发布

尤里卡的诅咒

最新推荐文章于 2020-11-10 22:41:57 发布

阅读量247

点赞数

分类专栏：软件设计师文章标签： vue

软件设计师专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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事件