Vuejs 的基础入门知识

最新推荐文章于 2024-06-16 17:03:37 发布

§九千七§

最新推荐文章于 2024-06-16 17:03:37 发布

阅读量146

点赞数

分类专栏： Vue 文章标签： vue java

本文链接：https://blog.csdn.net/chuli0327/article/details/113247595

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vuejs

1 . Vue 的简介

Vue 是一个渐进式的框架, 什么是渐进式呢?
- 渐进式意味着你可以将 Vue 作为应用的一部分嵌入其中, 带来更丰富的交互体验
- 或者如果你希望将更多的业务逻辑使用 Vue 实现, 那么 Vue 的核心库以及其生态系统
- 比如 Core + Vue-router + Vuex , 也可以满足各种各样的需求

2 . Vue 的特点

Vue 有很多特点和 Web 开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM

3 . Vue 学习前置知识

学习 Vuejs 前提
- 具备一定的 HTML + CSS + javaScript
- 编程范式
  - 命令式编程
  - 声明式编程

4 . Vue 的三种安装方式

4 . 1 . CDN 直接引入

开发环境版本
- 开发环境版本具有命令行等警告, 和帮助开发的命令提升等
- 包含完整的警告和调试模式
生产环境版本
- 优化了尺寸和速度, 更利于用户直接使用
- 删除了警告，33.30KB min+gzip 也就是一个压缩版本

4 . 2 下载和引入

开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

4 . 3 NPM 安装

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

5 . 第一份 Vue 实例

<div id="app"> {{message}} </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //let (变量) 用于接收变量数据
    //const (常量) 用于接收常量数据
    const app = new Vue({
        el : '#app',       //用于挂载要管理的元素
        data : {           //定于数据
            message : 'qi'
        }
    })
</script>

5 . 1 代码做的事情

创建 Vue 对象的时候, 传入了一些 options : {}
{} 中包含了 el 属性 : 该属性决定了这个 Vue 对象挂载到哪一个元素上, id = app
{} 中包含了 data 属性 : 该属性中通常会存储一些数据, 这些数据可以是我们直接定义出来的, 也可能是来自网络, 从服务器加载的

5 . 2 Vue 中代码执行流程

HTML 是自上而下的解析代码
当解析到 div id = app 时显示对应的 HTML
当执行到创建 Vue 实例时, 对原 HTML 进行解析和修改

6 . Vue 的 MVVM

6 . 1 什么是 MVVM

维基百科
- MVVM（Model–view–viewmodel）是一种软件架构模式。
- MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。
- MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象

6 . 2 Vue 中的 MVVM

数据绑定, 响应式绑定
DOM 监听

6 . 2 . 1 View 层

视图层
在前端开发中, 通常就是 DOM 层
主要的作用就是给瀛湖展示各种信息

6 . 2 . 2 Model 层

数据层
数据可能时我们固定写死的数据, 也可能时来自我们服务器, 从网络上请求下来的数据

6 . 2 . 3 ViewModel

视图模型层
视图模型层时 View 和 Model 沟通的桥梁
一方面它实现了 Data Binding, 也就是数据绑定, 将 Model 的改变实时的反应到 View 中
另一方面它实现了 DOM Listener, 也就是 DOM 监听, 当DOM发生一些事件 ( 点击, 滚动, touch等 )时, 可以监听到, 并在需要的情况下改变对应的 Data

6 . 2 . 4它们之间工作方式

ViewModel 通过 Data Binding 让 app 中的数据实时在 DOM 中显示
ViewModel 通过 DOM Listener 来监听 DOM 事件, 并且通过 methods 中的操作, 来改变 app 中的数据
有了 Vue 帮助我们完成 VueModel 层的任务, 在后续的开发, 我们可以专注于数据的处理, 以及 DOM 的编写工作

7 . Vue 的小案例 -> 计数器

<div id="app"> {{count}}
    <button v-on:click="count++"> + + </button>
    <button v-on:click="count--"> - - </button>
    <button v-on:click="add">add</button>
    <button v-on:click="sub">sub</button>
</div>

<script>
    //let (变量) 用于接收变量数据
    //const (常量) 用于接收常量数据
    const app = new Vue({
        el : '#app',       //用于挂载要管理的元素
        data : {           //定于数据
            message : 'qi',
            count : 0
        },
        methods : {
            add : function(){
                console.log('add 被执行');
                this.count ++;
            },
            sub : function(){
                console.log('sub 被执行');
                this.count --;
            }
        }
    })
</script>