vue指令

一、MVC MVP MVVM 框架介绍

• MVC MVP设计模式
  • MVC代表框架 ：angular
  • MVP代表框架 ：metor
    
• MVVM代表框架：vue
  • M：数据层–model，它负责管理数据，和实现数据更新得消息发布——发布订阅模式
  • V：视图层–view,它负责页面渲染，接收用户时间（不负责业务处理）
  • vm:view-model视图和数据的绑定层
  • vue框架是一个MVVM框架，那么框架必须实现：定义数据、实现数据和视图绑定关系、指定视图

二、vue特性

• 常规DOM操作

  • 通过选择器找到dom节点，然后进行读取、赋值
  • 关注选择器，监听事件等

• 命令式编程

  • 通过特殊语法，添加自定义属性来进行数据、事件绑定，不需要关心数据关联问题，减少dom操作

• vue2和vue3

  • 编程思想的一个改变：OOP（面向对象编程）->FP（函数式编程）
  • 框架的编程方式：
    • 选项式编程，组合式编程。

• 指令：

  • v-text / v-html / {{}} / v-model / v-on / v-bind

• vue 循环指令

  • v-for------for…in

<tr v-for="it in todoList">
1

• 给元素绑定动态属性–v- 绑定 bind -> v-bind
  • 一个元素有很多的属性，通过参数绑定语法(:)给元素指定绑定哪个属性，v-bind:简写为( ：)
• 元素显示与否：if (condition数据类型为Boolean) {} else if (condition) {} else {} 样式 display: none
  • 那么就可以得出一些指令：v-if v-else-if(else if) v-else 这个条件渲染，不符合要求的元素不会执行渲染
• 绑定事件：原生事件–onclick/oninput/onchange/onmouseover -> 抽取共性，所以事件的绑定指令是：v-on
  • 通过v-on绑定事件，所以需要使用:来传递事件名字，所以事件绑定语法为: v-on:click 简写 @click
• 样式 display: none; 仅仅让元素不显示，但是页面上有这个元素 v-show
• 属性：
  • data------它必须是一个工厂函数
  • methods-------定义方法的属性
  • createApp方法创建一个应用实例
  • 实例有一个挂载方法，把实例挂载到domTree上

Vue.createApp(App).mount('#root')
1

课堂笔记（比较乱）