1.安装

1 使用npm
npm install vue
2 使用外部链接进行引入vue.js

2.vue基础语法

常用的指令：v-if v-show v-for v-model v-bind v-on v-slot（插槽）
偶尔用到：v-html v-cloak

1.mustache插值语法

在vue中使用双花括号进行数据的渲染 {{ }} 在花括号中间写的是data中的属性名

2.el:挂载点

  1.   1. el是用来设置vue实例挂载（管理）的元素
  2.   1. vue会管理el选项命中的元素及其内部的后代元素
  3.   1. 可以使用其他的选择器，但是建议使用ID选择器
  4.   1. 可以使用其他的双标签，不能使用HTML和BODY
  5.   1. **el:"#app"**

3.data:数据对象

  1.   1. vue中用到的数据定义在data中
  2.   1. data中可以写复杂类型的数据
  3.   1. 渲染复杂类型数据时，准守js的语法即可
  4.   1. **data:{}**

4.v-text指令

  1.   1. v-text指令的作用是：设置标签的内容（textContent）
  2.   1. 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
  3.   1. **<p v-text="msg">222</p>**

5.v-html指令

  1.   1. v-html指令的作用是：设置元素的innerHTML
  2.   1. 内容中有html结构会被解析为标签
  3.   1. v-text指令无论内容是什么，只会解析为文本
  4.   1. 解析文本使用v-text，需要解析html结构使用v-html
  5.   1. **<p v-html="msg"></p>**

6.v-on指令

  1.   1. v-on指令的作用是：为元素绑定事件
  2.   1. 事件名不需要写on
  3.   1. 指令可以简写为@
  4.   1. 绑定的方法定义在methods属性中
  5.   1. 方法内部通过this关键字可以访问定义在data中的数据

7.v-show指令

  1.   1. v-show指令的作用是：根据真假切换元素的显示状态
  2.   1. 原理是修改元素的display，实现显示隐藏
  3.   1. 指令后面的内容，最终都会解析为布尔值
  4.   1. 值为true元素显示，值为false元素隐藏
  5.   1. 数据改变之后，对应元素的显示状态会同步更新
  6.   1. **通过当前指令值的true或者false 控制dispaly属性的block或者none来达到控制元素的显示和隐藏**


8.v-if指令

  1.   1. v-if指令的作用是：根据表达式的真假切换元素的显示状态
  2.   1. 本质是通过操纵dom元素来切换显示状态
  3.   1. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  4.   1. 频繁的切换使用v-show，反正使用v-if，前者的切换消耗小
  5.   1. **v-if如果条件为false的时候，绑定的标签元素会直接删除掉（dom被移除）**

v-if和v-show的不同点

  1. v-show 通过display属性控制元素的显示和隐藏 元素是一直都存在的

  2. v-if 是直接将元素清除掉 如果显示的时候，重新进行渲染

    9.v-else指令

    1. v-else 不能单独使用
    2. 如果想要使用，前边必须有v-if 或者 v-else-if

    3. 两个dom元素之间的关系是兄弟关系，紧挨着（不能隔着其他元素）

      10.v-else-if指令

    4. 不能单独使用

    5. 如果使用前边必须有v-if 或者 v-else-if

      11.v-bind指令

    6. v-bind指令的作用是：为元素绑定属性

    7. 完整写法是v-bind:属性名
    8. 简写的话是 :属性名
    9. 需要动态的增删class建议使用对象的方式
    10. 只能实现数据的单向绑定，从M自动绑定到V，无法实现数据的双向绑定

  1.  <p :style="[{'font-size':'15px'},{color: 'red'},.....]"></p>
  2.                     或者
  3.  <p :style="{marginTop: '15px', color: 'red', 'font-size':'30px'}"></p>

12.v-for指令

  1.   1. v-for指令的作用是：根据数据生成列表结构
  2.   1. 数组经常和v-for结合使用
  3.   1. 语法是**（item,index）in** 数据
  4.   1. item和index可以结合其他指令一起使用
  5.   1. 数组长度的更新会同步到页面上，是响应式的

注意：

  1. 虽然说v-for可以循环遍历数组和对象，但是一般情况下，我们都遍历数组
  2. 后期如果使用v-for，那么标签上边尽量加上:key=”index”

  3. 尽量在数据进行渲染的时候，v-for指令和v-if指令不要写在一个标签上边

    13.v-on补充

    1. 事件绑定的方法写成函数调用的形式,可以传入自定义参数
    2. 定义方法时需要定义形参来接收传入的实参
    3. 事件的后面跟上.修饰符可以对事件进行限制
    4. .enter可以限制触发的按键为回车

    5. 事件修饰符有多种

      1. 修饰符：
      2. .stop - 调用 event.stopPropagation()。
      3. .prevent - 调用 event.preventDefault()。
      4. .capture - 添加事件侦听器时使用 capture 模式。
      5. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
      6. .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
      7. .native - 监听组件根元素的原生事件。
      8. .once - 只触发一次回调。
      9. .left - (2.2.0) 只当点击鼠标左键时触发。
      10. .right - (2.2.0) 只当点击鼠标右键时触发。
      11. .middle - (2.2.0) 只当点击鼠标中键时触发。
      12. .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

      14.v-model指令

    6. v-model指令的作用时便捷的设置和获取表单元素的值

    7. 绑定的数据会和表单元素值相关联
    8. 绑定的数据和表单元素的值是双向绑定的
      1. 修饰符：
      2. .lazy - 取代 input 监听 change 事件
      3. .number - 输入字符串转为有效的数字
      4. .trim - 输入首尾空格过滤

      15.v-pre指令

      跳过当前元素及其子元素，不渲染当前绑定的标签及其子标签 显示的是最原始的mustache双花括号内容

      16.v-cloak指令

      为了解决当数据渲染比较慢的时候，会显示原始mustache插值语法的问题 我们可以使用v-cloak配合css样式来进行处理
      1. css样式：
      2.        [v-cloak] {
      3.            display: none;
      4.        }
      5.        当所有的资源加载完毕之后，才渲染显示mustache插值内容

      17.v-once指令

      只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过

      3.axios

      1.引入js

      2.axios的get请求和post请求

      axios.get(地址?key=value&key2=values).then(funciotn(response){},function(err){})
      axios.post(地址,{key:value,key2:values}).then(funciotn(response){},function(err){})

文档传送门:
https://github.com/axios/axios