本文详细介绍了Vue.js中关键的概念和技术，包括PropsData的数据传递、Computed的格式化输出与数组反转、Methods中的参数传递及$event的应用、Mixins的使用场景与调用顺序等。
扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。
我们用propsData三步解决传值：
1、在全局扩展里加入props进行接收。propsData:{a:1}
2、传递时用propsData进行传递。props:[‘a’]
一、格式化输出结果：
我们先来做个读出价格的例子：我们读书的原始数据是price:100 但是我们输出给用户的样子是（￥100元）。
主要的javascript代码：
|
1
2
3
4
5
|
computed
:
{
newPrice
:
function
(
)
{
return
this
.
price
=
'￥'
+
this
.
price
+
'元'
;
}
}
|
全部代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>
Computed Option 计算选项
</title>
</head>
<body>
<h1>
Computed Option 计算选项
</h1>
<hr>
<div
id
=
"app"
>
{{newPrice}}
</div>
<script type="text/javascript">
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
price
:
100
}
,
computed
:
{
newPrice
:
function
(
)
{
return
this
.
price
=
'￥'
+
this
.
price
+
'元'
;
}
}
}
)
</script>
</body>
</html>
|
现在输出的结果就是：￥100元。
二、用计算属性反转数组
例如：我们得到了一个新闻列表的数组，它的顺序是安装新闻时间的顺序正序排列的，也就是早反生的新闻排在前面。这是反人类的，我们需要给他反转。这时我们就可以用到我们的计算属性了。
没有排序的新闻列表，是安装日期正序排列的。
|
1
2
3
4
5
6
|
var
newsList
=
[
{
title
:
'香港或就“装甲车被扣”事件追责 起诉涉事运输公司'
,
date
:
'2017/3/10'
}
,
{
title
:
'日本第二大准航母服役 外媒：针对中国潜艇'
,
date
:
'2017/3/12'
}
,
{
title
:
'中国北方将有明显雨雪降温天气 南方阴雨持续'
,
date
:
'2017/3/13'
}
,
{
title
:
'起底“最短命副市长”：不到40天落马，全家被查'
,
date
:
'2017/3/23'
}
,
]
;
|
我们希望输出的结果：
- 起底“最短命副市长”：不到40天落马，全家被查-2017/3/23
- 中国北方将有明显雨雪降温天气 南方阴雨持续-2017/3/13
- 日本第二大准航母服役 外媒：针对中国潜艇-2017/3/12
- 香港或就“装甲车被扣”事件追责 起诉涉事运输公司-2017/3/10
一、methods中参数的传递
使用方法和正常的javascript传递参数的方法一样，分为两部：
1、在methods的方法中进行声明，比如我们给add方法加上一个num参数，就要写出add:function(num){}.
2、调用方法时直接传递，比如我们要传递2这个参数，我们在button上就直接可以写。<button @click=”add(2)”></button>.
现在知道了加参数的方法，看一段完整的代码，代码中给add添加了num参数，并在按钮上调用传递了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>
methods Option
</title>
</head>
<body>
<h1>
methods Option
</h1>
<hr>
<div
id
=
"app"
>
{{ a }}
<p>
<button
@
click
=
"add(2)"
>
add
</button>
</p>
</div>
<script type="text/javascript">
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
a
:
1
}
,
methods
:
{
add
:
function
(
num
)
{
if
(
num
!=
''
)
{
this
.
a
+=
num
}
else
{
this
.
a
++
}
}
}
}
)
</script>
</body>
</html>
|
这时，再点击按钮是每次加2个数字。
二、methods中的$event参数
传递的$event参数都是关于你点击鼠标的一些事件和属性。我们先看看传递的方法。
传递：<button @click=”add(2,$event)”>add</button> 。
我们这时候可以打印一下，看看event到底是个怎样的对象。你会发现，它包含了大部分鼠标事件的属性。
三、native 给组件绑定构造器里的原生事件。
在实际开发中经常需要把某个按钮封装成组件，然后反复使用，如何让组件调用构造器里的方法，而不是组件里的方法。就需要用到我们的.native修饰器了。
现在我们把我们的add按钮封装成组件：
声明btn对象：
|
1
2
3
|
var
btn
=
{
template
:
`
<
button
>组件
Add
<
/
button
>
`
}
|
在构造器里声明：
|
1
2
3
|
components
:
{
"btn"
:
btn
}
|
用.native修饰器来调用构造器里的add方法
|
1
|
<p>
<btn
@click
.
native
=
"add(3)"
>
</btn>
</p>
|
一、看一个监控变化的案例
温度大于26度时，我们建议穿T恤短袖，温度小于26度大于0度时，我们建议穿夹克长裙，温度小于0度时我们建议穿棉衣羽绒服。
先来模拟一个温度变化的情况：我们使用按钮来加减温度。
二、用实例属性写watch监控
有些时候我们会用实例属性的形式来写watch监控。也就是把我们watch卸载构造器的外部，这样的好处就是降低我们程序的耦合度，使程序变的灵活。
|
1
|
app
.
$
watch
(
'xxx'
,
function
(
)
{
}
)
|
还是上边的案例我们改成实例方法的模式。
|
1
2
3
4
5
6
7
8
9
10
11
|
app
.
$
watch
(
'temperature'
,
function
(
newVal
,
oldVal
)
{
if
(
newVal
>=
26
)
{
this
.
suggestion
=
suggestion
[
0
]
;
}
else
if
(
newVal
<
26
&&
newVal
>=
0
)
{
this
.
suggestion
=
suggestion
[
1
]
;
}
else
{
this
.
suggestion
=
suggestion
[
2
]
;
}
}
)
|
Mixins一般有两种用途：
1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
一、Mixins的基本用法
我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.
代码实现过程:
|
1
2
3
4
5
6
7
8
9
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
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>
Mixins Option Demo
</title>
</head>
<body>
<h1>
Mixins Option Demo
</h1>
<hr>
<div
id
=
"app"
>
<p>
num:{{ num }}
</p>
<P>
<button
@
click
=
"add"
>
增加数量
</button>
</P>
</div>
<script type="text/javascript">
//额外临时加入时，用于显示日志
var
addLog
=
{
updated
:
function
(
)
{
console
.
log
(
"数据放生变化,变化成"
+
this
.
num
+
"."
)
;
}
}
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
num
:
1
}
,
methods
:
{
add
:
function
(
)
{
this
.
num
++
;
}
}
,
mixins
:
[
addLog
]
//混入
}
)
</script>
</body>
</html>
|
二、mixins的调用顺序
从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。
在上边的代码的构造器里我们也加入了updated的钩子函数：
|
1
2
3
|
updated
:
function
(
)
{
console
.
log
(
"构造器里的updated方法。"
)
}
,
|
这时控制台输出的顺序是：
|
1
2
|
mixins数据放生变化
,变化成
2.
构造器里的
updated方法。
|
PS：当混入方法和构造器的方法重名时，混入的方法无法展现，也就是不起作用。
三、全局API混入方式
我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：
|
1
2
3
4
5
|
Vue
.
mixin
(
{
updated
:
function
(
)
{
console
.
log
(
'我是全局被混入的'
)
;
}
}
)
|
一、extends我们来看一个扩展的实例。
|
1
2
3
4
5
6
7
8
9
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
|
<
!
DOCTYPE
html
>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<script
type
=
"text/javascript"
src
=
"../assets/js/vue.js"
>
</script>
<
title
>
Extends
Optin
Demo
<
/
title
>
<
/
head
>
<
body
>
<
h1
>
Extends
Optin
Demo
<
/
h1
>
<
hr
>
<
div
id
=
"app"
>
{
{
message
}
}
<
p
>
<
button
@
click
=
"add"
>
add
<
/
button
>
<
/
p
>
<
/
div
>
<script
type
=
"text/javascript"
>
var
bbb
=
{
created
:
function
(
)
{
console
.
log
(
"我是被扩展出来的"
)
;
}
,
methods
:
{
add
:
function
(
)
{
console
.
log
(
'我是被扩展出来的方法！'
)
;
}
}
}
;
var
app
=
new
Vue
(
{
el
:
'#app'
,
data
:
{
message
:
'hello Vue!'
}
,
methods
:
{
add
:
function
(
)
{
console
.
log
(
'我是原生方法'
)
;
}
}
,
extends
:
bbb
}
)
</script>
<
/
body
>
<
/
html
>
|
|
1
|
delimiters
:
[
'${'
,
'}'
]
|
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
