目录
这里是第二次发的关于学习Vue的一些知识点，都是一些比较实用点。
通过key来管理状态
当使用v-for渲染之后，如果数据项顺序改变，Vue不会随着dom元素顺序移动，而是就地更新元素，确保在原本指定的位置上渲染。为了方便跟踪，所以要为每个元素对应的块提供一个唯一的key。
key通过v-bind绑定属性，推荐在什么时候都能使用，是一个基础类型的值。
因为顺序会发生变化，所以不推荐用index，应该使用唯一索引。
javascript
<template>
<h3>列表渲染</h3>
<p v-for="(value, key, index) of user">{{index}}-{{key}}-{{value}}</p>
<div v-for="item of result" :key="item.id">
<p>{{item.title}}</p>
</div>
</template>
<script>
export default {
data() {
return{
user:{
name: ["2132",123214],
age: 13,
},
result: [
{
"id": 1,
"title": "133",
},
{
"id":2,
"title":"123",
}
]
}
}
}
</script>事件处理
使用v-on来监听事件，事件处理分为
-
内联：事件被触发的时候执行内联语句
-
方法：一个指向组件上定义的方法的属性名或是路径
内联事件处理器
javascript
<template>
<h3>内联事件处理器</h3>
<button @click="count++"> Add</button>
<p>{{count}}</p>
</template>
<script>
export default{
data(){
return{
count: 0
}
}
}
</script>
<style scoped>
</style>方法事件处理器
javascript
<template>
<h3>方法事件处理器</h3>
<button @click="addCount"> Add</button>
<p>{{count}}</p>
</template>
<script>
export default{
data(){
return{
count: 0
}
},
methods:{
addCount(){
//在这里进行操作
this.count++
console.log("点击了")
}
}
}
</script>
<style scoped>
</style>事件传参
事件参数可以获取event对象和通过事件传递数据
获取event
javascript
<template>
<h3>方法事件处理器</h3>
<button @click="addCount"> Add</button>
<p>{{count}}</p>
</template>
<script>
export default{
data(){
return{
count: 0
}
},
methods:{
addCount(e){
e.target.innerHTML = "aadd" + this.count
this.count++
}
}
}
</script>
<style scoped>
</style>传递参数
javascript
<template>
<h3>事件传参</h3>
<p @click= "getNameHandler(item)" v-for="(item, index) of names" :key="index">{{item}}</p>
</template>
<script>
export default {
data() {
return {
names: ["bob", "jack", "marry"]
}
},
methods: {
getNameHandler(name){
console.log(name)
}
}
}
</script>
<style scoped>
</style>传参的过程中获取事件对象
javascript
<template>
<h3>事件传参</h3>
<p @click= "getNameHandler(item, $event)" v-for="(item, index) of names" :key="index">{{item}}</p>
</template>
<script>
export default {
data() {
return {
names: ["bob", "jack", "marry"]
}
},
methods: {
getNameHandler(name, e){
console.log(name)
console.log(e)
}
}
}
</script>
<style scoped>
</style>事件修饰符
在处理事件的时候，调用方法很常见，为了能够更好的去处理事件的逻辑有了事件修饰符很多的可以在官网上查看
阻止事件描述符
javascript
<template>
<h3>事件描述符</h3>
<!-- //这里可以之间使用-->
<a @click.prevent="clickHandle" href="https://www.bilibili.com/video/BV1Rs4y127j8?p=13&spm_id_from=pageDriver&vd_source=2a222b50c15b9af66c7ffac6c7740bde">bilibili</a>
</template>
<script>
export default {
data() {
return {}
},
methods: {
clickHandle(e) {
// e.preventDefault()这里也就不需要了，阻止了事件的发生
console.log("点击了")
}
}
}
</script>
<style scoped>
</style>阻止事件冒泡
javascript
<template>
<h3>事件描述符</h3>
<div @click="clickDiv">
<p @click.stop="clickP">测试冒泡</p>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
clickDiv(){
console.log("div")
},
clickP(e){
//在这里也可以写，
// e.stopPropagation()
console.log("p")
}
}
}
</script>
<style scoped>
</style>数组变化侦测
变更方式
Vue能够侦听响应式数组的变更方法，并在他们被调用时触发相关的更新
替换一个数组
不会改变原数组，而是创建一个新数组
下面是上面的两种的代码展示
javascript
<template>
<h3>数组变化侦听</h3>
<button @click="addListHandle">添加数据</button>
<ul>
<li v-for="(item, index) of names" :key="index">{{ item}}</li>
</ul>
<button @click="concatHandler">合并数组</button>
<h3>数组1</h3>
<p v-for="(item, index) of arry1" :key="index">{{item}}</p>
<h3>数组2</h3>
<p v-for="(item, index) of arry2" :key="index">{{item}}</p>
</template>
<script>
export default {
data(){
return{
names: ["arry", "pop", "tom"],
arry1: [1,2,3,4,5],
arry2: [7,8,9,10,11,12],
}
},
methods:{
addListHandle(){
//this.names.push("waiai")//ui自动引起更新
this.names.concat(["123"])//ui不会变，
console.log(this.names.concat(["123"]))
// 可以变化为
this.names = this.names.concat(["123"])//体现了不是原数组了
},
concatHandler(){
this.arry1 = this.arry1.concat(this.arry2)
}
}
}
</script>
<style scoped>
</style>计算属性
让模版中不要写太多的表达式
计算属性只运行一次，而返回每次都会运行。
javascript
<template>
<h3>西游{{xiyou.tast}}</h3>
<p>{{xiyouContent}}</p>
<p>{{xiyouContents()}}</p>/
</template>
<script>
export default{
data(){
return{
xiyou:{
tast:"qujing",
names:["arru", "123", "321"]
}
}
},
//计算属性
computed:{
xiyouContent(){
return this.xiyou.names.length > 0 ? 'yes':"no"
}
},
//放函数或者方法
methods:{
xiyouContents(){
return this.xiyou.names.length > 0 ? 'yes':"no"
}
}
}
</script>
<style scoped>
</style>Class绑定
操纵元素的CSS class列表，因为class是attribute，那就可以使用v-bind将他们和动态的字符串绑定。在处理比较复杂的是时候，通过拼接生成字符串比较麻烦，因此有了特殊增强功能，除了字符串外，表达式的值可以是对象或者数组。
绑定对象
绑定数组
数组和对象一起使用
提示：数组和对象嵌套过程中，只能是数组嵌套对象。
下面是所有代码的实现：
javascript
<template>
<p :class="{'active':isActive, 'text-danger':hasError}">Class样式绑定</p>
<p :class="classObject">Class样式绑定2</p>
<p :class="[arrActive, arrHasError]">Class样式绑定3</p>
<p :class="[isActive? 'active':'']">Class样式绑定4</p>
<p :class="[isActive? 'active':'',{'text-danger':hasError}]">Class样式绑定5</p>
</template>
<script>
export default {
data(){
return {
isActive:true,
hasError:true,
classObject:{
"active":true,
"text-danger":true,
},
arrActive:"active",
arrHasError:"text-danger",
}
}
}
</script>
<style scoped>
.active{
font-size:30px;
}
.text-danger{
color:red;
}
</style>Style绑定
这个和class绑定是一样的
javascript
<template>
<p :style="{color:activeColor,fontSize:fontSize +'px'}">Style绑定1</p>
<p :style="styleObject">Style绑定2</p>
</template>
<script>
export default {
data(){
return{
activeColor:"green",
fontSize:50,
styleObject:{
color:"red",
fontSize:"50px"
}
}
}
}
</script>
<style scoped>
</style>侦听器
侦听数据的变化，使用watch选项在每次响应式属性发生变化时触发一个函数
javascript
<template>
<h3>侦听器</h3>
<p>{{message}}</p>
<button @click="MidMessage">修改数据</button>
</template>
<script>
export default {
data(){
return{
message:"hello",
}
},
methods:{
MidMessage(){
this.message = "123"
}
},
watch:{
//注意这个名字要和侦听的数据对象是一样的
message(newValue,oldValue){
console.log(newValue, oldValue)
}
}
}
</script>
<style scoped>
</style>表单输入绑定
使用v-model指令简化手动连接值绑定和更改时间监听器
修饰符
提供了修饰符：.lazy,.number,.trim
javascript
<template>
<h3> 表单输入绑定</h3>
<form>
<input type="text" v-model = "message">
<input type="text" v-model.lazy="message">
<p>{{message}}</p>
<input type="checkbox" id="checkbox" v-model="checked"/>
<label for="checkbox">{{ checked}}</label>
</form>
</template>
<script>
export default {
data(){
return{
message:"",
checked:false
}
}
}
</script>
<style scoped>
</style>