Vue--Vue基础(一)

北城以北88882025-10-05 9:15

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 起步)
- - 3.1基本使用步骤
  - [3.2MVVM 实现原理](#3.2MVVM 实现原理)
- 4.插值表达式
- - 4.1基本语法
  - 4.2支持的内容类型

1.Vue.js 简介

1. 1什么是Vue.js？

渐进式框架：可以逐步采用，从简单功能到复杂应用
专注于视图层：核心库只关注视图渲染
设计理念：通过简单API实现响应式数据绑定和组件化开发
官网：https://cn.vuejs.org/v2/guide/index.html

2.MVVM 模式

2.1 MVC 模式

View（视图）：用户界面
Controller（控制器）：业务逻辑
Model（模型）：数据存储

2.2MVVM 模式组成

Model：数据存储
View：页面展示
ViewModel：业务逻辑处理，数据加工后交给视图展示

2.3MVVM 优势

低耦合：View和Model可以独立变化
可重用性：视图逻辑可以在多个ViewModel中重用
独立开发：开发人员专注业务逻辑，设计人员专注页面设计

3.Vue.js 起步

3.1基本使用步骤

html 复制代码

<!-- 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基本语法

vue 复制代码

{{ expression }}

4.2支持的内容类型

vue 复制代码

<!-- 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>