vue 学习总结

原创 qiao 随笔 学习 267阅读 2019-01-16 19:52:31 举报

实例:

总结:
一、常用指令
1、v-if
显示与否,true时显示,false时不显示

若在<template>元素上使用v-if条件渲染,最终的渲染结果不包含<tenplate>元素

v-else 元素必须紧跟在 v-if 或者 v-else-if 的元素后面,否者它将不会被识别
v-else-if 用法同 v-if ,可连续使用

2、v-show
展示元素

使用v-show的元素,始终会被渲染保留在 DOM 中,只是改变元素 css 的display
注:v-show不支持<template>元素

3、v-bind
响应式更新html特性,class和style绑定(可简写)

4、v-on
绑定事件(可简写)

5、v-model
双向数据绑定

6、v-for

二、配置
1、watch 监测 data
2、created 创建完成之后触发
3、methods 绑定方法

三、computed 计算属性(属性为get(默认),set)
示例:

结果:
Original message: "Hello"
Computed reversed message: "olleH"

这里还可以通过调用方法来达到同样的效果

计算属性可以替换methods和watch,通过依赖的缓存计算值,减少数据的重复计算
1)属性:

计算属性computed和调用方法methods的区别:
2)computed有缓存,依赖不变的情况下,使用reversedMessage,取的都是缓存的值,不进行重复计算;而后者,每次调用的时候都会重新计算,
四、侦听器
五、v-bind绑定 HTLML Class
1、对象语法:
1)内联定义在模板里(操作中发现,类名中包含“-”时,需要引号引起来,下划线就不需要)

2)不定义再模板中
3)通过计算属性绑定
4)数组语法

写法一:

写法二:

六、组件
示例:

1、组件可复用(多次使用 <button-counter>标签),因为每用一次组件,就睡创建一个实例,所以每个组件都会各自独立维护它的 count。
2、组件的data必须是一个函数(因此每个实例可以维护一份呗返回对象的独立的拷贝)

注:类名与data中不对应的时候,可能会直接注释掉html代码。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复