巩固vue基础

数据响应

名称：深入响应式原理、双向数据绑定原理
数据响应指的是：当数据改变时，视图也会随之改变，当用户输入信息时，数据也改变了

这是Vue2.0的原理

---

vue数据响应原理

vue是通过数据劫持来对数据进行响应式拦截的，通过使用es5的Object.defineProperty中的getter 和setter来进行数据劫持的

Object.defineProperty(data,'msg',{
get(){get是做初始化赋值的},
set(){set是完成数据的重新设置，也就是修改}
})

• 这个数据劫持的对象是vue中的data选项
• 如果在data选项外定义数据，那么是不响应的
  我们new Vue( )后得到了一个< Root/ >根组件

1.第一种表现：数据改，视图改

{{msg}}

2.第二种表现：视图修改，数据改变

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

v-html 和v-text的区别

• v-html 可以解析xml类型数据，但是v-text不行

插值表达式

1.内容用法

<p> {{msg}} </p>

2.属性用法(也叫 “指令” )

vue的新概念：指令

<img v-bind:src="imgUrl" >
简写为 <img :src="imgUrl" >

原生写法如下（功能和上述一致）

const img = docunment.querySelector('img')
img.src = vm.imgUrl

属性用法不加{{ }},但是前面要加指令，V-
指令实际上是操作dom

---

插值表达式 js的支持性

js基本语法：输出语法、流程控制、运算符

输出语法（console.log）、流程控制(for 循环) ,在vue中不可以用,。运算符可以用

插值表达式对于js数据类型是支持的
window 对象下的全局变量都不能用 window.console.log window.location.

v-bind

1.绑定类名

<p :class="{类名:布尔值}">对象形式 </p>

<p :class="{size:true,bg:true}">对象形式 </p>
<p :class="['size',true &&'bg'||'blue']">数组形式 </p>
<p class="btn" :class = "['size','bg']"> 不影响类名</p>

对象里面的key如果是变量要加中括号[]
 <p :class = "{ [classA]: true,[classB]: true }"></p>

2.绑定行内样式

<p :style = "{width:'100px', height:'100px'}">对象形式</p>
<p :style = "[{width:'100px'},{height:'100px'}]">数组形式</p>

条件渲染

1.单路分支

<p v-if = "5>3"> 单路分支</p>

2.双路分支

<p v-if = "5>3"> 双路分支1</p>
<p v-else> 双路分支2 </p>

3.多路分支

 <p v-if = "grade < 60 "> 不及格 </p>
 <p v-else-if = " grade >= 60 && grade < 80"> 良好 </p>
 <p v-else> 优秀 </p>

条件展示

v-show 性能损耗高，因为相当于display:none
频繁切换用 V-show  （避免频繁渲染dom）
如果不是很频繁的切换，用V-if (不渲染，省性能）(元素存在与否）

渲染

每次循环后 加一个key ， ：key

 <li v-for = "(item,index) of num" :key = "index" > {{ item }} -- {{ index }}</li>


  <!-- 普通对象渲染 -->
        
        <ul>
          <!-- item是对象的属性值 key是对象的属性  index是对象的索引-->
          <li v-for = " (item,key,index ) of obj " :key = "index"> {{ item }} -- {{  key }} -- {{ index }} </li>
        </ul>

key的作用是为了区别每一个渲染的dom结构

key使用经验：
- 简单数据渲染， key可以省略
- 复杂数据渲染， key必须添加
key最好使用id，次之使用index

嵌套型数据渲染中
<li v-for = " item of nest ">
            <h3> {{ item.type }} </h3>
            <ul>
              <li v-for = " ele of item.category">
                <p> {{ ele.type }} </p>
              </li>
            </ul>
   </li>
第一层的item将作为第二层的父级元素即为item.catagory 所以名字要对应得上

事件

<div v-on:click = "hander"></div>

简写为 <div @click = "hander"></div>
@事件类型=‘方法名'

vue事件的书写顺序
先定义，然后在选项中再绑定(定义中写在methods中）

vue中的事件为原生事件，事件对象为原生对象事件

 * DOM0  <div onclick = "hander()" ></div>
  * DOM2  事件监听