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
