VUE最强学习宝典01

news2024/9/20 22:37:28

1.Vue是什么？

2. 两种使用方法

3.创建第一个vue实例

4.补充小知识

5.错误查询

1.Vue是什么？

概念：动态构建用户界面的渐进式 JavaScript 框架。

优点：大大提升开发效率(70%)

缺点：需要理解记忆规划-->官网

特点：

遵循 MVVM 模式
编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
它本身只关注 UI, 也可以引入其它第三方库开发项目

2. 两种使用方法

1.Vue核心包开发

场景：局部模块改造

2. vue核心包&Vue插件工程化开发

场景：整站开发

3.创建第一个vue实例

创建Vue实例,初始化渲染

准备容器(Vue所管理的范围)
引包(开发版本包/生产版本包)官网

vue2:Vue.js
vue3:https://cn.vuejs.org

3. 创建实例

4. 添加配置项=>完成渲染

定配置项el data => 渲染数据

el指定挂载点，选择器指定控制的是哪个盒子

data提供数据

代码：

<!DOCTYPE html>
<head>
    <title>hello world!</title>
</head>
<!-- 引入开发包,包含完整的注释跟警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<body>
    <div id="app">
        <!-- 采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统-->
        {{message}}
    </div>
</body>
<script>
    var app = new Vue({
        // 挂载到id为app的DOM元素上
        el: '#app',
        // 将message当中的数据填充
        data:{
            message:"Hello,World!"
        }
    })
</script>

4.补充小知识

1. 什么是DOM？

DOM，即文档对象模型（Document Object Model），是一种用于处理HTML和XML文档的编程接口。它将文档的结构（例如网页的HTML）以对象的形式存储在内存中，从而实现网页与脚本或编程语言的连接。

举个简单的例子：

在我们学习JavaScript的时候，会通过

document.getElementById("demo")

的方式去改变一个id叫demo的元素，那这个其实就是在改变HTML中的元素内容，也就是改变DOM。

那代入到我们的VUE实例当中也是非常好理解的，我们通过VUE挂载了这个id，定义了data去改变这个内容。

2. 为什么el挂载用#?

快去恶补选择器！#是用来告诉框架去查找一个id叫app的元素，.是类选择器。

3. 为什么用{{message}}?

{{ message }} 这种格式通常是在前端模板引擎或框架中使用的插值表达式。这种表达式用于在HTML模板中插入动态数据。

4. 什么是 MVVM模式？

MVVM是Model-View-ViewModel的缩写，它是一种软件架构模式，用于将用户界面（UI）的开发与业务逻辑或后端逻辑分离。这种模式在构建富客户端应用程序时特别有用，尤其是在使用数据绑定技术的情况下。以下是MVVM模式的三个主要组件：

模型（Model）：模型代表应用程序的数据逻辑，如数据库记录、业务实体、验证规则等。它是与应用程序状态和业务逻辑相关的部分，独立于UI。
视图（View）：视图是用户界面的一部分，负责展示数据并接收用户的输入。在MVVM中，视图通常是声明性的，不包含业务逻辑，它通过数据绑定与ViewModel交互。
视图模型（ViewModel）：ViewModel是MVVM模式中的核心，它是模型和视图之间的桥梁。ViewModel暴露公共属性和方法，这些属性和方法通常与视图中的UI元素绑定。ViewModel处理用户交互的逻辑，并将视图的状态与模型的状态同步。

MVVM模式的关键特性包括：