😹 作者: gh-xiaohe
😻 gh-xiaohe的博客
😽 觉得博主文章写的不错的话，希望大家三连（✌关注，✌点赞，✌评论），多多支持一下！！！

🚏 浅学VUE

🚀 1、MVVM模型

总结：

		
1
2
3
4
5
6
7
8
9

MVVM源自于经典的MVC（Model-View-Controller）模式。MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下：

• 该层向上与视图层进行双向数据绑定
• 向下与Model层通过接口请求进行数据交互

🚬 为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处

• 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
• 可复用：你可以把一些视图逻辑放在一个Vi ewModel里面，让很多View重用这段视图逻辑。
• 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewMode），设计人员可以专注于页面设计。
• 可测试：界面素来是比较难以测试的，而现在测试可以针对ViewModel来写。

🚬 MVVM模式的实现者

• Model：模型层， 对应data中的数据

• View：视图层， 在这里表示DOM(HTML操作的元素) 模板

• ViewModel：连接视图和数据的中间件， Vue.js就是MVVM中的View Model层的实现者 Vue实例对象

 
View 层展现的不是 Model 层的数据， 而是 ViewModel 的数据， 由 ViewModel 负责与 Model层交互，获取和更新数据， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。

在MVVM架构中， 是不允许数据和视图直接通信的， 只能通过ViewModel来通信， 而View Model就是定义了一个Observer观察者

• ViewModel能够观察到数据的变化， 并对视图对应的内容进行更新
• ViewModel能够监听到视图的变化， 并能够通知数据发生改变

至此， 我们就明白了， Vue.js就是一个MVVM的实现者， 他的**核心就是实现了DOM监听与数据绑定**

🚄 2、Vue的第一个程序

    
    







    
    {{message}}







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

浏览器控制台输出

vm.message=“123”; // 页面即使发生改变

🚬 步骤

• ① 导入Vue
• ② 创建 new Vue 对象
• ③ 绑定元素
• ④ 放数据，从模板中取出

🚒 3、Vue基本语法

🚬 v-bind 绑定特定的元素，缩写 ：号

    
    






    {{message}}

    
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    








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

🚬 条件判断 v-if 、v-else

    
    







    

    









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

🚬 条件判断 v-else-if

    
    




    
100
    
80
    
60
    
不及格









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

🚬 循环 [] 数组 {} 对象

🚭 v-for

    
    




    
    

        {{item.message}}
    








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

🚭 v-for（item，index）

    
    





    
    

        {{item.message}}~~~~~{{index}}
    









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

🚬 v-on 监听事件 简写@符号

v-on:click 点击事件

 
 




 点击事件








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

🚬 v-model 双向绑定

🚭 v-bind 和 v-model的区别

• v-bind 单向绑定
  • 数据只能从data流向页面
• v-model 双向绑定
  • 不仅能从data流向页面，还能从页面流向data

🚭 input单行文本

    
    







    输入的文本 
    ****{{qinjiang}}***









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

🚭 textarea多行文本

    
    





    多行文本 

    {{message}}








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

🚭 checkbox单复选框

    
    




    单复选框：
    
    {{checked}}
    

    {{checked}}











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

🚭 checkbox多复选框

    
    




    多复选框
    Jack
    Join
    mike

    选中的值：{{checkedName}}









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

🚭 radio单选框

    
    




    单选框:
    One
    Two

    选中的值   ~{{picked}}~    








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

🚭 select 下拉框

    
    




    下拉框:
    

        ----请选择----
        A
        B
        C
        D
    

    选中的值   ~{{picked}}~    








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

注意：

    v-model表达式的初始值未能匹配任何选项，元系将被渲染为“未选中”状态。 在iOS中， 这会使用户无法选择第一个选项，因为这样的情况下，iOS不会触发change事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

🚤 4、Vue组件Component

    Vue.component("qinjiang",{ // qinjiang 组件名字
        props: ,      // 参数用来接收
        template:     // 模板
		methods:      // 可以定义方法
    });
1
2
3
4
5

①

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

②

  
  




  
   









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

🚗 5、Vue网络通信Axios

介绍：浏览器和NodeJS的异步通信框架

作用：实现Ajax异步通信（xhlr）

data.json

{
"name": "gh_xiaohe个人博客",
"url": "https://blog.csdn.net/gh_xiaohe",
"page": 1,
"isNonProfit": false,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "https://www.bilibili.com/"
},
{
"name": "个人博客",
"url": "https://blog.csdn.net/gh_xiaohe"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
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

①

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

浏览器控制台

②

  
  

  
  




  
属性名：{{info.name}}
  
链接：{{info.url}}
  
页数：{{info.page}}
  
是否有利润isNonProfit:{{info.isNonProfit}}
  
地址：{{info.address.street}}--{{info.address.city}}--{{info.address.country}}
  
数组：{{info.links}}











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

• 要求：返回的参数必须和Json字符串中一致
• axios.get(‘…/data.json’) 到 data.json获取数据
• info：接收axios 的数据
• info.address.street 显示数据信息

🚲 6、Vue计算属性component（特色）

计算出来的结果，保存在属性中，内存中运行（可以想象为缓存）

将不经常变化的计算结果进行缓存，节约开销
 
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

​


    
    




    
currentTime1:{{currentTime1()}}

    
currentTime2:{{currentTime2}}










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

说明：

• methods：定义方法，调用方法使用currentTime1，需要带括号
• computed：定义计算属性，调用属性使用currentTime2,不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化
• 如何在方法中的值发生了变化，则缓存就会刷新！可以在控制台使用vm.message=”qinjiang”，改变下数据的值，再次测试观察效果！

结论：

    调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来， 采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

🚀 7、插槽 slot

在Vue.js中我们使用元素作为承载分发内容的出口，作者称其为插槽，可以应用在组合组件的场景中；

solt 插槽 动态的**可拔插** ，实现复用

① 基础实现

  
列表书籍
  

      
Java
      
Linux
      
Python
  

1
2
3
4
5
6
7
8

②比如准备制作一个待办事项组件（todo），该组件由待办标题（todo-title）和待办内容（todo-items）组成，但这三个组件又是相互独立的，该如何操作呢？

// 方式一:
   Vue.component('todo',{
       template:'  
\
                       \
                       
\
                           \
                       
\
                  
'
   });
// 方式二:
   Vue.component('todo',{
       template:  '
'+
                       ''+
                       '
'+
                           ''+
                       '
'+
                  '
'
   });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

③ 定义插槽 名为 todo-title 件和 todo-items

   Vue.component('todo-title',{
       props:['title'],
       template:'
列表书籍
'
   });

   Vue.component("todo-items",{
       props:['item'],
       template:'
Java
'
   });
1
2
3
4
5
6
7
8
9

④ 替换①

   
       
       
   

1
2
3
4
5
6

⑤ 实例

   var mv = new Vue({
       el: "#app",
       data: {
           title: '列表书籍',
           message: ['Java','Linux','Python']
       }
   });
1
2
3
4
5
6
7

⑥ 接受参数

   Vue.component('todo-title',{
       props:['title'],
       template:'
{{title}}
'
   });

   Vue.component("todo-items",{
       props:['item'],
       template:'
{{item}}
'
   });
1
2
3
4
5
6
7
8
9

⑦ 绑定

   
       
       
   

1
2
3
4
5
6

🚄 8、自定义事件

🚬 JavaScrpit 中如何移除数组元素

splice（）方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

var arr = ['Microsoft','Apple','Yahoo','AOL','Excite', 'Oracle']; 
//从索引2开始删除3个元素，然后再添加两个元素：
arr.splice(2,3,'Google'，'Facebook')；//返回删除的元素['Yahoo'，'AoL'，'Excite'] 
arr; // ['Microsoft','Apple','Google','Facebook','oracle']
//只制除，不添加：
arr.splice(2, 2); // ['Google','Facebook'] 
arr; // ['Microsoft', 'Apple', 'Oracle'] 
//只添加，不删除：
arr.splice(2，0，‘Google'，‘Facebook'）；//返回[]，因为没有删除任何元素 
arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'oracle']
1
2
3
4
5
6
7
8
9
10

🚬 自定义事件

⑧ 在vue的实例中增加了methods对象并定义了一个名为removeItems的方法

   var mv = new Vue({
       el: "#app",
       data: {
           title: '列表书籍',
           message: ['Java','Linux','Python']
       },
       methods:{
           removeItems: function (index) {
               console.log("删除"+this.message[index] + "Ok");
               //只要执行了这个 removeItems 方法， 就自我删除 index 这个 元素
               this.message.splice(index,1)//一次删除一个元素  splice（）方法是修改Array的“万能方法”
           }
       }
   });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

⑨ 思考在组价那中如何删除

修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件

   Vue.component("todo-items", {
       props: ['item','index'],
       //只能绑定当前组件的方法
       template: '
{{index}}--{{item}}----删除
',
       //组件里面也可以写方法 可以调用自己   当前组件  绑定当前事件
       methods: {
           remove: function (index) {
               //这里的remove是自定义事件名称，需要在HTML中使用v-on:remove的方式
               //this.$emit 自定义事件分发
               this.$emit('remove',index);
           }
       }
   });
1
2
3
4
5
6
7
8
9
10
11
12
13

⑩ 修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法！

<todo-items slot="todo-items" v-for="(item,index) in message" :item="item"
           v-bind:index="index" @remove="removeItems(index)" :key="index">
</todo-items>
1
2
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

🚬 图形理解

🚬 入门小节

    遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信；

    说明 Vue的开发都是要基于NodeJS，实际开发采用Vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI（饿了么出品），或者ICE（阿里巴巴出品）来快速搭建前端项目~~