vue 脚手架新手入门（vue cli 3）

1、vue中的 “:” 绑定和 “@” 监听

• “:” 是指令 “v-bind”的缩写。用来绑定数据
• @”是指令“v-on”的缩写。用来监听，并调用方法

下面是绑定class属性的数值。

监听点击动作

1.1、v-model 双向绑定

双向绑定

上面的操作等于

<input v-model="text">
1

v-model 会将被绑定的值与 的值自动同步，这样我们就不必再使用事件处理函数了。
v-model 不仅支持文本输入框，也支持诸如多选框、单选框、下拉框之类的输入类型。

完整示例

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
  }
}
script>

<template>
  <input v-model="text" placeholder="这里输入">
  <p>{{ text }}p>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2、if 、else 、for

if、else

<script>
export default {
  data() {
    return {
      awesome: false
    }
  },
  methods: {
    toggle() {
       this.awesome = !this.awesome
    }
  }
}
script>

<template>
  <button @click="toggle">点我切换语言button>
  <h1 v-if="awesome">helloh1>
  <h1 v-else>你好h1>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

三元表达式

<script>
export default {
  data() {
    return {
      hideCompleted: false
    }
  },
}
script>

<template>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? '点一下' : '再点一下' }}
  button>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

for

<script>
// 给每个 todo 对象一个唯一的 id
let id = 0

export default {
  data() {
    return {
      value1: '',
      todos: [
        { id: id++, text: '项目1' },
        { id: id++, text: '第二项' },
        { id: id++, text: '第三个' }
      ]
    }
  },
  methods: {
    addTodo() {
      // 把输入框的value1 添加到数组中
      this.todos.push({ id: id++, text: this.value1 })
      this.value1 = ''
    },
    removeTodo(todo) {
      // 移除数组中某项
	  this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="value1">
    <button>添加一个button>    
  form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">Xbutton>
    li>
  ul>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

3、computed 计算属性

计算属性会自动跟踪其计算中所使用的到的其他响应式状态，并将它们收集为自己的依赖。计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新。

4、生命周期（属性加载顺序）

5、watch 侦听器

watch 用来侦听 某个值的变化，发生变化后会执行watch 中的方法。
如下点击按钮后，todoId1会自增1，触发watch 中的同名方法todoId1()执行

<script>
export default {
  data() {
    return {
      todoId1: 1,
      todoData: null
    }
  },
  methods: {
    async fetchData() {
      this.todoData = null
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/todos/${this.todoId1}`
      )
      this.todoData = await res.json()
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    todoId1() {
      this.fetchData()
    }
  }
}
script>

<template>
  <p>Todo id: {{ todoId1 }}p>
  <button @click="todoId1++">Fetch next todobutton>
  <p v-if="!todoData">Loading...p>
  <pre v-else>{{ todoData }}pre>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

6、 components 组件

在 components 选项中，添加一个子组件

<script>
  import SonPage from './SonPage.vue'
  
  export default {
    components: {
      SonPage
    }
  }

script>

<template>
  <div>
    	<SonPage />
  div>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

6.1、props 从父组件获取收据

父组件

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

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      greeting: '这段文字来自父组件'
    }
  },
  props: {
    msg: String
  }
}
script>

<template>
  <ChildComp :msg="greeting"/>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

子组件ChildComp.vue

<script>
export default {
  props: {
    msg: String
  }
}
script>

<template>
  <h2>{{ msg || '子组件的文字' }}h2>
template>
1
2
3
4
5
6
7
8
9
10
11

6.2、emits 向父组件触发事件

6.3、slots插槽， 将模板片段传递给子组件