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指令的作用就是解决差值表