1. 初识 Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

构建用户界面 ==>数据渲染到页面上

渐进式 ==> Vue 可以自底向上逐层的应用

简单应用：只需一个轻量小巧的核心库

复杂应用：可以引入各式各样的 Vue 插件

Vue的特点

1.采用组件化模式，提高代码复用率、且让代码更好维护。

2.声明式编码，让编码人员无需直接操作 DOM，提高开发效率。

3.使用虚拟 DOM +优秀的 Diff 算法，尽量复用 DOM 节点。

2. 模板语法

Vue 模板语法有 2 大类

1.插值语法

功能：用于解析标签体内容。

写法：{{xxx}}，xxx 是 js 表达式，且可以直接读取到 data 中的所有属性。

eg：<h1>{{xxx}}</h1>

2.指令语法

功能：用于解析标签（包括：标签属性、标签体内容、绑定事件···）

写法：v-bind:href="xxx" 或简写为 :href="xxx"，xxx 同样要写 js 表达式，且可以直接读取到 data 中的所有属性。

eg: <a :href="xxx"></a>

备注：Vue 中有很多的指令，且形式都是：v-???，此处我们只是拿 v-bind 举个例子。

3. 数据绑定

Vue 中有 2 种数据绑定的方式

单向绑定(v-bind): 数据只能从 data 流向页面。

<input type="text" v-bind:value="xxx">

<input type="text" :value="xxx">

双向绑定(v-model): 数据不仅能从 data 流向页面，还可以从页面流向 data。

<input type="text" v-model:value="xxx">

<input type="text" v-model="xxx">

备注

1.双向绑定一般都应用在表单类元素上（如：input、select 等）

2.v-model:value 可以简写为 v-model，因为 v-model 默认收集的就是 value 值。

4. el 和 data 的两种写法

el 有 2 种写法

(1).new Vue 时候配置 el 属性。

(2).先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定 el 的值。
data 有 2 种写法

(1).对象式

(2).函数式

如何选择：目前哪种写法都可以，以后学习到组件时，data 必须使用函数式，否则会报错。
一个重要的原则

由 Vue 管理的函数：一定不要写箭头函数，一且写了箭头函数，this 就不再是 Vue 实例了。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./package/vue.js"></script>
</head>
<body>
  <div id="app">{{name}}</div>
  <script>
    const vue = new Vue({
      // el: '#app', // el第一种写法
      // data第一种写法：对象式
      /* data: {
        name: 'hello world!'
      } */
      // data第二种写法：函数式
      data(){
        return {
          name: 'hello world!'
        }
      }
    })
    setTimeout(()=> {
      vue.$mount('#app') // el第二种写法
    }, 1000)
  </script>
</body>
</html>

5. MVVM

MVVM 模型

M：Model模型，data中的数据
V：View视图，模板代码
VM：ViewModel视图模型，Vue实例对象

观察发现： 1.data 中所有的属性，最后都出现在了 vm 身上。 2.vm 身上所有的属性及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。

6. 数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） Object.defineProperty：给一个对象添加属性如果数据发生变化通过getter和sertter进行依赖收集通知Watcher进行视图更新通过getter收集依赖，修改时通知watcher更新视图，对数据的操作（读/写）进行拦截

参考自CSDN博主「不~困」的原创文章原文链接：blog.csdn.net/qq_45803094…

let obj = {x: 'x'}
let obj2 = {}
// 改变obj2的值，obj也跟着变
Object.defineProperty(obj2, 'x', {
  get(){
    return obj.x
  },
  set(value){
    obj.x = value
  }
})

Vue学习笔记