vue一些常用的方法

Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

一、常用指令

通常指令（Directives）是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性你，它们都是以"v-"开头了
v-text 更新元素的textContent，如果要更新部分的textContent，需要使用{{}}
v-html 更新元素的innerHTML
v-show 根据表达式的真假切换元素的display css属性
v-if 根据表达式的真假条件渲染元素
v-else 与编程语言中的else一样
v-else-if 与编程语言中的else-if一样
v-for 可循环数组，对象，字符串，数字
v-on 绑定事件监听器。事件类型由参数决定
v-once 这个指令不需要任何表达式，它的作用就是定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。
v-bind 动态的绑定一个或多个属性，或者一个组件prop到表达式
v-model 表单元素或者组件上创建双向绑定
如：我拿循环举例子

<template>
  <div class="home">
      <ul>
        <li v-for="(item,index) in list" :key="index">
        姓名：{{item.name}}年龄：{{item.age}}
        <-- item 是数组中的每一项，index是下标-->
        </li>
      </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list:[{name:'小明',age:18},{name:'小红',age:88}]
    }
  },
};
</script>

二、常用修饰符

在vue中，事件修饰符处理了许多dom事件的细节，让我们不在花当大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理。
语法:v-on:事件名.修饰符=“方法名”
我们经常用到的有

.stop：阻止事件冒泡
.capture：事件捕获
.prevent：阻止默认事件
·trim：自动过滤用户输入的首尾空格
.self：只当在 event.target 是当前元素自身时触发处理函数
.once：只触发一次

// 列子
<a v-on:click.stop="doThis"></a>
// 阻止单击事件继续传播
<a v-on:click.stop.prevent="doThat"></a>
// 我们修饰符可以串联
<form v-on:submit.prevent></form>
//只有修饰符

三、 keep-alive

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价离开时调用）
如果需要缓存整个项目，直接在app.vue中用keep-alive包裹router-view即可。要缓存部分页面，需要在路由地址配置中，在meta属性中添加一个状态，在app.vue中判断一下包裹的router-view即可，也可以使用exclude(i四库卢特)和include(因四库卢特)规定缓存哪个组件不缓存哪个组件
例如有一个商品页面和一个详情页面，这样在两个页面切换的时候就可以用到keep-alive,在切换到详情的时候，把状态保留在内存中，而不是销毁,从而提高一个性能的优化
动态组件< compoent :is=“组件名/变量名”>