vue入门基础

vue是一个实现UI层的渐进式js框架，代码的可读性、可维护性比较好，容易上手，此思维导图能帮助你简单了解vue，快速入门。包含的内容主要有vue简介、引入vue文件、创建vue实例、基础指令（数据渲染： v-text, v-html, {{}}；控制模块隐藏：v-if, v-show；渲染循环列表： v-for；事件绑定：v-on；属性绑定：v-bind等等）以及axios基础。

vue.js

• 简介
  • js框架
  • 优化dom
  • 响应式数据驱动
• 引入vue
  • 有帮助命令行
    • <script scr="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 优化尺寸速度
    • <script scr="https://cdn.jsdelivr.net/npm/vue"></script>
• 创建vue实例
  • el：挂载点
  • data:数据对象
  • methods：方法对象
  • 编写实例
    • 
• 基础
  • 设置标签
    • v-text：设置标签文本值（只解析成文本）
      • <h2>{{m}}</h2>
      • <h2 v-text="m"></h2>
    • v-html：设置标签innerHTML（可解析成标签）
      • <h2 v-html="a"></h2>
    • 字符串拼接
      • <h2 v-text="m+'!'"></h2>
  • v-on：为元素绑定事件，简写成@
    • 编写实例
      • <input type="button" value="v-on按钮" v-on:click="doit"/>
      • <input type="button" value="v-on简写@" @click="doit"/>
    • 传递参数
      • <input type="button" value="v-on简写@" @click="doit(p1,p2)"/>
    • 事件修饰符
      • <input type="text" @keyup.enter="sayHi" />
  • 隐藏显示
    • v-if:根据表达式真假，切换元素显示或隐藏（操作dom）
      • <p v-if="isShow">肖战</p>
    • v-show:根据表达式真假，切换元素显示或隐藏（操作display）
      • <img src="img/2.jpg" v-show="isShow">
  • v-bind:设置元素的属性（src、title、class），简写成：
    • <img v-bind:src="imgSrc">
    • <img :src="imgSrc">
  • v-for：根据数据生成列表结构
    • 
  • v-model：获取设置表单元素的值（反向数据绑定）
    • <input type="text" v-model="message"/>
• axios网络请求库
  • 引入
    • <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  • axios.get
    • 
  • axios.post
    •