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>
相关推荐
_殊途21 分钟前
HTML-CSS项目练习
前端·css·html
@AfeiyuO26 分钟前
el-table 表格嵌套表格
前端·elementui·vue
我是华为OD~HR~栗栗呀1 小时前
华为OD-23届-测试面经
java·前端·c++·python·华为od·华为·面试
β添砖java2 小时前
vivo响应式官网
前端·css·html·1024程序员节
麦麦大数据6 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区7 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗7 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长8 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅9 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_9 小时前
Chrome开发者工具
前端·chrome