Vue学习笔记（篇一）——Vue.js基础知识

红太狼 2023-10-08 12:55 27阅读 0赞

## 一、Vue.js基础知识 ##

### （一）Vue是一个渐进式框架，什么是渐进式？ ###

1、渐进式意味着你可以将Vue作为你的应用的一部分嵌入其中，带来更丰富的交互体验。

2、或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。

3、比如Core+Vue+router+Vuex，也可以满足你各种各样的需求。

### （二）Vue有很多特点和Web开发中常见的高级功能 ###

1、解耦视图和数据

2、可复用的组件

3、前端路由技术

4、状态管理

5、虚拟DOM

### （三）安装Vue的方式： ###

#### 1、直接CDN引入 ####

你可以选择引入开发环境版本还是生产环境版本：

#### 2、下载和引入 ####

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

#### 3、NPM安装 ####

### （三）第一个Vue程序 ###

**代码做了什么事情？**

> 我们来阅读JavaScript代码，会发现创建了一个Vue对象。
> 
> 创建Vue对象的时候，传入了一些options：\{\}
> 
> \{\}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到 了id为app的元素上
> 
> \{\}中包含了data属性：该属性中通常会存储一些数据
> 
> 这些数据可以是我们直接定义出来的，比如像上面这样。
> 
> 也可能是来自网络，从服务器加载的。
> 
> 浏览器执行代码的流程：
> 
> 执行到10~13行代码显然出对应的HTML
> 
> 执行第16行代码创建Vue实例，并且对原HTML进行解析和修改。
> 
> 并且，目前我们的代码是可以做到响应式的。

<div id="app">
        <h2>{
       {message}}</h2>
        <h1>{
       {name}}</h1>
        <p>{
       {name}}</p>
    </div>
    
    <div>{
       {message}}</div>
    
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message: '你好啊！Vue！',
                name: 'Etui'
            }
        });
    </script>

### （四）Vue中的MVVM，组成部分 ###

#### 模型 ####

模型是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。

#### 视图 ####

就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。

#### 视图模型 ####

视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器（英语：Data binding）之间进行通信。

#### 绑定器 ####

声明性数据和命令绑定隐含在MVVM模式中。在Microsoft解决方案堆（英语：solution stack）中，绑定器是一种名为XAML的标记语言。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。在微软的堆之外实现时，声明性数据绑定技术的出现是实现该模式的一个关键因素。

### （五）创建Vue实例传入的参数(options) ###

#### 你会发现，我们在创建Vue实例的时候，传入了一个对象options。 ####

#### 这个options中可以包含哪些选项呢？ ####