Vue--Vue基础(一)
文章目录
- Vue--Vue基础(一)
-
- [1.Vue.js 简介](#1.Vue.js 简介)
-
- [1. 1什么是Vue.js？](#1. 1什么是Vue.js？)
- [2.MVVM 模式](#2.MVVM 模式)
-
- [2.1 MVC 模式](#2.1 MVC 模式)
- [2.2MVVM 模式组成](#2.2MVVM 模式组成)
- [2.3MVVM 优势](#2.3MVVM 优势)
- [3.Vue.js 起步](#3.Vue.js 起步)
-
- 4.插值表达式
-
1.Vue.js 简介
1. 1什么是Vue.js？
2.MVVM 模式
2.1 MVC 模式
- View（视图）：用户界面
- Controller（控制器）：业务逻辑
- Model（模型）：数据存储
2.2MVVM 模式组成
- Model：数据存储
- View：页面展示
- ViewModel：业务逻辑处理，数据加工后交给视图展示
2.3MVVM 优势
- 低耦合：View和Model可以独立变化
- 可重用性：视图逻辑可以在多个ViewModel中重用
- 独立开发：开发人员专注业务逻辑，设计人员专注页面设计
3.Vue.js 起步
3.1基本使用步骤
<!-- 1. 引入Vue.js -->
<script src="js/vue.min.js"></script>
<!-- 2. 创建视图 -->
<div id="box">
<h1>{{ msg }}</h1>
</div>
<!-- 3. 实例化Vue -->
<script>
var vm = new Vue({
el: '#box', // 挂载元素
data: { // 数据
msg: 'Hello, World!'
}
});
</script>
3.2MVVM 实现原理
View（DOM） ←→ DOM Listeners ←→ Vue（ViewModel） ←→ Data Bindings ←→ Model（JS对象）
4.插值表达式
4.1基本语法
{{ expression }}
4.2支持的内容类型
<!-- 1. JSON数据 -->
<p>{{ obj.name }}</p>
<!-- 2. 数字 -->
<p>{{ 10 }}</p>
<!-- 3. 字符串 -->
<p>{{ "hello Vue" }}</p>
<!-- 4. 表达式 -->
<h1>{{ 2 > 3 ? 'true' : 'false' }}</h1>
<!-- 5. 调用JS函数 -->
<p>{{ msg.charAt(0) }}</p>