需要在回顾的
1. Object.defineProperty( 哪一个对象,这个对象的某一个属性, 属性的描述符 )
一. 重点概念记忆要会
-
解释 vue数据响应 【原理】
- Vue是通过数据劫持来对数据进行响应式拦截的,通过的是es5的Object.defineProperty()中的getter和setter 来进行数据劫持的
// Object.defineProperty( 哪一个对象,这个对象的某一个属性, 属性的描述符 ) Object.defineProperty( data, 'msg', { get () { // get是做初始化赋值的 return 'aa' }, set ( val ) {// set是完成数据的重新设置,也就是修改 box.innerHTML = val return ; } })
-
数据响应
- 称呼:什么是 深入响应式原理 ?或者 双向数据绑定原理 ?
- 数据响应指的是: 当数据改变时,视图也会随之改变 ,当用户输入信息时,数据也改变了
-
插值表达式
- 插值表达式对于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事件的书写顺序
- 先定义【 在选项中 】在绑定
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>
* @事件类型 = '方法名'