vue的基本介绍

Vue 的基本介绍

1. 库(library)和框架(Framework)的区别

库:

是一系列函数的集合,如果想要实现某个功能,直接调用库里面的方法即可. 例如(jquery).

使用库 : 开发人员起主导作用

框架:

是一套完整的解决方案,它制定了一个规则,想要使用框架,就要按照框架的规则来编写代码,框架会在何时的时机执行我们编写的代码. 例如(Vue).

使用框架: 框架起主导作用

框架和库的主要区别 : 控制反转 (谁起主导作用). 框架包含库.

2. MVC 和 MVVM

MVC:

Model View Controler

​ M : 数据层

​ V : 视图层

​ C : 逻辑控制层

​ V =>C=>M => C => V

MVVM:

Model View View Model

​ M : 数据层

​ V : 视图层

​ VM : View Model (在 Vue 中,vm 是 Vue 实例的变量名)

​ V <==> M

​ V => M , 视图层的改变,更新到数剧层

​ M => V , 数据层的改变,更新到视图层

使用 MVVM 要有一种思想: 以后想要 改变视图层, 操作数据层即可,数据更新视图(元素). 数据驱动视图( 数据是核心 )

Vue 的设计受到了 MVVM 的启发,但并没有完全遵循 MVVM.

为什么 Vue 不使用 MVC?

​ 因为MVC 总是操作 DOM,非常影响性能( 每个人实现的过程不一样导致性能也不一样 ).

对于前端来说,操作 DOM 是常有的事,如果频繁操作 DOM,会严重影响页面加载性能, 所以 DOM 操作是前端性能的瓶颈!

MVVM 的优势 : 通过数据的双向绑定,让数据自动双向同步.

3. Vue 的基本使用

​ Vue 是一套用于构建用户界面的渐进式框架 .

• Vue : 处理小型项目
• Vue-router : 管理更多页面
• Vuex : 处理数据

使用 :

<div id='app'>
<h1>{{num}}</h1>
<h1>{{num + 1}}</h1>
</div>

//1.下载 vue
//	在node中安装   npm i vue

//2.引入vue
<script	src='./....vue.js'><script>

//3. 实例Vue
<script	src='./....vue.js'><script>
<script>
//创建vue实例
//{{}}里可以使用data中的数据
const vm = new Vue({
//指定vue的管理边界(vue起作用的区域)
el:'#app',
// 数据
data:{
num:424,
}
})
</script>

插值表达式

{{ }}

插值表达式，又叫小胡子语法，一般放在双标签内，不能在属性中使用。
使用：

• {{ }} 里面只能放js表达式，不能是语句。

• js表达式是指有返回值的
  常见数据类型：值是什么，就返回什么。
  数值类型配合运算符 例如：1+2，三元运算符等有返回值的。

• 语句：例如if语句，for语句，while语句等没有返回值的，不能在{{ }}中使用。