Vue框架思维导图

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合！

Vue 框架

• 概念
  • • Vue官网资源
• 创建Vue实例
  • 引入方法
  • 创建格式
    • new Vue({ el: "#app" , data:{ 数据 : 值} , method: { func(){ 代码 } }) 小胡子语法 {{ vue实例数据 }}
  • Vue实例总结
    • 每个 Vue 应用都是通过实例化一个新的 Vue对象开始的
• 模板语法
  • 标签文本的操作
    • {{ 双大括号 }}
      • 数据绑定(Mustache语法)
    • 三元运算符
      • 条件? "if成立 ": "else不成立"
    • 字符串反转
    • 简单逻辑计算
  • 标签属性的操作指令
    • v-bind:
      • 绑定属性值指令 ( 可以缩写为 : )
    • v-on:
      • 事件属性绑定 ( 可以缩写为 @)
    • v-if
      • 判断该标签元素是否显示
        • v-if v-else
        • v-if v-show
  • 总结
• 计算 和 监听属性
  • computed
    • 进行复杂的计算 --> 更新: this.msg 取出vue实例对象的属性值
  • watch
    • 监听属性 watch ( 改变前的值, 改变后的值 )
• class 和 style 绑定
  • class 绑定
    • v-bind : class ={对象} , 对象引用 , [数组] , [三元表达式]
  • style 绑定
    • v-bind : {JS对象} , 对象引用 , [数组]
  • 总结
    • 标签的属性位置可以使用{}, 不能使用小胡子语法{{ }}
• 条件渲染
  • v-if v-else v-else-if v-show
  • 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
• 列表渲染
  • v-for = "item in items" --> 遍历列表中的数据
    • v-for = "( value, key, index ) in object" --> 遍历一个对象
• 事件处理
  • 事件绑定
    • v-on : click --> @click
  • 事件修饰符
    • @click . stop --> 阻止事件冒泡 @click . prevent --> 阻止默认操作
• 表单双向绑定
  • v-model : 双向数据绑定, 只能作用于表单元素
  • 单行文本框 多行文本框
    • 单个复选框 --> 绑定 布尔类型
      • 单选框 --> 对应 value 值
        • 下拉框 --> 对应value值/标签内容
• 过滤器
  • 概念
    • filter 是 vue 中的过滤器, 过滤器顾名思义就是把数据进行过滤
    • 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
  • filter 过滤器定义的格式
    • 内部过滤器 and 全局过滤器
  • 过滤器总结
• 自定义指令
  • 概念
    • 指令是用来做dom操作的，如果vue现有的指令不能满足开发要求, 我们可以创建自定义指令 (directive )
  • 自定义指令格式
    • vue实例内部定义 and 全局定义自定义指令
• 实例生命周期
• 数据交互
  • 概念
    • vue.js没有集成 ajax 功能，可以使用vue官方推荐的 axios.js 库 来做ajax的交互 ( 不能跨域 )
  • 格式
    • axios完整写法
      • 执行 get / post 请求的 两种书写格式
  • 异步BUG问题
    • 异步问题 -- 案例
      • 解决方案
• ES6
  • 概念
    • ES6 是 JavaScript 语言的新版本，它也可以叫做 ES2015，之前学习的 JavaScript 属于 ES5，ES6 在它的基础上增加了一些语法
  • 新增语法
    • let
      • 声明一般变量
    • const
      • 声明常量
    • 没有预解析
    • 箭头函数 =>
    • 模块导入import 和 导出 export
    • 简写
• VUE组件
  • 概念
    • 组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码
    • 所有的 Vue 组件同时也都是 Vue 的实例
    • 单页应用(SPA)
      • 就是将系统所有的操作交互限定在一个web页面中, 整个系统在切换不同功能时，页面的地址是不变的
  • 创建和使用
    • Vue . component( 组件名, 组件内容 )
    • template属性
      • 展示组件html标签内容
    • data属性
      • data属性 需要一个函数来返回值
    • prop属性
      • prop属性 用数组来给组件传递数据
  • 单文件组件
    • 概念
      • 将一个组件相关的 html 结构，css 样式，以及交互的 JavaScript 代码从 html 文件中剥离出来，合成的一个vue文件, 这种文件的扩展名为“.vue.
      • 优点 : 相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用
    • 格式
      • template script style
        • 单文件组件有三部分: 这里写html模板
        • 补充 style scoped属性 : 只作用于当前文件
  • 组件自动化开发工具
    • 常用windows终端命令
    • node.js
      • Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似
    • npm
      • npm是node.js的包管理器，安装了node.js同时会自动安装这个包管理器，可以npm命令来安装node.js的包
    • 安装vue自动化工具
      • 前端开发需要用到node, 所以我们可以下载安装一下node
      • 安装完成之后,我们就可以在命令行使用npm了
      • node -v 可以用来查看node是否安装成功
      • npm install -g vue-cli 我们可以使用这个命令来安装vue的脚手架工具,直接生成一个项目
    • 生成Vue单页面项目目录
      • $ vue init webpack 项目名
        • 生成一个基于 webpack 模板的新项目
      • cd 项目名
      • npm run dev
        • 启动开发服务器 ctrl+c 停止服务
    • 项目目录结构
      • 使用vue自动化工具可以快速搭建单页应用项目目录
  • 组件嵌套
    • 嵌套方式
      • 导入 声明 展示
    • 路由方式
      • 子主题 1
  • 数据请求及跨域
    • 导入axios 模块
  • 打包上线
    • npm run bulid