vue的笔记

Vue

Vue 是一个渐进式的前端开发框架。目前主要的 Vue 版本是 3.x 的

官网

MVC 和 MVVM

MVC

MVC 分为三部分,Model、View、Controller

• Model 用来存储数据
• View 用来展示数据
• Controller 用来控制数据的展示

MVVM

MVVM 又叫数据双向绑定，分为三部分：Model、View、ViewModel

• Model 用来存储数据
• View 用来展示数据
• ViewModel 用来实现数据的双向绑定

框架的发展历史

• jQuery 插件
• Backbone，是比较早期的一个前端 MVC 框架。结合 jQuery+underscore+backbone+require.js 做项目开发。制作 SPA(单页面应用程序)
• Angular，是一个 mvvm 的框架，google 的框架
• React 是一个 facebook 出的针对前端视图层的 library 库
• Vue 是一个前端 MVVM 框架

Vue 基础指令和常见 API

在 vue 中所有以 v-开头的属性都是 vue 的内置指令

v-model

实现数据和表单元素的绑定，相当于绑定了 input 的 value 属性和 oninput 事件

v-if

控制标签的显示和隐藏。直接删除或者插入标签

v-show

控制标签的显示和隐藏。设置 display 属性。建议使用，性能更好一些。

v-bind

作用是绑定属性,v-bind:可以简写为:

在做样式绑定的时候，样式名有三种写法

1. 字符串，直接拼接
2. 数组，直接拼接
3. 对象，属性名表示样式名、属性值为 bool 值。属性值为 true 的时候样式名生效

v-html 和 v-text

v-html 展示富文本内容，相当于 innerHTML

v-text 直接展示内容，相当于 innerText

v-on

实现事件的绑定，v-on:可以简写为@

v-for

是我们要学会的最重要的一个指令。用来生成重复的数据，循环生成数据。

可以循环常见的数据类型，如：字符串，数字，数组，对象

Vue 组件定义和参数传递

Vue 中组件定义分为两种方式:全局组件和局部组件。全局组件定义好之后可以直接使用，局部组件定义好之后需要先注册再使用

const Counter = {
   
  template: `<button>按钮</button>`,
};

全局组件定义