vue基础02

vue 专栏收录该内容
6 篇文章 0 订阅

需要在回顾的

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> 
      *  @事件类型 = '方法名'
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏作者

Zxm?

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值