---

前言

因为公司的业务需要，我要从事前端方面的工作，但是对于从没做过前端的我来说，是一个很大的挑战，所以只能一点点从基础开始学习。嗯，就从Vue开始吧！看我如何从入门到放弃！

---

一、 Vue概述

1.1 定义

	Vue是一款渐进式JavaScript框架
1

1.2 用途

	声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建 
1

1.3 特点

    易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue 
    灵活：在一个库和一套完整框架之间自如伸缩 
    高效：20kB运行大小，超快虚拟 DOM
1
2
3

1.4 官网

	https://cn.vuejs.org/v2/guide/
1

二、Vue基本使用

2.1 Vue的基本使用步骤

      1、需要提供标签用于填充数据，比如div，span等
      2、引入vue.js库文件，可直接通过官网下载
      3、使用vue的语法做功能
      4、把vue提供的数据填充到标签里面
1
2
3
4

2.2 Hello world程序的vue实现

2.3 Hello world程序的细节分析

    1. 实例参数分析： 
        el： 元素的挂载位置（值可以是CSS选择器或者DOM元素） 
        data：模型数据（值是一个对象）
    2. 插值表达式用法：
        {{msg}}为vue特有的语法，称为差值表达式，作用是将数据填充到HTML标签中 
        插值表达式支持基本的计算操作，比如{{1+2}}显示为3
    3. Vue代码运行原理分析：
        vue代码在运行之前会进行编译，将Vue语法转换成原生的js语法让浏览器识别
1
2
3
4
5
6
7
8

三、Vue模板语法

3.1 模板语法概述

模板语法是vue提供的一套特有的语法，前面提到的差值表达式就是模板语法的一种。
1

3.2 模板语法分类

        1、差值表达式 
        2、指令 
        3、事件绑定 
        4、属性绑定 
        5、样式绑定 
        6、分支循环结构
1
2
3
4
5
6

3.3 模板语法——指令

3.3.1 什么是指令？

    指令的本质就是vue自定义的一系列属性 
    指令的格式：以v-开始（比如：v-cloak）
1
2

3.3.2 v-cloak指令

    v-cloak指令的作用就是解决差值表达式的“闪动”问题，提高用户体验
    v-cloak指定的用法：
        1、提供样式
              [v-cloak]{
                display: none;
              }
        2、在插值表达式所在的标签中添加v-cloak指令，例如
{{msg}}
        3、背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
1
2
3
4
5
6
7
8

3.3.3 数据绑定指令

        v-text： 填充纯文本，相比插值表达式更加简洁，没有闪动问题 
        v-html：填充HTML片段，会存在安全问题 
        v-pre： 填充原始信息，跳过编译过程
1
2
3

3.3.4 v-once指令

         v-once指令的作用是只编译一次，当显示内容之后不能再进行修改，这样可以提高性能
        使用示例：
{{info}}
1
2

3.4 模板语法——双向数据绑定

3.4.1 什么是双向数据绑定？

    简单来说就是数据的变化会导致展示的内容跟着变化，而内容的变化也会导致数据发生变化
1

3.4.2 双向数据绑定的指定——v-model

    v-model指定的用法：
1

3.4.3 MVVM设计思想

    MVVM是前端视图层的概念，主要关注于视图层分离
    MVVM把前端的视图层，分为了三部分： 
        M Model 数据层 
        V View 视图层 
        VM View-Model 控制器，将数据层和视图层联系在一起
1
2
3
4
5

3.5 模板语法——事件绑定

3.5.1 通过v-on指令来绑定事件

    使用示例：点击
    也可以简写为：点击1
1
2

3.5.2 事件函数的调用

    可以把事件处理代码封装成事件函数，事件函数需要定义在methods中
    使用示例：
      点击2
      点击3

    methods: {
        handle: function() {
            // 这里的this是Vue的实例对象+
            // 在函数中 想要使用data里面的数据 一定要加this
            this.num++;
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12

3.5.3 事件函数的传参

    从上一节我们可以看到，事件函数的绑定方式有两种，它们传递的参数也有所不同。
    如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，也只能传递这一个参数。
    如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event。
    使用示例：点击2
1
2
3
4

3.5.4 事件修饰符

    .stop：阻止冒泡，阻止单击事件继续传播
               示例：点击1
    .prevent：阻止默认行为
               示例：百度
1
2
3
4

3.5.5 按键修饰符

     vue提供的常用按键修饰符如下：
        .enter：回车键
                    示例：
        .delete：删除键
                    示例：
        .tab：tab键 
        .esc：取消键 
        .space：空格键 
        .up：上方向键 
        .down：下方向键 
        .left：左方向键 
        .right：右方向键
1
2
3
4
5
6
7
8
9
10
11
12

3.5.6 自定义修饰符

    除了vue官方给我们提供的按键修饰符以外，我们还可以自定义按键修饰符
    规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    示例：Vue.config.keyCodes.aaa = 65
         
1
2
3
4

3.6 模板语法——属性绑定

3.6.1 vue使用v-bind指令来绑定动态属性

    示例：百度
    也可简写为：百度1
1
2

3.6.2 v-model指令的底层也是通过v-bind来实现的

    实现逻辑：
1

3.7 模板语法——样式绑定

3.7.1 绑定class样式

   class绑定对象语法：

                data: {
                    isActive: true,
                    isError: true
                },

   class绑定数组语法：
测试样式
                data: {
                    activeClass: 'active',
                    errorClass: 'error'
                },
    注意事项：
        1、对象绑定和数组绑定可以结合使用
        2、class绑定的值可以简化操作
        3、默认的class样式会保留
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

3.7.2 绑定style样式

    style样式和class样式的区别在于style样式可写在代码内部，是一种内联样式
    使用示例：

                     

1
2
3

3.8 模板语法——分支结构

    v-if：
优秀
    v-else：
比较差
    v-else-if：
良好
    v-show：
测试v-show

    v-if与v-show的区别： 
        v-if控制元素是否渲染到页面 
        v-show控制元素是否显示（已经渲染到了页面） 
1
2
3
4
5
6
7
8

3.9 模板语法——循环结构

     v-for遍历数组：
{{item}}
                   
{{item + '---' + index}}
    
    一般我们使用v-for时都会加一个key属性，作用是帮助Vue区分不同的元素，从而提高性能
    示例：


    v-for遍历对象：
{{v + '---' + k + '---' + i}}
1
2
3
4
5
6
7

总结

vue的基础语法还是比较简单的，但是要如何将其熟练运用，还需要不断地实践才行，路漫漫其修远兮，吾将上下而求索，明天继续努力！