vue第一次复习（vue-1）

目录

一、Vue指令

1.1 插值表达式

1.2 MVVM设计模式

1.3 v-bind 

1.4 v-on 

1.5v-on事件对象 

1.6 v-on修饰符

1.7 v-on按键修饰符 

1.8 v-model 

1.9 v-model修饰符 

1.10 v-text和v-html 

1.11  v-show和v-if 

1.12 v-for

二、vue基础

2.1 v-for更新监测 

2.2 v-for就地更新 

 2.3 虚拟dom 

2.4 diff算法 

2.4 动态class 

2.5 动态style 

2.5 vue过滤器

2.6 传参和多过滤器

2.7 计算属性-缓存 

2.8 侦听器-watch 

2.9 深度侦听和立即执行

 三、vue组件

3.1 组件的使用 

3.2 scoped作用

3.3 组件通信 

---

#博学谷IT学习技术支持#

一、Vue指令

1.1 插值表达式

 语法: {{ 表达式 }}

<template>
  <div>
    {{ num }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0
    }
  },
}
</script>

<style>
</style>

1.2 MVVM设计模式

 

1.3 v-bind 

目标: 给标签属性设置vue变量的值 

 

1.4 v-on 

 

 

1.5v-on事件对象 

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

 1.6 v-on修饰符

1.7 v-on按键修饰符 

 

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

1.8 v-model 

 

 

 

1.9 v-model修饰符 

 

1.10 v-text和v-html 

 

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: "<span>我是一个span标签</span>"
    }
  }
}
</script>

 总结: v-text把值当成普通字符串显示, v-html把值当做html解析

1.11  v-show和v-if 

 

<template>
  <div>
    <h1 v-show="isOk">v-show的盒子</h1>
    <h1 v-if="isOk">v-if的盒子</h1>

    <div>
      <p v-if="age > 18">我成年了</p>
      <p v-else>还得多吃饭</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 15
    }
  }
}
</script>

 1.12 v-for

 

 

<template>
  <div id="app">
    <div id="app">
      <!-- v-for 把一组数据, 渲染成一组DOM -->
      <!-- 口诀: 让谁循环生成, v-for就写谁身上 -->
      <p>学生姓名</p>
      <ul>
        <li v-for="(item, index) in arr" :key="item">
          {{ index }} - {{ item }}
        </li>
      </ul>

      <p>学生详细信息</p>
      <ul>
        <li v-for="obj in stuArr" :key="obj.id">
          <span>{{ obj.name }}</span>
          <span>{{ obj.sex }}</span>
          <span>{{ obj.hobby }}</span>
        </li>
      </ul>

      <!-- v-for遍历对象(了解) -->
      <p>老师信息</p>
      <div v-for="(value, key) in tObj" :key="value">
        {{ key }} -- {{ value }}
      </div>

      <!-- v-for遍历整数(了解) - 从1开始 -->
      <p>序号</p>
      <div v-for="i in count" :key="i">{{ i }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};
</script>

二、vue基础

2.1 v-for更新监测 

 

 

sliceBtn(){
      // 2. 数组slice方法不会造成v-for更新
      // slice不会改变原始数组
      // this.arr.slice(0, 3)

      // 解决v-for更新 - 覆盖原始数组
      let newArr = this.arr.slice(0, 3)
      this.arr = newArr
    },
    updateBtn(){
      // 3. 更新某个值的时候, v-for是监测不到的
      // this.arr[0] = 1000;

      // 解决-this.$set()
      // 参数1: 更新目标结构
      // 参数2: 更新位置
      // 参数3: 更新值
      this.$set(this.arr, 0, 1000)
    }

2.2 v-for就地更新 

 v-for 的默认行为会尝试原地修改元素而不是移动它们。

 2.3 虚拟dom 

vue文件中的template里写的标签, 都是模板, 都要被vue处理成虚拟DOM对象, 才会渲染显示到真实DOM页面上 

 

 

2.4 diff算法 

 

 

 

 

 

总结: 不用key也不影响功能(就地更新), 添加key可以提高更新的性能 

2.4 动态class 

 

2.5 动态style 

 

 2.5 vue过滤器

 

 2.6 传参和多过滤器

 

2.7 计算属性-缓存 

目标: 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果 

 

计算属性-完整写法 

 

 

<template>
  <div>
      <div>
          <span>姓名:</span>
          <input type="text" v-model="full">
      </div>
  </div>
</template>

<script>
// 问题: 给计算属性赋值 - 需要setter
// 解决:
/*
    完整语法:
    computed: {
        "计算属性名" (){},
        "计算属性名": {
            set(值){

            },
            get(){
                return 值
            }
        }
    }
*/
export default {
    computed: {
        full: {
            // 给full赋值触发set方法
            set(val){
                console.log(val)
            },
            // 使用full的值触发get方法
            get(){
                return "无名氏"
            }
        }
    }
}
</script>

<style>

</style>

 总结: 想要给计算属性赋值, 需要使用set方法

2.8 侦听器-watch 

 

<template>
  <div>
    <input type="text" v-model="name">
  </div>
</template>

<script>
export default {
  data(){
    return {
      name: ""
    }
  },
  // 目标: 侦听到name值的改变
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      }
    }
  */
  watch: {
    // newVal: 当前最新值
    // oldVal: 上一刻值
    name(newVal, oldVal){
      console.log(newVal, oldVal);
    }
  }
}
</script>

<style>

</style>

 2.9 深度侦听和立即执行

 

<template>
  <div>
    <input type="text" v-model="user.name">
    <input type="text" v-model="user.age">
  </div>
</template>

<script>
export default {
  data(){
    return {
      user: {
        name: "",
        age: 0
      }
    }
  },
  // 目标: 侦听对象
  /*
  语法:
    watch: {
      变量名 (newVal, oldVal){
        // 变量名对应值改变这里自动触发
      },
      变量名: {
        handler(newVal, oldVal){

        },
        deep: true, // 深度侦听(对象里面层的值改变)
        immediate: true // 立即侦听(网页打开handler执行一次)
      }
    }
  */
  watch: {
    user: {
      handler(newVal, oldVal){
        // user里的对象
        console.log(newVal, oldVal);
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style>

</style>

 三、vue组件

3.1 组件的使用 

 

1. 全局注册

 

2.局部注册 

 

3.2 scoped作用

 

总结: style上加scoped, 组件内的样式只在当前vue组件生效 

3.3 组件通信 

1.父向子-props 

父组件：

<template>
  <div>
    <h1>我是父组件的数据</h1>
    我的名字：{{ obj.name }},年龄：{{ obj.age }}, 性别：{{ obj.sex }}, 爱好：{{ obj.hobby }}
    <!-- 子组件 -->
    <!-- 父传子 -->
    <Son :obj="obj" />
  </div>
</template>

<script>
import Son from './components/SonDemo.vue'
export default {
  data () {
    return {
      obj: {
        name: 'Red',
        age: 18,
        sex: '男',
        hobby: '唱跳Rap'
      }
    }
  },
  components: {
    Son
  }
}
</script>

<style>

</style>

子组件： 

<template>
  <div>
    <h1>我是子组件的数据</h1>
    我的名字：{{ obj1.name }},年龄：{{ obj1.age }}, 性别：{{ obj1.sex }}, 爱好：{{ obj1.hobby }}
    <!-- 直接修改传过来的值 -->
    <button @click="change">修改年龄</button>
  </div>
</template>

<script>
export default {
  // 接收父组件的数据
  // 不能修改传过来的值
  props: {
    obj: {
      require: true,
      type: Object
    }
  },
  data () {
    return {
      obj1: this.obj
    }
  },
  methods: {
    change() {
      // 改变此处的值会影响父组件的数据
      this.obj1.age = 20
    }
  }
}
</script>

<style>

</style>

2. 子向父 

子组件：

<button @click="fn">改变爱好</button>



data () {
    return {
      obj1: this.obj,
      hobby: '踢足球'
    }
  },
   fn() {
      // 子传父
      // 向父组件传自定义事件
      this.$emit('changeHobby', this.hobby)
    }
  }

 父组件： 

<Son :obj="obj" @changeHobby="fn" />

methods: {
    // 接受子组件传来的值
    fn (str) {
      this.obj.hobby = str
    }
  }

3. 跨组件通信

 

1. 兄弟组件

<template>
  <div>
    <h1>我是兄弟组件</h1>
    <button @click="fn">改变兄弟的名字</button>
  </div>
</template>

<script>
import eventBus from "./EventBus"
export default {
  methods: {
    // 向兄弟传值
    fn() {
      eventBus.$emit("send", "小明")
    }
  }
}
</script>

<style>
</style>