console.log(🍺);|

Vue基础操作

一、Vue入门基础知识

1、Vue使用的基本操作

i. 先下载,引入vue.jsii. Vue,实例化一个vue实例化对象(new Vue({}))  

  1. 新建一个vue实例化对象(Vue是一个构造函数)  

  2. 执行vue构造函数中每一句代码  

  3. 将新创建的vue实例化对象赋值给vue构造函数中的this

iii. 往vue实例化对象中传入一个对象(Vue实例化传入的对象里面的值也都为对象,以键值形式对存在,如data对象)

2、Vue的基础知识(应用:普通版的todolist(待办事项))

1) el: 节点挂载

限定Vue语法的作用范围

2) Data(需要渲染的数据,Vue 实例的数据对象)

    a) data的类型可以为:Object | Function。

    注:组件的定义只接受 function(因为函数有自己的作用域,每一个实例的data属性都是独立的)

    b) data可以为:

        1.    自定义数据

        2.    通过ajax获取的后台数据

        3.    Data是一个函数

 3)Vue语法,实现对(DOM)节点的渲染、删除、添加

    a) 模板渲染{{ obj }}(data中的数据可以直接在html中显示,让js变量直接在html中使用)

    b) v-for (列表渲染,使用for循环遍历数据生成节点,遍历对象和数组),数据驱动视图

    使用:1. 用 v-for 把一个数组对应为一组元素

                v-for=”(item,index) in list”

               list为源数据数组并且item是数组元素迭代的别名

                index为当前项的索引

                2、一个对象的 v-for

                v-for="(value,key) in object"

                object为data中定义的一个对象,value为对象的值,key为对象的键名

    c) 条件渲染v-if、v-show(使用数据隐藏和显示节点)
        1.v-if删除了节点
        2.v-show隐藏了节点(使用display:none隐藏了节点)

  d )删除节点,使用@click时间并在methods中定义delitem删除函数,并用v-bind绑定自定义属性,如::data-id="item.id"

        事件处理@click与回调函数methods (与v-bind结合使用,因为在进行操作的时候需要传入值)

        1. 在节点上直接绑定click事件
        2. 在methods属性中定义函数
        3. methods中使用data中的数据必须使用this访问

        4. this代表vue实例化对象

   e) 添加节点,通过input的value值与data绑定

   v-model与表单元素的value值的双向数据绑定(在表单控件或者组件上创建双向绑定,在节点上直接修改value属性)
            双向数据绑定

           1. 将表单中input的值value和data中值绑定起来

           (data设置该数据的属性值title:"默认值",input中绑定v-model="title",添加按钮绑定@click="additem")

            2. data改变input[value]改变

           data中的title的值改变,input中的value也会发生改变

            3. Input[value]改变data改变

            在input中输入值,点击添加按钮,data中的数据发生改变

    f)  绑定属性(自定义属性)(绑定属性值)V-bind:href,data-id
            1. 简写(:href)
            2. v-bind:的缩写 : (冒号)

    g)  v-if删除了节点,页面审查不到 

            v-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到

  h)  template:定义组件模板,模板中的内容即为组件的内容
        1. 在template标签中写html模板,并标注id
        2. 在组件中使用template属性通过id引用template标签 

        3. 模板将会替换挂载的元素。挂载元素的内容都将被忽略

        4.    template中的html不会被浏览器首次加载时所渲染,在调用了组件之后才渲染的。

也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>

   i) 应用:普通版的todolist

 
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
 
<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">
 
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
 
<title>vue入门案例</title>
 
</head>
 
  
<body>
 
<div style="width: 500px;margin:0 auto;" id="app">
 
<!-- V-if删除了节点,页面审查不到 -->
 
<h1 v-if="status">{{message}}待办事项</h1>
 
<!-- V-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到-->
 
<h1 v-show="status">{{message}}待办事项</h1>
 
<p>即将添加的待办事项: {{title}}</p>
 
<table class="table table-hover">
 
<tr>
 
<th>id</th>
 
<th>标题</th>
 
<th>操作</th>
 
</tr>
 
<!-- v-for,使用for循环遍历数据生成节点,遍历对象和数组-->
 
<!-- v-bind的缩写 : (冒号),绑定属性(自定义属性) -->
 
<tr :data-id="item.id" v-for="(item,index) in list">
 
<td>{{item.id}}</td>
 
<td>{{item.title}}</td>
 
<td>
 
<button class="btn btn-info" @click="delItem(item.id)">删除</button>
 
</td>
 
</tr>
 
<!-- v-for遍历对象 -->
 
<tr v-for="(value,key) in object">
 
<td>{{key}}</td>
 
<td>{{value}}</td>
 
<td>
 
<button class="btn btn-info">删除</button>
 
</td>
 
</tr>
 
</table>
 
<div class="form-group">
 
<label for="exampleInputEmail1">添加待办事项</label>
 
<!--V-model与表单元素的value值的双向数据绑定 -->
 
<!-- 1 将表单中input的值value和data中值绑定起来
 
2 data改变input[value]改变
 
3 Input[value]改变data改变 -->
 
<input v-model="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入待办事项">
 
</div>
 
<button @click="addItem()" type="submit" class="btn btn-default">添加</button>
 
<div>
 
<p>作者信息:{{author}}</p>
 
<p>来源: <a :href="url">点击打开</a></p>
 
</div>
 
</div>
 
<!-- <template id="clearApp">
 
<h1>清空app</h1>
 
</template> -->
 
<script src="../js/vue.js"></script>
 
<script>
 
//VUE是一个构造函数
 
//1 实现数据的渲染 删除 添加
 
  
var vm=new Vue({
 
//节点挂载,用来限定vue的语法范围
 
el: "#app",
 
// template:"#clearApp",
 
//data为需要渲染的数据
 
//模板渲染{{ obj }}
 
//(data中的数据可以直接在html中显示,让js变量直接在html中使用)
 
data: function () {
 
console.log(this);
 
return {
 
author:'xiean',
 
status:false,
 
url:'http://www.baidu.com',
 
message: '小明的: ',
 
title:'默认值',
 
list: [
 
{ id: 0, title: "羽毛球" },
 
{ id: 1, title: "乒乓球" },
 
{ id: 2, title: "篮球" },
 
{ id: 3, title: "足球" }
 
],
 
object:{
 
name:"谢",
 
sex:"女",
 
address:"怀化"
 
}
 
}
 
},
 
methods: {
 
delItem: function (id) {
 
for (var key in this.list) {
 
if (this.list[key].id == id) {
 
this.list.splice(key, 1);
 
}
 
}
 
},
 
addItem:function(){
 
this.list.push({id:this.list.length,title:this.title});
 
console.log(this.list);
 
}
 
}
 
});
 
  
</script>
 
</body>
 
  
</html>

  

3、Vue组件

1)组件的创建与注册

  • 创建组件:Vue.extend({})
  • 创建组件,要在实例化对象之前创建
  • 组件是新的vue实例或者说是精简版的vue实例
  • 每一个组件里必须有一个根元素
  • 在父组件中使用components注册组件

  2) 组件通信

    1. 父子组件通信(通过局部注册)

    1)父组件传数据给子组件:(可以实现列表的渲染等操作)

        a) 为什么数据要放在父组件,数据需要分发,数据可能会在多个子组件中使用,所以vue官方推荐所有的数据都放在父组件中
        b) 父组件调用子组件的时候,给子组件绑定自定义属性,将值传递给子组件
       c) 子组件通过props接收父组件传递过来的数据
        d) props中的数据可以直接在子组件的模板中使用
        e) props在子组件中才有,父组件中没有
    2) 子组件传数据给父组件:$emit (用于实现节点的删除和添加等操作)
        a) 因为数据在父组件中,所以我们需要通过子组件将需要操作的数据传递给父组件,让父组件去操作数据
        b) 子组件通过$emit自定义一个事件,并且将需要操作的数据通过$emit传递给父组件
        c) 父组件我们需要@符来触发自定义事件,并且定义函数当做事件的回调函数,回调函数中形式参数接收子组件传过来的数据

a) 列表渲染(步骤)

  • 渲染节点时,父组件需要调用子组件,而数据在父组件中,子组件不能直接使用,所以父组件需要传数据给子组件,子组件获取数据后进行渲染。
  • 在父组件中绑定自定义属性如( :list="list"),子组件通过props接收父组件传递过来的数据,props接收的数据可以直接在子组件的模板中使用,然后用v-for进行数据的列表渲染。
  • ps: props在子组件中才有,父组件中没有

b) 删除节点

  • 删除节点,在子组件中点击删除按钮获取需要删除的记录的id,并将id传递给父组件,父组件中定义delitem进行删除。
  • 子组件通过$emit自定义一个事件,并将需要操作的数据通过$emit传递给父组件 (如:this.$emit("delitem",id))
  • 父组件中需要@符去触发自定义事件,并且自定义函数当作事件的回调函数,回调函数中形式参数接收子组件中传过来的数据。

c) 添加节点

添加节点首先需要进行input value值和data数据的双向绑定,然后通过 子组件的additem方法获取输入的对象,并通过$emit将数据对象传入至父组件中,父元素通过@符触发自定义事件,接收子组件传递过来的数据,并实现定义的函数。将数据push到list中。


 

2、兄弟组件通信(全局注册,在创建的时候就已经注册了)

    a) 使用Vue.component定义(包括创建和注册)全局组件
    b) 定义另外一个vue实例vm
    c) 在添加数据数据兄弟组件中使用vm.$emit传送数据
    d) 在获取的数据兄弟组件中created生命周期函数中使用vm.$on来接收数据,使用v-for渲染数据,绑定点击事件,删除元素

 
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
 
<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">
 
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
 
<title>兄弟组件通信</title>
 
</head>
 
  
<body>
 
<div style="width: 500px;margin:0 auto;" id="app">
 
<h1>待办事项</h1>
 
<mytable></mytable>
 
<myadd></myadd>
 
</div>
 
<template id="mytable">
 
<table class="table table-hover">
 
<tr>
 
<th>id</th>
 
<th>标题</th>
 
<th>操作</th>
 
</tr>
 
<tr v-for="item in list">
 
<td>{{item.id}}</td>
 
<td>{{item.title}}</td>
 
<td>
 
<button @click="delitem(item.id)" class="btn btn-info">删除</button>
 
</td>
 
</tr>
 
</table>
 
</template>
 
<!-- //定义组件模板 -->
 
<template id="myadd">
 
<div>
 
<div class="form-group">
 
<label for="exampleInputEmail1">添加待办事项</label>
 
<input v-model="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入待办事项">
 
</div>
 
<button @click="additem" type="submit" class="btn btn-default">添加</button>
 
</div>
 
</template>
 
<script src="../js/vue.js"></script>
 
</body>
 
  
<script>
 
//通过两个子组件交互,实现通信
 
//定义另外一个vue实例
 
var vm = new Vue();
 
//组件的创建和注册
 
Vue.component('mytable', {
 
//使用组件模板
 
template: "#mytable",
 
data: function () {
 
return {
 
list: []
 
}
 
},
 
methods:{
 
delitem:function(id){
 
for(var key in this.list){
 
if(this.list[key].id==id){
 
this.list.splice(key,1);
 
}
 
}
 
}
 
},
 
//生命周期函数,一个在创建的过程中会自己执行的函数
 
created:function(){
 
//保存指向mytable的地址
 
var _this=this;
 
vm.$on("additem",function(obj){
 
_this.list.push(obj);
 
});
 
}
 
})
 
Vue.component('myadd', {
 
template: "#myadd",
 
data: function () {
 
return {
 
id:0,
 
title:"默认值"
 
}
 
},
 
methods:{
 
additem:function(){
 
vm.$emit("additem",{id:this.id++,title:this.title});
 
}
 
}
 
})
 
new Vue({
 
el: "#app"
 
})
 
</script>
 
  
</html>

  

3、生命周期函数

d) Vue生命周期函数(执行vue构造函数的过程中,必须执行的代码,执行生命周期就是执行构造函数)
        i. 生命周期:Vue 实例化对象从开始创建、初始化数据、编译模板、挂载节点elDom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子(在这个过程中会自己执行的函数)
        ii. beforeCreate:vue实例化对象创建完成之前
            1. this已经指向vue实例化对象,但不能访问data和methods中的属性和方法
        iii. created:vue实例化对象创建完成
            1. this已经指向vue实例化对象,可以访问data和methods中的属性和方法
            2. 未挂载到DOM,不能访问到$el属性
            3. 作用:
a) 常用于首屏数据渲染时,发送ajax请求获取数据。
        iv. beforeMount:通过数据生成了全部虚拟节点(使用createElement创建的节点,但是这些节点没有插入到html文档中),但还没有挂载到el节点上。
            1. 可以访问到$el
        v. mounted:vue实例挂载到el节点(DOM)上
            1. 把通过数据生成的虚拟节点,挂载 到el节点中
            2. 作用:
a) 常用于操作真实的dom节点
        vi. beforeUpdate:
            1. 手动添加的虚拟节点,但是还未插入到el(真实节点)中更新之前
            2. 不能操作该节点
        vii. updated:
            1. 手动添加的虚拟节点已经更新完成。
            2. 可以操作到手动添加的节点
        viii. beforeDestroy:(调用vm.$destroy()销毁实例)
            1. vue实例销毁之前调用。
        ix. destroyed:
            1. 实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

 
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
 
<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>生命周期函数</title>
 
</head>
 
  
<body>
 
  
<div id="app">
 
<ul>
 
<li v-for="item in list">{{item}}</li>
 
</ul>
 
<button @click="additem">添加li</button>
 
</div>
 
  
<script src="../js/vue.js"></script>
 
<!-- <script src="js/vue-router.js"></script> -->
 
<script>
 
var vm=new Vue({
 
el: "#app",
 
// 1.this已经指向vue实例化对象,但不能访问data和methods中的属性和方法
 
// beforeCreate:function(){
 
// console.log(this);//输出vue的实例
 
// console.log(this.title);//输出undefined
 
// this.sayName();
 
// },
 
// created常用于首屏数据渲染时,发送ajax请求获取数据。
 
// created:function(){
 
// console.log(this);//输出vue的实例
 
// console.log(this.title);//输出小明
 
// this.sayName();//输出hello!小明
 
// // $el即为#app
 
// console.log(this.$el);//输出undefined
 
// },
 
// beforeMount:function(){
 
// console.log(this);//输出vue的实例
 
// console.log(this.title);//输出小明
 
// this.sayName();//输出hello!小明
 
// console.log(this.$el);//能获取到#app
 
// console.log(document.querySelectorAll("li"));//只能获取到一个节点,不能获取到真实节点
 
// },
 
// mounted:function(){
 
// console.log(this);//输出vue的实例
 
// console.log(this.title);//输出小明
 
// this.sayName();//输出hello!小明
 
// console.log(this.$el);//能获取到#app
 
// console.log(document.querySelectorAll("li"));//获取到真实节点
 
// },
 
// beforeUpdate:function(){
 
// console.log(this);//输出vue的实例
 
// console.log(this.title);//输出小明
 
// this.sayName();//输出hello!小明
 
// console.log(this.$el);//能获取到#app
 
// console.log(document.querySelectorAll("li"));//手动添加的节点不能获取到
 
// },
 
// updated:function(){
 
// console.log(this);//输出vue的实例
 
// console.log(this.title);//输出小明
 
// this.sayName();//输出hello!小明
 
// console.log(this.$el);//能获取到#app
 
// console.log(document.querySelectorAll("li"));//手动添加的节点能获取到
 
// },
 
  
//添加事件已解除绑定,无法操作了
 
beforeDestroy: function () {
 
console.log("vue实例销毁之前调用");
 
},
 
destroyed: function () {
 
console.log("实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁");
 
},
 
data: function () {
 
return {
 
title: "小明",
 
list: [121, 2313, 3213, 1231, 212]
 
}
 
},
 
methods: {
 
sayName: function () {
 
console.log("hello!" + this.title);
 
},
 
additem: function () {
 
this.list.push("123");
 
}
 
}
 
});
 
vm.$destroy();
 
</script>
 
</body>
 
  
</html>

  

4、computed计算属性与watch侦听器与methods方法的区别

    1)计算属性:适合大量计算,不适合大量逻辑判断,内存会缓存计算的结果,当要计算的数据相同时,它不会进行二次计算,而是取缓存里的数据。
    2)methods:适合大量逻辑处理(if,for等等),它不会缓存计算的过,当要计算的数据相同时,它会进行二次计算。

    3 watch:侦听需要变化的数据,执行回调函数。(可以用来监听pn的变化,实现分页)

 
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
 
<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>计算属性</title>
 
</head>
 
<body>
 
  
<div id="app">
 
<p>计算属性的结果为:{{count}}</p>
 
<p>methods计算的结果为:{{count2()}}</p>
 
watch:<input v-model="a" type="text">
 
<p>c的值为:{{c}}</p>
 
</div>
 
  
<script src="../js/vue.js"></script>
 
<script>
 
new Vue({
 
el:"#app",
 
data:function(){
 
return {
 
a:10,
 
b:20,
 
c:0
 
  
}
 
},
 
computed:{
 
count:function(){
 
return (this.a+this.b)*this.a
 
}
 
},
 
methods:{
 
count2:function(){
 
return (this.a+this.b)*this.a
 
}
 
},
 
watch:{
 
//监听a的变化,执行这个函数
 
a:function(){
 
return this.c+=parseInt(this.a);
 
}
 
}
 
});
 
</script>
 
</body>
 
</html>

  

5、插槽slot
    1.) 从父组件中将带有数据的html模板传入到子组件
        a) 在父组件中使用slot属性定义插槽(插槽写在调用子组件的内部)
        b) 在子组件中使用<slot></slot>调用插槽
        c) 没有名字的模块,其内容会全部到没有名字的插槽中
        d) 作用:
                相当于不使用props也可以将父组件的data传递给子组件
    2.) 具名插槽
            a) 带有特点name属性的插槽
    3. )匿名插槽
        a) 没有name属性的插槽,除了具名插槽,剩下的都会被内容都会被渲染到匿名插槽中
    4. )作用域插槽
        a) 绑定了数据的插槽
        b) Slot-scope

        c) 必须使用template定义,并且要使用slot-scope属性定义一个引用

    删除节点步骤:1、先创建模板、创建组件、注册组件

                           2、父组件给子组件绑定自定义属性,将值传递给子组件;使用v-for渲染数据

                            3、将删除的按钮放到作用域插槽中,创建作用域插槽来传递数据

    5. )三者区别:
        a) 具名插槽和匿名插槽内容和样式与数据都由父组件提供

        b) 作用域插槽可以传递数据,数据由子组件提供

 
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!-- 插槽 -->
 
<!DOCTYPE html>
 
<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>插槽</title>
 
</head>
 
<body>
 
<div id="app">
 
<!-- 插槽要写在调用子组件内部 -->
 
<child>
 
<h1 class="header" slot="header">我是头部</h1>
 
<div class="content" slot="content">我是内容</div>
 
<div class="footer" slot="footer">我是尾部</div>
 
<!-- 使用插槽很好的避免了父子组件间的频繁通信 -->
 
<ul>
 
<li v-for="item in list">{{item}}</li>
 
</ul>
 
</child>
 
</div>
 
<template id="child">
 
<div class="wrap">
 
<h1 class="header">
 
<slot name="header"></slot>
 
</h1>
 
<div class="content">
 
<slot></slot>
 
</div>
 
<div class="footer">
 
<slot name="footer"></slot>
 
</div>
 
</div>
 
</template>
 
<script src="../js/vue.js"></script>
 
<script>
 
//定义一个子组件
 
var child= Vue.extend({
 
template:"#child",
 
data :function(){
 
return {
 
  
}
 
  
}
 
})
 
new Vue({
 
el:"#app",
 
data:function(){
 
return {
 
list:[121,3213,3213,231,3123,32]
 
}
 
},
 
methods:{
 
  
},
 
components:{
 
child
 
}
 
})
 
</script>
 
  
</body>
 
</html>

  

 
  1. <!-- 作用域插槽 -->  

    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
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    <!DOCTYPE html>
     
    <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">
     
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
     
    <title>作用域插槽版todolist</title>
     
    </head>
     
      
    <body>
     
    <div style="width: 500px;margin:0 auto;" id="app">
     
    <h1>待办事项</h1>
     
    <mytable :list="list">
     
    <!-- scope即为传入的id对象 -->
     
    <!-- 作用域插槽 -->
     
    <template slot="delbtn" slot-scope="scope">
     
    <button @click="delitem(scope)" class="btn btn-info">删除</button>
     
    </template>
     
    </mytable>
     
    <myadd></myadd>
     
    </div>
     
    <template id="mytable">
     
    <table class="table table-hover">
     
    <tr>
     
    <th>id</th>
     
    <th>标题</th>
     
    <th>操作</th>
     
    </tr>
     
    <tr v-for="item in list">
     
    <td>{{item.id}}</td>
     
    <td>{{item.title}}</td>
     
    <td>
     
    <slot name="delbtn" :id="item.id"></slot>
     
    </td>
     
    </tr>
     
    </table>
     
    </template>
     
    <template id="myadd">
     
    <div>
     
    <div class="form-group">
     
    <label for="exampleInputEmail1">添加待办事项</label>
     
    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入待办事项">
     
    </div>
     
    <button type="submit" class="btn btn-default">添加</button>
     
    </div>
     
    </template>
     
    <script src="../js/vue.js"></script>
     
    <script>
     
    var mytable = Vue.extend({
     
    template: "#mytable",
     
    props: ['list'],
     
    data: function () {
     
    return {
     
      
    }
     
    },
     
    methods: {
     
      
    }
     
    })
     
    var myadd = Vue.extend({
     
    template: "#myadd",
     
    data: function () {
     
    return {
     
      
    }
     
    }
     
    })
     
    new Vue({
     
    el: "#app",
     
    data: function () {
     
    return {
     
    list: [
     
    { id: 0, title: "吃饭" },
     
    { id: 1, title: "睡觉" },
     
    { id: 2, title: "写代码" },
     
    { id: 3, title: "打游戏" },
     
    ]
     
    }
     
    },
     
    methods: {
     
    delitem: function (scope) {
     
    //利用数组的foeach方法遍历
     
    console.log(this);
     
    var _this = this;
     
    this.list.forEach(function (item, index) {
     
    if (item.id == scope.id) {
     
    _this.list.splice(index, 1);
     
    }
     
    })
     
    }
     
    },
     
    components: {
     
    mytable,
     
    myadd
     
    }
     
    })
     
    </script>
     
    </body>
     
      
    </html>

      

     

6、ref与$refs

    1. )使用ref对元素或子组件加一个标识
    2.)this.$refs.标识

    3. )作用:可以直接操作真实节点和子组件

 
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
 
<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>ref和$refs</title>
 
</head>
 
  
<body>
 
<div id="app">
 
<input type="text" ref="input">
 
<child ref="h1"></child>
 
<!-- //验证字段为空时会用到 -->
 
<!-- 点击即可获取到子组件的值 -->
 
<button @click="getInput">点击</button>
 
</div>
 
<template id="child">
 
<div>
 
<h1>我是子组件</h1>
 
<h2>我是子组件</h2>
 
</div>
 
</template>
 
<script src="../js/vue.js"></script>
 
<script>
 
var child = Vue.extend({
 
template: "#child",
 
data: function () {
 
return {
 
name: "哈哈哈"
 
  
}
 
}
 
})
 
new Vue({
 
el: "#app",
 
data: function () {
 
return {
 
  
}
 
},
 
methods: {
 
getInput: function () {
 
// ref与refs用于直接操作真实的节点
 
//获取子组件
 
console.log(this.$refs.h1.name);
 
//获取input节点
 
console.log(this.$refs.input);
 
}
 
},
 
components: {
 
child
 
}
 
})
 
</script>
 
</body>
 
  
</html>

  参考资源:https://blog.csdn.net/qq_42809504/article/details/82927945

本文作者:Mahmud(مەھمۇد)

本文链接:https://www.cnblogs.com/mahmud/p/10089469.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   Mahmud(مەھمۇد)  阅读(224)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 404 not found REOL
404 not found - REOL
00:00 / 00:00
An audio error has occurred.

Not available