vue基础02

需要在回顾的

1. Object.defineProperty( 哪一个对象，这个对象的某一个属性， 属性的描述符 )

一. 重点概念记忆要会

1. 解释 vue数据响应 【原理】

   • Vue是通过数据劫持来对数据进行响应式拦截的，通过的是es5的Object.defineProperty()中的getter和setter 来进行数据劫持的

   // Object.defineProperty( 哪一个对象，这个对象的某一个属性， 属性的描述符 )
   Object.defineProperty( data, 'msg', {
   get () { // get是做初始化赋值的
     return 'aa'
   },
   set ( val ) {// set是完成数据的重新设置，也就是修改
     box.innerHTML = val 
     return ;
   }
   })
   

2. 数据响应

   • 称呼：什么是 深入响应式原理 ？或者 双向数据绑定原理 ？
   • 数据响应指的是： 当数据改变时，视图也会随之改变 ,当用户输入信息时，数据也改变了

3. 插值表达式

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

三目运算符： {{ 5 > 3 ? '🏈' : '🚀' }}

短路原则： {{ 5 > 3 && '🚀' || '🏈' }}

数组操作： {{ stri.split('').reverse().join('') }} 支持数组的方法

{{ name.length }} 有长度属性

{{name.length===2?'短名':'长'}} 支持表达，条件判断

特点

1. 当我们new Vue()后 得到了一个<root/> 根组件
2. data里面的数据改变时，界面也变化
3. 数据劫持的对象时Vue中的data选项
4. data选项外定义的数据,不响应

二. vue指令（作用:操作DOM） 必须会

1.指令基础

v-bind:src，简写的话可以写成 :src
v-bind:src=“imgUrl”, v-bind:value=“val”

v-html vs v-text 都能绑定html标签，区别？

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

    <p v-html="xml"></p>
    <p v-text="xml"></p>
    <h3> 单项数据绑定 v-bind </h3>

    <img v-bind:src="imgUrl" alt="">
    <img :src="imgUrl" alt="">
   
    <input type="text" v-bind:value="val">

总结： 
      1. 属性用法是不加 {{}}
      2. 但是属性上要加指令，v-bind：或者 ：

2.v-bind 绑定类名

1. 对象形式(2种写法)
:class = “{ 类名：布尔值, 类名：布尔值 }”
:class="{ [ a ]: true, [ b ]: true }"
上面那种写法 a,b,是vue数据里面的键名，bluebg,和red,是css里面的类名, data: {a:’ bluebg ', b: ’ red ’ },

        <!-- <p :class = "{ 类名：布尔值, 类名：布尔值 }"> 
            对象形式绑定类名，可以绑定多个类 名，是css样式里面的
        </p> -->
        <p :class="{red :flag ,bluebg: true}"> 对象形式</p>

   <!--
            bluebg,和red,是css里面的类名， 
            data: {a:' bluebg ',   b: ' red '  }, 
            a,b,是数据里面的键名，
        -->

        <p :class="{  a  : true, [ b ]: true }">，给元素绑定类名的另一种写法</p ：>
        <!-- 输出的结果是<p class="a  red ">
            会把a 当成 要添加的类名，
            所以才要加一个[ a ] :true ,  -->

        <p :class="{ [ a ]: true, [ b ]: true }">
            给元素绑定多个类名,类名的数据取于vue上面的数据
         </p>

2. 数组形式绑定类名
写法是： :class ="[‘类名’,‘类名’]" 也支持表达式 ，绑定的类名和元素本身上的类名不冲突

  <!-- [ 数组里面直接写类名但是字符串所以要加引号 ] 
            :class ="['类名','类名']"，bluebg是css样式里面的，
        -->
        <p :class="['bluebg','red']">数组形式绑定一个或多个类名</p>
        <!-- []数组形式加类名，也支持表达式 -->
        <p :class="['bluebg',false && 'bluebg' ||'green']"> 数组形式,可以写表达式,短路为止</p>

        <!-- 绑定的类名和元素本身上的类名是累加的，p上会有三个类名 -->
        <p class="btn" :class="['bluebg','red']">绑定的类名不影响本身元素上的类名</p>

3. 绑定行内样式
对象形式 :style="{css属性名：css属性值,css属性名：css属性值}"
数组形式 :style="[{width:‘200px’,height:‘200px’},{background:‘yellow’}]" ,css会累到一起显示界面
:style="[ chicun,yanse ]" 绑定data里面的数据

        <p :style="{
            width:'100px',
            height:'100px',
            background:'purple',
        }">对象形式</p>

        <p :style="[{width:'200px',height:'200px'},{background:'yellow'}]">数组形式</p>

        <!-- data:{
            chicun: {
            width: '200px',
            height: '200px'
            },
            yanse: {
            background: 'red'
            },
        } -->
        <!-- data数据里面已经把行内样式的内容，写到数据里面了，chicun,yanse，是data里面的键名 -->
        <p :style="[ chicun,yanse ]"></p>

3.条件渲染

v-if, v-else, v-else-if ,
template v-if ,包装元素template 不会被创建
v-show 和 v-if 的区别
v-if=‘showTitle’, showTitle是数据模型上的数据，是布尔值 ture显示，否相反，控制的是元素存在与否
v-show = “flag” , flag也是布尔值，相当于是把display:none 改变css样式来实现显示隐藏
v-show 可以配合事件来切换显示隐藏
v-show=‘showTitle’> 显示隐藏来切换
@click=‘showTitle=!showTitle’ 切换

    <div v-for="student of students" class="box">
        {{student.name}} 得分 {{ student.score }}
        <h1 v-if='student.score<60'>
            努力加油
        </h1>
        <h2 v-else-if='student.score>=60&&student.score<=90'>
            继续努力
        </h2>
        <h3 v-else>
            不要骄傲
        </h3>
    </div>
    <!-- v-show显示 -->
   <p v-show = "flag"> 条件展示 </p>

4.列表渲染

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

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

    <!-- 嵌套型数据渲染,nest数组里面套对象，对象里面又有数组对象 ，两层嵌套也都有局部作用域-->
        <ul>
          <li v-for = " item of nest " :key = "item.id">
            <h3> {{ item.type }} </h3>
            <ul>
              <li v-for = " ele of item.category" :key = "ele.id">
                <p> {{ ele.type }} </p>
              </li>
            </ul>
          </li>
        </ul>

渲染number类型数字,渲染string,一伪数组渲染,json类型数据,使用方法一样

       <ul>
          <li v-for = "(item,index) in arr" :key = "index"> {{ item }} </li>
        </ul>

普通对象渲染,item是对象的属性值

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

5.事件渲染

事件使用方法
@事件类型 = ‘方法名’,第二种写法 v-on:click = ‘数据模型，methods里面的方法’

  <!-- 事件添加，触发一个事件调用methods 里面的方法-->
  <button @click = "increment"> + </button>
    <h3> 事件传参 </h3>
    <button @click = "argHandler( 10,20 )"> 事件传参 </button>
    <button @click = "argsHandler( $event,10,20 )"> 事件传参 </button>

总结:Vue事件的书写顺序

1. 先定义【 在选项中 】在绑定
   Vue中的事件为原生事件，事件对象为原生事件对象,只有一个事件参数时可以不用传参，就能直接获取
   问题： 如果我们事件的参数既有事件对象，又有普通参数argsHandler( $event,10,20 )

    * 回顾： 原生js有几种事件添加形式？
      * DOM0  dom元素.onclick = function () {}
      * DOM0  <div onclick = "hander()" ></div>
      * DOM2  事件监听
      * 
    * Vue中使用
      *  <div v-on:click = "hander"></div>  
      *  简写形式： <div @click = "hander"></div> 
      *  @事件类型 = '方法名'