v-mode双向数据绑定（重点）
基本使用：给表单元素使用，双向数据绑定
（1）当数据变化了，视图也会跟着变化
（2）视图变化了，数据也会跟着变化（输入框内容变化了（监听用户的输入，监听input事件），数据也要跟着变化）
语法：v-model = ‘值’
<input type="text" v-model="msg">
注意点：当v-model处理其他表单元素的时候，v-model会忽略掉表单元素原本的value，checked等初始值
v-model的修饰符
v-model.number，将用户的输入的值转换为数字类型
v-model.trim，自动过滤掉用户输入的首位空白字符
v-lazy，在change时而非input时过呢更新数据，v-model默认情况下，当我们输入完毕，vue就会获取的表单输入框中的数据，但是修改以后，是我们失去焦点的时候，vue会获取到表单输入框中的数据
<template>
<div>
<button @click="dian">点击获取输入框中的最新的值</button>
<input type="text" name="" id="" v-model.lazy="count">
<hr>
<input type="checkbox" name="" id="1" v-model="flag">
<h3>{{flag === true ? `选中`:`未选中`}}</h3>
<hr>
<input type="radio" name="" id="" value="1" v-model="check"> 男性
<input type="radio" name="" id="" value="2" v-model="check"> 女性
<button @click="dianji">点击提交</button>
<hr>
<input type="radio" name="" id="" v-model="card" value="1"> 身份证
<input type="radio" name="" id="" v-model="card" value="2"> 护照
<input type="radio" name="" id="" v-model="card" value="3"> 学生证
<input type="radio" name="" id="" v-model="card" value="4"> 驾驶证
<input type="radio" name="" id="" v-model="card" value="0"> 其他
<button @click="tijiao">点击提交</button>
</div>
</template>
<script>
export default {
name: "v-model",
data () {
return {
flag : true,
count : `10`,
check : true,
card : true
}
},
methods : {
dian () {
// 点击提交的时候，希望获取到输入框中最新的数值
console.log(this.count)
// 我们输入完以后想到获取到number型
console.log(Number(this.count))
},
dianji() {
console.log(this.check)
},
tijiao() {
console.log(this.card)
}
}
}
</script>
v-for（遍历）
基本使用：遍历对象和数组，通常用来遍历数组
<template>
<!--v-for循环，作用进行遍历的，数组，对象，数字-->
<!-- for循环的时候必须添加一个key，这里的key最好是数据的唯一标识-->
<!-- 如果没有唯一标识，可以使用所用引号（不写key会报错），但是不推荐索引号-->
<div class="box">
<ul>
<li v-for="(item,index) in arr" :key="index">数组的值：{{item.title}} 数组的索引：{{index}}</li>
</ul>
<hr>
<h3>渲染王路飞信息</h3>
<ul v-for="(value,key) in obj">
<li>对象的值：{{value}} 对象的键{{key}}</li>
</ul>
<hr>
<ul>
<li v-for="(item,index) in number">这个是字符串中的每一个值：{{item}} 这个是索引：{{index}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "07-v-for循环",
data () {
return {
// 遍历数字
number : `12345678`,
// 遍历对象
obj : {name : `王路飞`, age : `18`, msg : `尼卡果实`,},
// 遍历数组
arr : [
{id : 0, title : `学习`,},
{id : 1, title : `学习1`,},
{id : 2, title : `学习2`,},
{id : 3, title : `学习3`,},
{id : 4, title : `学习4`,},
{id : 5, title : `学习5`,},
]
}
}
}
</script>
虚拟dom和diff算法（可以修改原数组的7种方法）
什么叫做虚拟dom：
概念：虚拟dom本质上是一个js对象，用于描述真实的dom结构
数据跟更新的时候，根据老的虚拟dom结构和新的虚拟dom结构，进行对比，找出差异（需要更新的地方），真实的更新到dom结构里面（打补丁）
使用索引号当作key值，当添加到首位的时候，会把所有的dom节点重新创建一次
为什么使用唯一key值：
当我们使用唯一key值得时候，新旧虚拟dom会对比key值，只更新创建的key值，会最小化的更新dom
使用v-for的时候，如果添加了key为当前的数据的唯一标识的时候，domdiff的时候，就能找到可以复用的元素，最小化的dom更新
对比虚拟dom的算法叫做diff算法
key值的要求是
字符串或者数值，唯一不能有重复
有唯一id使用唯一id，没有唯一id的时候使用索引，使用索引只能让页面没有报错，不能解决唯一key值得问题，更新得时候会对比索引，会出现错误显示
唯一key得好处：提高虚拟dom得对比复用性能，只要是写列表渲染的时候，都推荐添加key属性，且key推荐使用id，索引号添加以后只能解决报错，不能解决唯一id值
diff算法：
策略1：
先同层级根元素比较，如果根元素变化，那么步考虑复用，整个dom树删除重建
先同层级根元素比较，吐过根元素不变，对比出属性得变化更新，并考虑往下递归复用
策略2：
对比同级兄弟元素时，默认按照下标进行对比复用
对比同级兄弟元素时，如果指定了唯一key值，就会按照相同key元素进行对比
<template>
<div>
<ul>
<li v-for="(item,index) in arr">{{item}}</li>
</ul>
<button @click="aa">修改数组元素</button>
<button @click="bb">修改数组元素</button>
</div>
</template>
<script>
// 可以改变原数组的7种方法
// push(),pop(),shift(),unshift(),splice(),sort(),reverse(),
// vue提供的可以修改数组某一项的方法$set(需要修改的数组，索引，数值)
export default {
name: "08-vue中的数组方法",
data () {
return {
arr : [4,5,7,6,8,9]
}
},
// 修改了数组，界面就是响应式更新
methods : {
aa () {
this.arr.push(this.arr[0])
// 删除掉第一项
this.arr.shift()
},
bb () {
this.$set(this.arr,1,100)
}
}
}
</script>
样式处理：v-bind对于class得增强和v-bind对于style增强
v-bind对于类型操作的增强，注意点：class不会影响到原来的class属性
作用：设置动态属性，针对class和style进行增强
允许使用对象或者数组，对象如果键值对的值为true，那么就会有这个属性，如果时false就没有这个属性，数组：数组种所有的类都会添加到盒子上
v-bind绑定class
<template>
<div>
<div :class="{ red:show }" >时不我待</div>
<div :class="{ orange:orange }" @click="bb">学而时习之</div>
<button @click="show = !show" >点击切换红色</button>
<button @click="bb" >点击切换橙色</button>
<div :class="classs">添加classs多个数组样式</div>
</div>
</template>
<script>
export default {
data(){
return {
show : true,
orange : true,
classs : [`a`,`b`,`c`,`d`]
}
},
methods : {
bb () {
this.orange = !this.orange
},
}
}
</script>
<style scoped>
.red {
color: red;
}
.orange {
color: orange;
}
</style>
v-bind绑定style样式
<template>
<div>
<div :style="mainStyle">时不我待</div>
<br>
<div :style="[otherStyle,mainStyle]">路漫漫其修远兮</div>
</div>
</template>
<script>
export default {
name: "10-动态绑定style",
data () {
return {
mainStyle : {
color : `red`,
fontSize : `20px`,
fontWeight : `bold`,
},
otherStyle : {
background : `pink`
}
}
}
}
</script>
computed定义计算属性
作用：我们根据已有的属性值，计算出来我们需要的属性值，就会使用到计算属性
使用computed定义计算属性：
定义的计算属性需要时一个函数，返回一个计算结果，return出来一个返回值
计算属性，只有它所依赖的属性值发生变化的时候，才会重新进行计算
总结：computed和methods的区别
methods：只要当前组件的任何数据有更新，methods肯定要重新执行一次
computed：当前的组件有数据更新的时候，但是当前依赖的属性值没有更新的时候，就不会进行重新更新
计算属性的特点，计算属性计算的值，可以进行缓存
计算属性只要计算一次，就会把结果缓存起来，以后多次使用计算属性，直接调用的是缓存结果，并且只计算一次
计算属性所依赖的属性值，一旦发生了变化，计算属性就会重新计算一次，并且进行缓存
计算属性依赖的值是什么？计算属性所依赖的数据。也就是说计算属性中所依赖的数据进行了变更才会更新数据
<template>
<div>
Number1 <input type="text" name="" id="1" v-model.number="one">
Number2 <input type="text" name="" id="2" v-model.number="two">
<h2>总和{{he}}{{he}}{{he}}{{he}}{{he}}</h2>
<h2>methods求出总和{{zonghe()}}{{zonghe()}}{{zonghe()}}{{zonghe()}}</h2>
<h2>数组的累加和{{Arr}}</h2>
</div>
</template>
<script>
export default {
data () {
return {
one : ``,
two : ``,
arr : [1,3,4,6,7,9]
}
},
computed : {
he () {
console.log(`computed进行调用了`) // computed每次调用只调用了一次
return this.one + this.two
},
Arr () {
return this.arr.reduce((p,i) => {return p + i},0)
}
},
methods : {
zonghe () {
console.log(`methods进行调用了`) // methods调用,使用一次这个方法我们就会调用一次
return this.one + this.two
}
}
}
</script>
computed计算属性的两种写法
computed计算属性的最大特点就是有缓存
使用场景：我们对现有的属性值进行计算，求出新的属性值
什么时候会开始进行计算，当computed依赖的数据发生改变的时候会进行重新计算，并且缓存新的计算的属性值
如果页面使用到多次同一个计算属性，不会进行多次计算直接使用缓存的属性值
当我们的计算属性被修改了，不可以，默认情况下，计算属性是不可以被修改的，如果被修改了会报错
报错内容：计算属性被修改了，但是没有提供对应的setter方法
所以我们使用到computed计算属性的第二种写法，不仅可以获取值，还可以修改计算属性
方法：计算属性写成一个对象，并且为他提供get和set方法
get方法用于计算当前的计算属性的值
set方法当修改计算属性的值得时候会触发，可以通过修改形参获取到修改之后得最新得值
<template>
<div>
<input type="text" name="" id="1" v-model.number="one" placeholder="加一前得数据">
<input type="text" name="" id="2" v-model.number="two" placeholder="加一后得数据">
</div>
</template>
<script>
export default {
data () {
return {
one : ``
}
},
computed : {
two : {
get () { //get方法就是获取到已有数据计算得结果
return this.one + 1
},
set (value) { //set方法可以对计算结果进行修改并且不会报错,value是获取到得计算结果
return this.one = value - 1
}
}
}
}
</script>
watch属性侦听器
computed计算属性
作用：根据已有得属性，进行计算得出计算属性，注意点计算属性里面不能有异步操作
watch属性侦听器
作用：监听现有属性的变化，当属性发生变化以后做一些其他的操作。监听现有的属性的变化，做一些其他操作
默认情况下watch首次是不会执行监听的
需要watch首次执行监听使用 immediate ： true
默认监听的是复杂数据类型地址是否发生变化，属性侦听器，默认情况下监听的都是普通数据类型，如果想要监听复杂数据类型。deep：true
开启深度监听以后，不管他内部的任何属性发生了变化，我们都可以监听到
特性：可以进行异步操作
<template>
<div>
<input type="text" name="" id="1" v-model.number="one" placeholder="我们想要监听数据">
<input type="text" name="" id="1" v-model.number="obj.name" placeholder="我们想要监听的对象数据">
</div>
</template>
<script>
export default {
data () {
return {
one : ``,
obj : {
name : ``
}
}
},
watch : {
one (newOne,oldOne) {
console.log(`普通数据:新的属性:${newOne}`)
console.log(`普通数据:旧的属性:${oldOne}`)
},
obj : {
handler (newName,oldName) {
console.log(`对象:新的属性:${newName}`)
console.log(`对象:旧的属性:${oldName}`)
},
immediate : true, //开启首次监听
deep : true //进行深度监听,监听到对象内部数据的变化
}
}
}
</script>
标签：key,return,computed,dom,bind,计算,属性 From： https://www.cnblogs.com/hgng/p/17024330.html