复习整理汇总 vue

复习整理 学习vue 整理知识点

1：v-bind: 指令用于设置HTML属性

<!-- 完整语法 -->
<a v-bind:href="url"> ... </a>

<!-- 缩写 -->
<a :href="url"> ... </a>

<!-- 动态参数的缩写 -->
<a :[key]="url"> ... </a>
不会出现的是
<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流程控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

2：v-on 指令用于绑定HTML事件

<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-html

<span v-html="rawHtml"></span>

rawHtml: '<span style="color: red">This should be red.</span>'

3：v-model用于双向绑定,常用于表单，实现表单输入和应用状态之间的双向绑定

< input type=“text” v-model=“inputValue”/>

4：v-if 控制切换一个元素是否显示也相当简单

v-if="seen"

5：v-for 循环

<ol>
    <li v-for="(item,index) in todos" :key="index">
      {{ todo.text }}
    </li>
  </ol>

6：官网 v-bind:title=“message” 为 鼠标悬停提示信息
7：组件 自定义组件

<ol>
  <!-- 创建一个 todo-item 组件实例 -->
  <todo-item></todo-item>
</ol>

const TodoItem = {
  template: `<li>This is a todo</li>`
}
// 创建 Vue 应用
const app = Vue.createApp({
  components: {
    TodoItem // 注册一个新组件
  },
  ... // 组件的其它 property
})

const app = Vue.createApp({
  data() {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue'},
        { id: 2, title: 'Blogging with Vue'},
        { id: 3, title: 'Why Vue is so fun'}
      ],
      postFontSize: 1
    }
  }
})
<blog-post
       v-for="post in posts"
       :key="post.id"
       :title="post.title"
       @enlarge-text="postFontSize += 0.1"
    ></blog-post>
app.component('blog-post', {
  props: ['title'],
  template: `
    <div class="blog-post">
      <h4>{{ title }}</h4>
      <button @click="$emit('enlargeText')">
        Enlarge text
      </button>
    </div>
  `
})
// 挂载 Vue 应用
app.mount(...)

动态参数

<a v-bind:[eventName]="url"> ... </a>
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus

8：生命周期

9：模板语法
数据绑定最常见的形式就是使用“Mustache” (双大括号) 语法的文本插值：
绑定的组件实例上 msg property 发生了改变，插值处的内容都会更新。

<span>Message: {{ msg }}</span>

v-once 指令:执行一次性地插值，当数据改变时，插值处的内容不会更新

<span v-once>这个将不会改变: {{ msg }}</span>

10:原始 HTML

<p>Using v-html directive: <span v-html="rawHtml"></span></p>
data() {
    return {
      rawHtml: '<span style="color: red">This should be red.</span>'
    }
  }

11：防抖和节流
所谓防抖，就是指触发多次事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
节流（throttle）
所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数
传送门
再传送
过
12：计算属性

<span>{{ publishedBooksMessage }}</span>
 computed: {
    // 计算属性的 getter
    publishedBooksMessage() {
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }

在methods也可以实现这个效果 但是计算属性将基于它们的响应依赖关系缓存，也就是说每次访问computed只有第一次会执行方法 而methods会每次都执行方法
13：侦听器 watch

watch: {
      // 每当 question 发生变化时，该函数将会执行
      question(newQuestion, oldQuestion) {
        if (newQuestion.indexOf('?') > -1) {
          this.getAnswer()
        }
      }
    },

14：动态样式
Class

第一种写法
<div :class="{ active: isActive }"></div>
<div class="static" :class="{ active: isActive, 'text-danger': hasError }"></div>
第二种写法
<div :class="classObject"></div>
classObject: {
      active: true,
      'text-danger': false
    }
  第三种写法
 <div :class="[activeClass, errorClass]"></div>
 activeClass: 'active',
 errorClass: 'text-danger'
 第四种写法
 <div :class="[isActive ? activeClass : '', errorClass]"></div>
 五
 <div :class="[{ active: isActive }, errorClass]"></div>

Style

第一种
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
 activeColor: 'red',
 fontSize: 30
 第二种
 <div :style="styleObject"></div>
 :style="[styleObject, overridingStyles]"
 styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  第三种 被浏览器支持的值进行渲染 不渲染的为display: flex
  <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

插槽 对组件比较重要

v-if VS v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

15 v-for

渲染数组
<li v-for="(item, index) in items">
    {{ item.message }}
  </li>
 items: [{ message: 'How to do lists in Vue' }, { message: 'Jane Doe' }, { message: '2016-04-10' }]
 渲染对象
  <li v-for="value in myObject">
    {{ value }}
  </li>
  myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
  效果一样
<li v-for="(value, name, index) in myObject" :key="index">
  {{ index }}. {{ name }}: {{ value }}
</li>
还可以这样子玩 key 和value 和index都可以显示
<span v-for="n in 10" :key="n">{{ n }} </span>

v-for 与 v-if 一同使用

当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量：

可以把 v-for 移动到 标签中来修正：

<template v-for="todo in todos" :key="todo.name">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
多事件处理器
<button @click="one($event), two($event)">
  Submit
</button>
事件修饰符
// 阻止单击事件继续冒泡
<a @click.stop="doThis"></a>

// 提交事件不再重载页面
<form @submit.prevent="onSubmit"></form>

// 修饰符可以串联
<a @click.stop.prevent="doThat"></a>

// 只有修饰符
<form @submit.prevent></form>

// 添加事件监听器时使用事件捕获模式
// 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 
<div @click.capture="doThis">...</div>

// 只当在 event.target 是当前元素自身时触发处理函数
//即事件不是从内部元素触发的
<div @click.self="doThat">...</div>
// 点击事件将只会触发一次
<a @click.once="doThis"></a>
**按键修饰符**
//当焦点在input框内点击enter时触发
<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
***系统修饰键***
.ctrl
.alt
.shift
.meta
<!-- 按住Alt + Enter才可以触发 -->
<input @keyup.alt.enter="clear" />
<!-- 只有按住Ctrl 再 Click 才可以触发-->
<div @click.ctrl="doSomething">Do something</div>
.exact 修饰符
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

***鼠标按钮修饰符***
.left
.right
.middle

***.lazy***
<input v-model.lazy="msg" />
v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
<input v-model.number="age" type="text" />
自动过滤用户输入的首尾空白字符
<input v-model.trim="msg" />

方法：
反转

 this.message = this.message
        .split('')//字符串分割成数组
        .reverse()//数组反转
        .join('')//数组拼装成字符串

数组变更方法 变化更新的方法

push()//添加
pop()//删除数组的最后一个元素
shift()//删除数组的第一个元素
unshift()//添加到数组的开头
splice()//添加或删除数组中的元素。fruits.splice(2,0,"Lemon","Kiwi");替换下标为2后0个数据添加 lemon 和kiwi
sort()//对数组的项目进行排序
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
reverse()//数组反转
filter() //方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
//注意： filter() //不会对空数组进行检测。
//注意： filter() //不会改变原始数组。