初识 Vue

一、介绍

1.Vue.js 是什么

• Vue是一套用于构建用户界面的渐进式框架。

• Vue 只关注视图层， 采用自底向上增量开发的设计。

• Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

• Vue的核心库和一些插件：视图层渲染、组件、路由(vue-router)、状态管理（vuex）

2.特点

• 易用
  在有HTML CSS JavaScript的基础上，快速上手。
• 灵活
  简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。*
• 性能
  20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。

二、安装

1、版本划分

Vue.js分为两个版本：

• 开发版本：包含完整的警告和调试模式

• 生产版本：删除了警告，33.30KB min+gzip

2、引入方式

1、直接用

三、Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

• 创建Vue2实例

    
        
        
    
    
        
        

            {{message}}
        
        
        

        
    

• 创建Vue3实例
  使用Vue3时，需要安装Vue Devtools 在浏览器中

    
        
        
    
    
        

            {{msg2}}
        
        
        
        
            
    

我们已经成功创建了 Vue 应用，现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

vue2与Vue3的响应式原理

• vue2的响应式原理：es5中 Object.defineProperty

• vue3的响应式原理：es6中 proxy

四、DATA数据

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

因此项目中的写法：

let vm = Vue.createApp({
    data(){
        return{
            msg2: "hello Vue3"
        }
    }
})

因此，组件的data必须是函数，并且带return的，理由：

• 组件是一个可复用的实例，同时它本身具有它自身独立的功能模块，这个模块只属于自己的HTML模板，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染
• 将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。

五、插值表达式

1、文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

{{ msg }}

通过使用 v-once 指令你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

这个将不会改变: {{ msg }}

    
{{msg}}
 
    
{{msg}}
 
    

        
    

2、原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令

3、使用 JavaScript 表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

    
{{msg}}

    
{{msg + num2}}

    
{{arr[1]}}

    
{{user.name}}

    
{{arr.length}}

    
{{msg.split("").reverse().join(' ')}}

    
{{num1>num2 ? "是" : "不大于"}}

    
    
{{null}}

{{ }} 只支持表达式，不支持其他语句

{{ var a = 1 }}


{{ if (ok) { return message } }}

六 、Vue.js是如何实现MVVM的

1、如何理解 MVVM ？

• MVC
  • Model 数据 → View 视图 → Controller 控制器
• MVVM
  • MVVM不算是一种创新
  • 但是其中的 ViewModel 是一种创新
  • ViewModel 是真正结合前端应用场景的实现
• 如何理解MVVM
  • MVVM - Model View ViewModel，数据，视图，视图模型
  • 三者与 Vue 的对应：view 对应 template，vm 对应 new Vue({…})，model 对应 data
  • 三者的关系：view 可以通过事件绑定的方式影响 model，model 可以通过数据绑定的形式影响到view，viewModel是把 model 和 view 连起来的连接器

2、如何实现 MVVM

MVVM 框架的三大要素

• 响应式：Vue 如何监听到 data 的每个属性变化
• 模板引擎：Vue 的模板如何被解析，指令如何处理
• 渲染：Vue 的模板如何被渲染成 html，渲染过程是怎样的

3、Vue 如何实现响应式

• 什么是响应式

  • 修改 data 属性之后，Vue 立刻监听到，立刻渲染页面
  • data 属性被代理到 vm 上

• Object.defineProperty

  • 将对象属性的值的设置和访问 (get，set) 都变成函数，可以在当中加入我们自己的逻辑(进行监听)
  • 普通的 JavaScript 对象，做属性修改，我们监听不到，所以需要用到 Object.defineProperty
  • 既能get，又能set，才是双向数据绑定

mvvm.png

4、Vue 如何解析模板

没看懂，后续更新