什么是VueJS?
Vue.js是一个渐进式JavaScript 框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
为什么要学习Vue?
工作里面可能参与写前端, 很大几率使用的就是Vue Vue可以让JS逻辑写起来更加方便, 快速 面试有优势
特点
- 易用
- 灵活
- 高效
MVVM模式
MVVM是Model-View-View-Model的简写。它本质上就是MVC 的改进版。
MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图UI 和业务逻辑分开. MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)Vue.js 是一个提供了 MVVM 风格的==双向数据绑定==的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端开发更加高效、便捷.
入门案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue入门</title>
<script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>
<!--
提醒: idea中的JavaScript的版本一定要是ECMAScript6及以上的版本
vue的使用步骤:
1. 准备一个vue的容器(div),并且指定id,我们需要使用vue的所有标签都放在这个div中
2. 在vue的容器外面(下面)编写script标签,script标签里面就编写vue的代码
3. vue的具体代码如下
-->
<div id="app">
<!--使用插值表达式进行数据的绑定-->
<div id="msg">{{message}}</div>
</div>
<script>
var vue = new Vue({
el:"#app",
data:{//这里面就是所有的数据模型
message:"hello world"
}
});
</script>
</body>
</html>
小结
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本==插值表达式==,Mustache 标签将会被替代为对应数据对象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新.