vue学习

Tutorial学习

VUE简介

Vue Single-File Component (SFC)：HTML、CSS、JavaScript都写在同一个.vue文件中，自包含

VUE特点：Declarative rendering

data

在data部分声明反应状态(reactive state)，在本组件script中用this.xxx访问，可用于template中，比如<h1>{{ message }}</h1>，大括号中内容可以用js表达式

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}

属性绑定

{{}}只能用于文本的绑定，如果要绑定标签的属性，则用v-bind指令写法为<div v-bind:id="dynamicId"></div>，v-bind:id简写为:id

<div :id="dynamicId"></div>

监听

DOM事件监听用v-on指令，写法为<button v-on:click="increment">{{ count }}</button>，v-on:click可简写为@click，如示例中点击事件绑定了调用increment函数

<button @click="increment">{{ count }}</button>

表单绑定

v-bind和v-on一起我们可以对表单的input元素实现双向绑定，可简单用v-model指令（语法糖），v-model不仅用于input，也可以用于checkbox、radio button、select dropdown等

<input v-model="text">

v-if

只有条件为true时才会被渲染，如下方示例awesome为true才会被渲染，否则被移除DOM，vue还支持v-else和v-else-if

<h1 v-if="awesome">Vue is awesome!</h1>

v-for

渲染列表时用v-for，示例中ttodos是在data中定义的一个列表，其中每个元素都有id和text属性

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

更新列表的两种方式：

• this.todos.push(newTodo)
• this.todos=this.todos.filter(/…/)

computed property

用computed选项声明从其他属性计算得到的属性，computed property会追踪它所依赖的反应式状态，缓存计算结果并在依赖发生改变时自动更新

export default {
  // ...
  computed: {
    filteredTodos() {
      // 实现，返回需要的对象
    }
  }
}

生命周期和template refs

引用template中的元素可声明template refs，在template中用ref='nameforref'声明，声明后在script中可以用this.$refs.nameforref引用到这个元素，并可操作这个元素，前提是这个元素已经mounted了

<p ref="p">hello</p>

mounted时的回调函数定义可用mounted，这个是组件生命周期中的一个hook，还有created、updated

export default {
  mounted() {
    // component is now mounted.
  }
}

watchers

有时候想要做一些附加效果，需要监视某个属性的值，当其发生变化时做一些处理，示例中声明了count，并在watch中对其进行监视，函数名是这个变量的名字，参数是新的值，不要新的值可以无参数

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newCount) {
      // yes, console.log() is a side effect
      console.log(`new count is: ${newCount}`)
    }
  }
}

子组件

使用组件需要先导入，即import xxx from xxx，并在components选项中声明被引用的子组件，在父组件的template中就可以用子组件的名字作为标签了，如<ChildComp />

import ChildComp from './ChildComp.vue'

export default {
  components: {
    ChildComp
  }
}

props

子组件暴露给父组件的用于接收父组件传值的输入，在子组件中用props选项声明，它可以直接在子组件中使用

// in child component
<script>
export default {
  props: {
    msg: String
  }
}
</script>

<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

在父组件中通过v-bind指令传值，即:xxx，如下例所示greeting是父组件中声明的一个反应式状态，将其值传给子组件的msg

<ChildComp :msg="greeting" />

Emits

子组件可向父组件传emit事件，需要在emits选项中声明事件名字，this.emits()的第一个参数为事件名称，后面自定义其他传给事件的入参

export default {
  // declare emitted events
  emits: ['response'],
  created() {
    // emit with argument
    this.$emit('response', 'hello from child')
  }
}

父组件通过v-on监听子组件的emit事件

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

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      childMsg: 'No child msg yet'
    }
  }
}
</script>

<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

slots

除了通过props，父组件也可以通过slots向子组件传值，子组件中可以通过<slot>标签渲染从父组件传过来的内容，<slot>中的内容作为’fallback’内容，当父组件没有传任何值时显示fallback内容

<!-- in child template -->
<slot>Fallback content</slot>

父组件中

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

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      msg: 'from parent'
    }
  }
}
</script>

<template>
  <ChildComp>{{msg}}</ChildComp>
</template>

vue说明文档：https://vuejs.org/guide/essentials/application.html