vue小朋友来了，可爱又可恨

@文章来源：拉钩大前端就业训练营-念念

vue

vue 简介

• 前端流行框架
• 渐进式框架

vue 的核心特性

• 数据驱动视图
  • MVVM model view viewmodel
  • model 数据
  • view 视图模板
  • viewmodel 业务逻辑处理代码
  • 优缺点：
    • 解放了 dom 操作。view 和 model 处理分离，降低了代码的耦合度
    • 双向绑定的 bug 调试难度增大
    • 大型项目的的 view 和 model 过多，维护成本高
• 组件化开发

vue 基础语法

vue 实例

• vue 实例是通过 vue 函数创建的对象，是使用 vue 功能的基础

const app = new Vue({
  el: "#app",
  data: {
    msg: "例子",
  },
});

基础选项

• el 选项 选取一个 dom 元素作为 vue 实例的挂载目标

  • 只要挂载元素内部才会被 vue 进行处理，外部为普通 html 元素
  • MVVM view 层
  • 可以是 css 选择器格式的字符串也可以是 HTMElement 实例，但不能是 html 或 body
  • vm.$el 可以查看当前元素是否挂载成功
  • 未设置 el 的 vue 实例，可以通过 vm.$mount()进行挂载，参数与 el 规则相同

• 插值表达式 {{}}

  • 只能书写在标签内容区域，可以与其他内容混合
  • 内部只能书写 javascript 表达式，不能书写语句

• data 选择

  • 用于存储 vue 实例需要使用的数据，值为对象类型
  • data 中的数据为响应式数据，在发生改变时，视图会自动更新
  • data 中存在数组时，索引操作与 length 操作无法自动更新视图，可以借助 vue.set()代替操作

• methods 选项

  • 用于存储需要在 vue 实例中使用的函数
  • methods 中方法可以通过 vm.方法名访问
  • 方法中的 this 为 vm 实例，可以便捷访问 vm 数据等功能

指令

• 指令的本质就是 html 的自定义属性

内容处理

• v-once 指令
  • 数据只会渲染一次，后续不会随着数据的变化而变化
• v-text 指令
  • 元素内容整体替换为指定纯文本数据
  • 不会识别 html 元素标签
  • 会替换标签的原始内容
• v-html
  • 元素内容整体替换为指定的 html 文本
  • 识别 html 元素标签
  • 同样会替换标签的原始内容
• v-bind 指令
  • 语法糖： :title
  • 用于动态绑定 html 属性
  • 绑定 class 属性，通过 v-bind 绑定的 class 可以与普通 class 属性共存
  • 绑定 style 属性
    • 推荐将样式写在 data 中，不建议写在行内

渲染指令

• v-for 指令

  • 用于遍历数据渲染结构，常用的数组与对象均可遍历
  • 绑定 key 属性的目的
    • index 不是唯一不能改变
    • 一般设置 item，必须保证 key 值的唯一
    • 通过