Vue基础

image.png

差值表达式{{}} 存在一个问题，为了解决这个闪烁问题使用：v-cloak

1、提供样式
<style type="text/css">
[v-cloak]{
  display:none;
}
</style>

2、在差值表达式所在的标签中添加v-cloak指令
<div v-cloak>{{msg}}</div>

背后原理： 先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

image.png

v-once

<div v-once>{{info}}</div>
v-once的引用场景：如果显示的信息后续不再修改，可以使用v-once，可以提高性能

双向数据绑定

用户修改页面中表单中输入域的内容，会影响数据的内容变化
数据中的内容变化，会影响页面中表单数据内容

image.png

阻止冒泡、阻止默认行为

event.stopPropagation(); // 阻止冒泡
event.preventDefault(); // 阻止默认行为

事件修饰符形式

<a @click.stop = "handle">跳转</a> // 阻止冒泡
<a @click.prevent= "handle">跳转</a>  // 阻止默认行为
<a @click.stop.prevent= "handle">跳转</a>  // 既阻止冒泡又阻止默认行为

按键修饰符：回车也能触发表单提交

按键修饰符：按删除能全删除

image.png

表单操作

image.png

自定义指令

image.png

计算属性

需要有返回值return
计算属性是基于data中的数据变化，如果data变化计算属性也会跟着变

image.png

计算属性和方法的区别

image.png

监听器

image.png

会一直监听属性一旦发生变化就会触发方法，从而执行watch业务逻辑

image.png

监听器处理异步，是计算属性做不到的

image.png

过滤器

image.png

Vue生命周期

image.png

响应式修改数组的方法
vm.$set(list, 1, 'lemon')
this.$set(list, 1, 'lemon')

image.png

监听器可以异步监听数据变化，一旦变化就会触发绑定的函数，函数中可以进行一些业务逻辑处理

image.png

组件化开发

image.png

组件注册、用法

image.png

驼峰式命名方式在使用的时候要转换小写+短横线<my-component></my-component>

image.png

组件间数据交互

image.png

兄弟传值

image.png

组件插槽

image.png

具名插槽

image.png

作用域插槽

image.png

组件实例

image.png

https://www.jianshu.com/p/3b2caf500165

1、删除商品

子组件cart

<li @click='delEvent(item.id)'>删除</li>

delEvent(id) {  // 事件触发
  this.$event('del-li',id)
}

父组件监听事件

<cart @del-li="handleDel($event)'></cart> // $event接收传递的数据

handleDel(id) { // 监听
  // 根据id删除list中对应的数据
 // 找到id对应的数据索引
// 根据索引删除对应数据

let index = this.list.findIndex(item=> item.id == id)
this.list.splice(index,1)
}

2、购物车数值添加和删除

子组件cart

<a href='' @click.prevent='sub(item.id)'> -</a>
    <input type="text" class="num" :value="item.num"  @blur="changeNum(item.id, $event)"/>
<a href="" @click.prevent='add(item.id)'>+</a>

changeNum(id,event) { // $event事件input对象，可以通过$event.target.value获取输入的值
    this.$emit('change-num', {
        id: id,
        type: 'change',
        num: event.target.value
    })
},
sub(id) {
    this.$emit('change-num',{
        id: id,
        type: 'sub'
    })
},
add(id) {
    this.$emit('change-num',{
        id: id,
        type: 'add'
    })
}

父组件监听事件

**父组件监听事件**
<cart @del-li="handleDel($event)' @change-num='handlechangeNum($event)'></cart> // $event接收传递的数

handlechangeNum(val) {
    // 根据子组件传递过来的数据，更新list中对应的数据
    if(val.type == 'change') {
        this.list.some(item=>{
        if (item.id == val.id) {
            item.num = val.num
            return true; // 终止遍历
        }
    }) 
    }else if (val.type='sub') {
        this.list.some(item=>{
        if (item.id == val.id) {
            item.num -=1;
            return true; // 终止遍历
        }
    }) 
    }else if (val.type=='add') {
        this.list.some(item=>{
        if (item.id == val.id) {
            item.num +=1;
            return true; // 终止遍历
        }
    }) 
    }
    
}