Vue-Basic

• ES6语法规范
• ES6模块化
• 包管理器
• 原型、原型链
• 数组常用方法
• axios
• promise

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2. root容器里的代码依然符合html规范，只不过混入了一些特外的Vue语法；
3. 容器里的代码破称为【Vue模板】;
4. 容器与实例一一对应；
5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6. ｛｛xxx｝｝中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7. 一且data中的数据发生改变，那么模板中用到该数据的地方也会自动更新；

Vue模板语法有2大类：

1. 插值语法：
   • 功能：“用于解析标签体内容。
   • 写法：｛｛xxx｝｝，xxx是js表达式，且可以直接读取到data中的所有属性。
2. 指令语法：
   • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件..•.）。
   • 举例：v-bind:href="xoox"或简写为：href="xxx"，xoxcx同样要写js表达式，且可以直接读取到data中的所有属性。

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

1. 单向绑定（v-bind）：数据只能从data流向页面。
2. 双向绑定（Y-model）：数据不仅能从data流向页面，还可以从页面流间data。
   #备注

   1. 双向绑定一股都应用在表单类元素上（如：input、select等）
   2. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

1. el有2种写法
   1. new Vue时候h置e1属性。
   2. 先创建Ve刻例，随后再通过vm.$mount('#root')指定el的值。
2. data有2种写法
   1. 对象式
   2. 函数式
      #备注

      data必须使用函数式，否则会报错。

3. 一个重要的原则：
   由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

1. M: 模型(Model): 对应data中的数据
2. V: 视图(View): 模版
3. VM: 视图模型(ViewModel): Vue实例对象
   

观察发现：

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

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

1. Vue中的数据代理

   通过vm对象来代理data对象中属性的操作（读/写）

2. Vue中数据代理的好处

   更加方便的操作data中的数据

3. 基本原理

   通过Object.defineProperty（）把data对象中所有属性添加到vm上。
   为每一个添加到vm上的属性，都指定一个getter/setter。
   在getter/Fetter内部去採作（读/写）data中对应的属性。

1. 定义：要用的属性不存在，要通过已有属性计算得来。
2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3. get函数什么时候执行？
   Answer

   1. 初次读取时会执行一次。
   2. 当依赖的数据发生改变时会被再次调用。
4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
   Note

   1. 计算属性最终会出现在vm上，直接读取使用即可。
   2. 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2. 监视的属性必须存在，才能进行监视！！
3. 监视的两种写法：
   1. new Vue时传入watch配置
   2. 通过vm.$watch监视

1. Vue中的watch默认不监测对象内部值的改变（一层）。
2. 配置deep:true可以监测对象内部值改变（多层）。
   备注：

   1. Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
   2. 使用watch时根据数据的具体结构，决定是否采用深度监视。

1. class样式
   写法:class="xxx" xxx可以是字符串、对象、数组。
   字符串写法适用于：类名不确定，要动态获取。
   对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
   数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式

:style="{fontSize: xxx}"其中xxx是动态值。
:style="[a,b]"其中a、b是样式对象。
Copy

<style>
	[v-cloak]{
		display:none;
	}
</style>
<div id="root">
	<h2 v-cloak>{{name}}</h2>
</div>
Copy

1. 定义组件(创建组件)
2. 注册组件
3. 使用组件(写组件标签)

区别如下：

1. el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
2. data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

使用template可以配置组件结构。

1. 关于组件名:
   - 一个单词组成：
   第一种写法(首字母小写)：school
   第二种写法(首字母大写)：School
   - 多个单词组成：
   第一种写法(kebab-case命名)：my-school
   第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

   注意

   1. 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
   2. 可以使用name配置项指定组件在开发者工具中呈现的名字。
2. 关于组件标签:

   • 第一种写法:

     <school></school>
     Copy

   • 第二种写法：

           <school/>
     Copy

3. 一个简写方式：

const school = Vue.extend(options) 
//可简写为：
const school = options
Copy

1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2. 我们只需要写或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
   即Vue帮我们执行的：new VueComponent(options)。
3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！
4. 关于this指向：
   1. 组件配置中：
      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
   2. new Vue(options)配置中：
      data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
   Vue的实例对象，以后简称vm。