Vue--Vue基础(一)

Vue--Vue基础(一)

文章目录

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>
相关推荐
IT_陈寒3 小时前
Python 3.12新特性实战:5个让你的代码提速30%的性能优化技巧
前端·人工智能·后端
sniper_fandc3 小时前
Vue Router路由
前端·javascript·vue.js
excel4 小时前
为什么 Vue 组件中的 data 必须是一个函数?(含 Vue2/3 对比)
前端
妄小闲4 小时前
成品网站模板源码 网站源码模板 html源码下载
前端·html
知识分享小能手12 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf12 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊12 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel13 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_4462608513 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django