Class7 - Vue 全局Api
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:Vue2.x从入门到实战。Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.(来自官方介绍)
Vue.directive自定义指令
自定义指令,将数字样式变成:color:’red’,fontSize:’30px’
源码
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
42
43
44
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello world</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h3>Vue.directive</h3>
<div id="app">
{{message}}
<div v-Mrlin="style">{{num}}</div>
<button @click="add">add</button>
</div>
<script type="text/javascript">
Vue.directive("Mrlin",function(el,binding,vnode){
console.log(binding);
// el.style='color:'+binding.value;
el.style.color = binding.value.color;
el.style.fontSize = binding.value.fontSize;
console.log(el);
});
var app = new Vue({
el:'#app',
data:{
message:'Hello world!',
num:10,
style:{
color:'red',
fontSize:'30px'
}
},
methods:{
add:function(){
this.num++;
}
}
});
</script>
</body>
</html>参数一览
el: DOM 元素
bingding: 指令操作对象,包含绑定的值(本例中style
为binding.value
)
vnode:虚拟结点
Vue.extend
用途:用于自定义无参标签,例如。
创建<author></author>
标签,在全局任意位置代替<p><a :href='authorUrl'></a></p>
源码
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue extend</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h3>Vue extend!</h3>
<hr>
<author></author>
<div id="author"></div>
<script type="text/javascript">
var authorURL = Vue.extend({
template:"<p><a v-bind:href='authorURL'>{{authorName}}</a></p>",
data:function(){
return{
authorName:'Baidu',
authorURL:'http://baidu.com'
}
}
});
new authorURL().$mount("#author");
</script>
</body>
</html>定义一个全局静态标签
1
2
3
4
5
6
7
8
9var authorURL = Vue.extend({
template:"<p><a v-bind:href='authorURL'>{{authorName}}</a></p>",
data:function(){
return{
authorName:'Baidu',
authorURL:'http://baidu.com'
}
}
});使定义的标签生效,需挂载标签
1
new authorURL().$mount("#author");
Vue.set全局操作
用于构造器外部操作,改变构造器内部数据。
页面标签,id="app"
,与<p><button></button></p>
,属于同一层级1
2
3
4
5
6
7<div id="app">
{{count}}
<ol>
<li v-for="item in a">{{item}}</li>
</ol>
</div>
<p><button onclick="add()">add</button></p>
Vue构造id="app"
标签1
2
3
4var app = new Vue({
el:'#app',
data:outData
});
此时使用外部add
方法,改变构造器内的data
数据,可使用Vue.set
源码
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue set</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h3>Vue set!</h3>
<div id="app">
{{count}}
<ol>
<li v-for="item in a">{{item}}</li>
</ol>
</div>
<p><button onclick="add()">add</button></p>
<script type="text/javascript">
function add(){
// Vue.set(outData,"count",2);
// app.count++;
//outData.count++;
// app.a[1]="jjj";
Vue.set(outData.a,1,"jjj");
}
var outData={
count:1,
a:["aaa","bbb","cccc"]
}
var app = new Vue({
el:'#app',
data:outData
});
</script>
</body>
</html>Vue.set 和 直接构造器对象取值的区别
当直接更改app.count
,则当数据类型为数组时,无法更新界面元素。
如上app.a[1] = “jjj”,不生效