Vue太难啦！从入门到放弃day01——vue基础语法

---

前言

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

---

一、 Vue概述

1.1 定义

	Vue是一款渐进式JavaScript框架

1.2 用途

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

1.3 特点

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

1.4 官网

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

二、Vue基本使用

2.1 Vue的基本使用步骤

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

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语法让浏览器识别

三、Vue模板语法

3.1 模板语法概述

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

3.2 模板语法分类

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

3.3 模板语法——指令

3.3.1 什么是指令？

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

3.3.2 v-cloak指令

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

3.3.3 数据绑定指令

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

3.3.4 v-once指令

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

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

3.4.1 什么是双向数据绑定？

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

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

    v-model指定的用法：<input type="text" v-model='msg'>

3.4.3 MVVM设计思想

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

3.5 模板语法——事件绑定

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

    使用示例：<button v-on:click='num++'>点击</button>
    也可以简写为：<button @click='num++'>点击1</button>

3.5.2 事件函数的调用

    可以把事件处理代码封装成事件函数，事件函数需要定义在methods中
    使用示例：
      <button @click='handle'>点击2</button>
      <button @click='handle()'>点击3</button>

    methods: {
        handle: function() {
            // 这里的this是Vue的实例对象+
            // 在函数中 想要使用data里面的数据 一定要加this
            this.num++;
        }
    }

3.5.3 事件函数的传参

    从上一节我们可以看到，事件函数的绑定方式有两种，它们传递的参数也有所不同。
    如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数，也只能传递这一个参数。
    如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event。
    使用示例：<button v-on:click='handle2(123, 456, $event)'>点击2</button>

3.5.4 事件修饰符

    .stop：阻止冒泡，阻止单击事件继续传播
               示例：<button v-on:click.stop='handle1'>点击1</button>
    .prevent：阻止默认行为
               示例：<a href="http://www.baidu.com" v-on:click.prevent='handle2'>百度</a>

3.5.5 按键修饰符

     vue提供的常用按键修饰符如下：
        .enter：回车键
                    示例：<input type="button" v-on:click.enter='handleSubmit' value="提交">
        .delete：删除键
                    示例：<input type="text" v-on:keyup.delete='clearContent' v-model='uname'>
        .tab：tab键 
        .esc：取消键 
        .space：空格键 
        .up：上方向键 
        .down：下方向键 
        .left：左方向键 
        .right：右方向键

3.5.6 自定义修饰符

    除了vue官方给我们提供的按键修饰符以外，我们还可以自定义按键修饰符
    规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
    示例：Vue.config.keyCodes.aaa = 65
         <input type="text" v-on:keyup.aaa='handle' v-model='info'>

3.6 模板语法——属性绑定

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

    示例：<a v-bind:href="url">百度</a>
    也可简写为：<a :href="url">百度1</a>

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

    实现逻辑：<input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>

3.7 模板语法——样式绑定

3.7.1 绑定class样式

   class绑定对象语法：<div v-bind:class="{active: isActive,error: isError}">
                data: {
                    isActive: true,
                    isError: true
                },

   class绑定数组语法：<div v-bind:class='[activeClass, errorClass]'>测试样式</div>
                data: {
                    activeClass: 'active',
                    errorClass: 'error'
                },
    注意事项：
        1、对象绑定和数组绑定可以结合使用
        2、class绑定的值可以简化操作
        3、默认的class样式会保留

3.7.2 绑定style样式

    style样式和class样式的区别在于style样式可写在代码内部，是一种内联样式
    使用示例：<div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
                     <div v-bind:style='[objStyles, overrideStyles]'></div>

3.8 模板语法——分支结构

    v-if：<div v-if='score>=90'>优秀</div>
    v-else：<div v-else>比较差</div>
    v-else-if：<div v-else-if='score<90&&score>=80'>良好</div>
    v-show：<div v-show='flag'>测试v-show</div>

    v-if与v-show的区别： 
        v-if控制元素是否渲染到页面 
        v-show控制元素是否显示（已经渲染到了页面） 

3.9 模板语法——循环结构

     v-for遍历数组：<li v-for='item in fruits'>{{item}}</li>
                   <li v-for='(item, index) in fruits'>{{item + '---' + index}}</li>
    
    一般我们使用v-for时都会加一个key属性，作用是帮助Vue区分不同的元素，从而提高性能
    示例：<li :key='item.id' v-for='(item, index) in myFruits'>

    v-for遍历对象：<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>

总结

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