Vue--Vue基础(一)

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基本使用步骤

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