vue的基本介绍

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语句等没有返回值的,不能在{{ }}中使用。

以上是 vue的基本介绍 的全部内容, 来源链接: utcz.com/z/378328.html

回到顶部