本文链接： https://blog.csdn.net/darkdecode/article/details/102631258

vue深入响应式原理

数据驱动原理=双向数据绑定原理=深入响应式原理；
深入响应式指的就是数据驱动
底层实现 - es5特性 -> Object.definePropty

vue是通过数据劫持和事件的订阅发布模式来实现的，数据劫持指的是vue通过observer观察者对象对data选项中的属性做getter和setter设置，然后通过事件的事件的订阅发布来监听data中数据的变化，只要数据一边，就会重新出发视图的更新

模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
mustache 语法中是支持写js的

1.用法：

内容：必须加
属性：属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量
* 给一个标签加一个自定义属性/已有属性

img中的src就是已有属性

//data-index就是自定义属性， web网页中建议我们使用data-形式来定义自定义属性

2.研究它js的支持性

数据类型

市场上js的数据类型分类有两种

第一种

初始数据类型： number string null undefine boolean 引用数据类型: Object [ function array … ]
第二种

基础数据类型: number string boolean
特殊数据类型： null undefine
复杂数据类型； Object [ function array …]

输出语法

```
console
```
```
alert
```

表达式 / 运算符

```
三元表达式
```

总结;

null 和 undefined 是不会显示的，其他数据类型都是支持的，可以显示的
挂载在window身上的全局属性，我们都不能用的：比如; console alert
mustache语法中不写流程控制
- for
- if
- while
- do…while
mustache语法中支持三元表达式，同样也支持运算符
- 短路原则也是支持的

指令

指令的目的是操作DOM
数据要想操控DOM,需要依赖指令，因为指令是直接绑定在dom身上的

v-html 转义输出，也就是可以解析 xml 数据
v-text：非转义输出，也就是无法解析 xml 类型数据
v-bind
将数据和属性进行单向数据绑定：将vue中数据赋值给属性值

<img v-bind:src = "src" />
<div v-bind:class = "">
</div>
<div v-bind:style = "">
</div>

简写形式

<img v-bind:src="src" alt="">
<img :src="src" alt="">

类名绑定
- ```
用法
```
  - ```
      对象形式用法
```

 <p :class = "{ bg: true,size: true }"></p>
       <p :class = "{ bg: true,size: false }"></p>
       <p :class = "{ [classA]: true,[classB]: true }">    </p>

数组形式
用法

        <p :class = "[ 'size','bg' ]"></p>
        <p :class = "[ classA,classB ]"></p>
        <p :class = "[ classA,classB,5>3?'a':'b']">  </p>

样式绑定
- ```
用法
```
  - ```
      对象形式用法
```

  <p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p>
   <p :style = "styleObj"></p>

         *         数组形式用法

    <p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p>
    <p :style = "[size,bg]"></p>

条件渲染

v-if(控制元素的存在与否)
v-else-if
v-else
v-show 条件展示 (控制元素的display:none属性)
注意：项目中需要频繁切换使用的用：v-show
如果不是很频繁的切换，用v-if

<h3> 条件渲染 - 单路分支 </h3>
<p v-if = "flag"> A </p>

<h3> 条件渲染 - 双路分支 </h3>
<p v-if = "flag"> A </p>
<p v-else > B </p>

<h3> 条件渲染 - 多路分支 </h3>
<p v-if = "type === '美食'"> 美食 </p>
<p v-else-if = " type === '游戏' "> 游戏 </p>
<p v-else> 睡觉 </p>

<h3> 条件展示 </h3>

<p v-show = " showFlag "> 条件展示 </p>

列表渲染

v-for指令

<h3> 数组 </h3>
<ul>
    <li v-for = "(item,index) in arr" :key = " index ">
         -- index
    </li>
</ul>
<h3> 对象 </h3>
<ul>
    <li v-for = "(item,key,index) of obj" :key = "index">
         --  -- 
    </li>
</ul>
<h3> json </h3>
<ul>
    <li v-for = "item in json" :key = "item.id">
        <span> 商品名称：  </span>
        <span> 商品价格：  </span>
    </li>
</ul>

<h3> 循环嵌套 </h3>

<ul>
    <li v-for = "item in lists" :key = "item.id">
        <h3>  商品类型：  </h3>
        <ul>
            <li v-for = "item in item.type" :key = "item.id">
                <p> 制造商：  </p>
            </li>
            <!-- <li v-for = "ele in item.type" :key = "ele.id">
<p> 制造商：  </p>
</li> -->
        </ul>
    </li>
</ul>

<h3> 循环number / string  </h3>

<p v-for = "item in 10">  </p>
<p v-for = "item in 'abc'">  </p>

总结：

列表渲染参数可以写三个，分别为item key index
列表渲染要在渲染的元素身上加一个key，作为这个元素唯一的标识
循环式嵌套，参数名称是可以一致的
in/of都可以使用

事件处理器

v-on
key的重要性给列表渲染的每一层Vdom添加一个唯一标识，以便diff算法进行同层级比较扩展：理解key

表单控件绑定

v-model

双向数据绑定
- VM 改变 V随之改变
- V改变， VM也随之改变
v-model只用于表单
- 理由： v-model默认绑定value
属性技巧：看到表单直接 v-model

v-bind缩写

<!-- 完整语法 -->  
<a v-bind:href="url">...</a> 
 <!-- 缩写 -->  
 <a :href="url">...</a>

v-on缩写

<!-- 完整语法 --> 
<a v-on:click="doSomething">...</a> 
<!-- 缩写 --> 
<a @click="doSomething">...</a>

学习Vue.js的第二天