VUE学习笔记

条件渲染

v-if

用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。搭配v-else和v-else-if一起使用。

v-if与v-show的区别

1.v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
2.v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。
总之如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

注意同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。请查看风格指南获得更多信息。
当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。列表渲染指南link

列表渲染

v-for

用法：

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

<li v-for="item in items">
  {{ item.message }}
</li>

在 v-for 块中可以完整地访问父作用域内的属性和变量。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

多层嵌套:

<li v-for="item in items">
  <span v-for="childItem of item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

可以用 of 代替 in

也可以使用 v-for 遍历一个对象的所有属性：

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}
<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

第二个参数表示属性名，第三个参数表示索引

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

如果没有 id key可以用index代替

<div v-for="(attr,key,index) of myObject" :key="index">

注意：推荐在任何可行的时候为 v-for 提供一个 key attribute

事件处理

监听事件

v-on指令：
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=“handler” 或 @click=“handler”。

内联事件处理：

data() {
  return {
    count: 0
  }
}

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

方法事件处理

v-on 也可以接受一个方法名或对某个方法的调用，方法在methods中定义。

data() {
  return {
    name: 'Vue.js'
  }
},
methods: {
  greet(event) {
    // 方法中的 `this` 指向当前活跃的组件实例
    alert(`Hello ${this.name}!`)
    // `event` 是 DOM 原生事件
    if (event) {
      alert(event.target.tagName)
    }
  }
}

<!-- `greet` 是上面定义过的方法名 -->
<button @click="greet">Greet</button>

在内联处理器中调用方法

methods: {
  say(message) {
    alert(message)
  }
}

<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

表单输入绑定

基本用法

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

input可以替换称textarea，type可换成checkbox等

修饰符

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据

.trim

自动过滤首尾空格

剩余可以看官方文档

组件基础

单文件组件

.Vue允许将组件的模板、逻辑

<script>
import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>

使用：导出、导入、挂载
style的属性中若加入scoped属性，则代表当前属性样式仅在当前组件下生效

组件的组织：