自定义指令局部指令
-
局部指令,需要定义在 directives 的选项 用法和全局用法一样
-
局部指令只能在当前组件里面使用
-
当全局指令和局部指令同名时以局部指令为准
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<
input type
=
"text"
v
-
color
=
'msg'
>
<
input type
=
"text"
v
-
focus
>
<
script
type
=
"text/javascript"
>
/
*
自定义指令
-
局部指令
*
/
var vm
=
new
Vue
(
{
el
:
'
#app',
data
:
{
msg
:
{
color
:
'red'
}
}
,
/
/
局部指令,需要定义在 directives 的选项
directives
:
{
color
:
{
bind
:
function
(
el
,
binding
)
{
el.style.backgroundColor
=
binding.
value
.color;
}
}
,
focus
:
{
inserted
:
function
(
el
)
{
el.focus
(
)
;
}
}
}
}
)
;
<
/
script
>
- 计算属性 computed
-
模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
-
计算属性是基于它们的响应式依赖进行缓存的
-
computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<
div
id
=
"app"
>
<
!
--
当多次调用 reverseString 的时候
只要里面的 num 值不改变 他会把第一次计算的结果直接返回
直到
data
中的num值改变 计算属性才会重新发生计算
-->
<
div
>
{
{
reverseString
}
}
<
/
div
>
<
div
>
{
{
reverseString
}
}
<
/
div
>
<
!
-- 调用methods中的方法的时候 他每次会重新调用 -->
<
div
>
{
{
reverseMessage
(
)
}
}
<
/
div
>
<
div
>
{
{
reverseMessage
(
)
}
}
<
/
div
>
<
/
div
>
<
script
type
=
"text/javascript"
>
/
*
计算属性与方法的区别
:
计算属性是基于依赖进行缓存的,而方法不缓存
*
/
var vm
=
new
Vue
(
{
el
:
'
#app',
data
:
{
msg
:
'Nihao'
,
num
:
100
}
,
methods
:
{
reverseMessage
:
function
(
)
{
console.
log
(
'methods'
)
return
this.msg.split
(
''
)
.
reverse
(
)
.join
(
''
)
;
}
}
,
/
/
computed 属性 定义 和
data
已经 methods 平级
computed
:
{
/
/
reverseString 这个是我们自己定义的名字
reverseString
:
function
(
)
{
console.
log
(
'computed'
)
var total
=
0
;
/
/
当
data
中的 num 的值改变的时候 reverseString 会自动发生计算
for
(
var i
=
0
;i
<
=
this.num;i
+
+
)
{
total
+
=
i;
}
/
/
这里一定要有
return
否则 调用 reverseString 的 时候无法拿到结果
return
total;
}
}
}
)
;
<
/
script
>
- 侦听器 watch
-
使用watch来响应数据的变化
-
一般用于异步或者开销较大的操作
-
watch 中的属性 一定是data 中 已经存在的数据
-
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<
div
id
=
"app"
>
<
div
>
<
span
>
名:
<
/
span
>
<
span
>
<
input type
=
"text"
v
-
model
=
'firstName'
>
<
/
span
>
<
/
div
>
<
div
>
<
span
>
姓:
<
/
span
>
<
span
>
<
input type
=
"text"
v
-
model
=
'lastName'
>
<
/
span
>
<
/
div
>
<
div
>
{
{
fullName
}
}
<
/
div
>
<
/
div
>
<
script
type
=
"text/javascript"
>
/
*
侦听器
*
/
var vm
=
new
Vue
(
{
el
:
'
#app',
data
:
{
firstName
:
'Jim'
,
lastName
:
'Green'
,
/
/
fullName
:
'Jim Green'
}
,
/
/
watch 属性 定义 和
data
已经 methods 平级
watch
:
{
/
/
注意: 这里firstName 对应着
data
中的 firstName
/
/
当 firstName 值 改变的时候 会自动触发 watch
firstName
:
function
(
val
)
{
this.fullName
=
val
+
' '
+
this.lastName;
}
,
/
/
注意: 这里 lastName 对应着
data
中的 lastName
lastName
:
function
(
val
)
{
this.fullName
=
this.firstName
+
' '
+
val;
}
}
}
)
;
<
/
script
>
-
-