Vue知识点汇总【持更】-优快云博客

<!--html-->
<a :href="'https://www.runoob.com/vue2/'+url">点击跳转vue菜鸟教程</a>

<!--script-->
const vm2=new Vue({
     el:'#box2',
     data:{
         url:'vue-tutorial.html'
     }
})

3.3 事件绑定指令

vue提供了v-on事件绑定指令，用于为DOM元素绑定事件监听。

注意：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为v-on:click、v-on:input、v-on:keyup。
在v-on指令所绑定的事件处理函数，可以接收事件参数对象event。
$event是vue提供的特殊变量，用来表示原生的事件参数对象event。

<button @click="add">自增</botton>
<button @click="changeColor">变色</botton>
data(){
    return{
        count:'',
    }
}
methods:{
    add(){
        this.count++;    
    },
    changeColor(e){
            e.target.style.backgroundColor='red';
    }
}

3.4 事件修饰符

3.5 按钮修饰符

3.6 双向数据绑定指令

3.7 条件渲染指令

v-if、v-else、v-else-if条件性的渲染某元素，判定为true时渲染，否则不渲染

两者区别：v-if条件不满足不渲染，v-show条件不满足令其display为none

<div v-if="score<60">不及格</div>
<div v-else-if="60<=score&&score<90">中等</div>
<div v-else="score>=90">优秀</div>

<div v-show="true">display:block显示</div>
<div v-show="false">display:none隐藏</div>

3.8 列表渲染指令

注意：不推荐在同一元素上使用 v-if 和 v-for （详情请查看官网）

4 vue 的生命周期和生命周期函数

4.1 生命周期&生命周期函数

生命周期概念：生命周期是指一个组件从创建 > 运行 > 销毁的整个过程，强调的是一个时间段。

生命周期函数概念：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

（注意：生命周期强调的是时间段，生命周期函数强调的是时间点。）

4.2 组件生命周期函数的分类

4.3 生命周期函数特点

<template>
  <div class="test-container">
    <h3 id="myh3">Test.vue 组件 --- {
  { books.length }} 本图书</h3>
    <p id="pppp">message 的值是：{
  { message }}</p>
    <button @click="message += '~'">修改 message 的值</button>
  </div>
</template>
 
<script>
export default {
  props: ['info'],
  data() {
    return {
      message: 'hello vue.js',
      books: []
    }
  },
  watch: {
    message(newVal) {
      console.log('监视到了 message 的变化：' + newVal)
    }
  },
  methods: {
  },
  
  beforeCreate() {
  // 创建阶段的第1个生命周期函数。在这个函数无法访问data、prors、methods
  //很少有
  },
  created() {
    // 组件只是在内存中被创建好，但还未被渲染到页面
    // 经常在它里面，调用 methods 中的方法，利用Ajax请求服务器的数据。并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！
    //可以访问data、prors、methods
    this.initBookList()
  },
  beforeMount() {
      //只是在内存上编译好HTML
      //将在渲染组件时执行的操作
      //很少用
  },
  
  mounted() {
      //在此之前DOM还没被渲染，但此时在mounted()时DOM已经被渲染
      // 如果要操作当前组件的 DOM，最早只能在 mounted 阶段执行
      //组件创建阶段到此结束
  },
  beforeUpdate() {
   //已经根据拿到最新数据，还没完成组件DOM结构的渲染
  },
  // 当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中
  updated() {
  //已经根据最新数据，完成组件DOM结构的渲染。可以被执行多次（因为数据会变化多次）
  //组件运行阶段到此结束
  },
  beforeDestroy() {
    this.message = 'aaa'
  },
  destroyed() {
  //组件销毁阶段到此结束
  }
}
</script>

5 keep-alive

5.1 keep-alive的基本使用

当组件第一次被创建，会执行created生命周期函数，也会执行activated生命周期函数。之后组件再被激活，只会触发activated而不会触发created。

使用：

<keep-alive>
    <组件名></组件名>
<keep-alive>

5.2 keep-alive属性

include包含的组件(可以为字符串，数组，以及正则表达式，只有名称匹配的组件会被缓存)。
exclude排除的组件(可以为字符串，数组，以及正则表达式，任何匹配的组件都不会被缓存)。
max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)。

// 只缓存组件name为a和b的组件
<keep-alive include="a,b"> 
  <component />
</keep-alive>

// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>

// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>

// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>

注意：若组件没有定义自己的name，则默认以注册组件时的名称作为匹配条件。如果定义了name，会以name作为匹配条件。

6 计算属性和侦听器

6.1 侦听器

6.1.1 作用

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

6.1.2 侦听器的格式

1、方法格式的侦听器（watch:{……}）：

缺点1：无法在刚进入页面的时候自动触发。
缺点2：如果侦听的是一个对象，当对象里的属性值发生变化时，不会触发侦听器。

2、对象格式的侦听器（watch（）{……}）：

好处1：可以通过immediate选项让侦听器自动触发。

好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化。

如果要侦听对象里属性的变化，可以如以下操作：

6.2 计算属性

6.2.1 使用

1、定义计算属性：

new Vue({
    el:"#app",
    data:{ ... },
    methods:{ ... },
    watch:{ ... },
    computed:{
      计算属性名(){
        计算过程
        return 属性值
      }
    }
})

2、在页面上使用计算属性：

<p>{
  {计算属性名}}</p>

6.2.2 注意

1、computed 和 data同级，计算属性写在computed中；

2、写起来像方法，用起来像属性；

3、计算属性虽然称为属性，但其本质是一个函数；

4、虽然计算属性本质是一个函数，但是在页面中使用计算属性时，不要加()；

5、一定要有返回值；

6、可以使用data中的已知值；

7、只要跟计算属性相关的数据发生了变化，计算属性就会重新计算，不相关的属性无论如何变化，都不会导致计算属性变化；

8、计算属性名不能和data中的数据重名（因为要使用data中的数据）。

【页面上使用】{
  {reversedMessage}}

【data中定义】msg:'New York'

【计算属性】computed:{
    reversedMsg (){
      return this.msg.split('').reverse().join('')
    }
}