1、vue中的 “:” 綁定和 “@” 監(jiān)聽

• “:” 是指令 “v-bind”的縮寫。用來綁定數(shù)據(jù)
• @”是指令“v-on”的縮寫。用來監(jiān)聽，并調(diào)用方法

下面是綁定class屬性的數(shù)值。

監(jiān)聽點(diǎn)擊動(dòng)作

1.1、v-model 雙向綁定

雙向綁定

上面的操作等于

<input v-model="text">

v-model 會(huì)將被綁定的值與 的值自動(dòng)同步，這樣我們就不必再使用事件處理函數(shù)了。
v-model 不僅支持文本輸入框，也支持諸如多選框、單選框、下拉框之類的輸入類型。

完整示例

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

<template>
  <input v-model="text" placeholder="這里輸入">
  <p>{{ text }}</p>
</template>

2、if 、else 、for

if、else

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

<template>
  <button @click="toggle">點(diǎn)我切換語言</button>
  <h1 v-if="awesome">hello</h1>
  <h1 v-else>你好</h1>
</template>

三元表達(dá)式

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

<template>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? '點(diǎn)一下' : '再點(diǎn)一下' }}
  </button>
</template>

for

<script>
// 給每個(gè) todo 對象一個(gè)唯一的 id
let id = 0

export default {
  data() {
    return {
      value1: '',
      todos: [
        { id: id++, text: '項(xiàng)目1' },
        { id: id++, text: '第二項(xiàng)' },
        { id: id++, text: '第三個(gè)' }
      ]
    }
  },
  methods: {
    addTodo() {
      // 把輸入框的value1 添加到數(shù)組中
      this.todos.push({ id: id++, text: this.value1 })
      this.value1 = ''
    },
    removeTodo(todo) {
      // 移除數(shù)組中某項(xiàng)
	  this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="value1">
    <button>添加一個(gè)</button>    
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

3、computed 計(jì)算屬性

計(jì)算屬性會(huì)自動(dòng)跟蹤其計(jì)算中所使用的到的其他響應(yīng)式狀態(tài)，并將它們收集為自己的依賴。計(jì)算結(jié)果會(huì)被緩存，并只有在其依賴發(fā)生改變時(shí)才會(huì)被自動(dòng)更新。

4、生命周期（屬性加載順序）

5、watch 偵聽器

watch 用來偵聽 某個(gè)值的變化，發(fā)生變化后會(huì)執(zhí)行watch 中的方法。
如下點(diǎn)擊按鈕后，todoId1會(huì)自增1，觸發(fā)watch 中的同名方法todoId1()執(zhí)行

<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 todo</button>
  <p v-if="!todoData">Loading...</p>
  <pre v-else>{{ todoData }}</pre>
</template>

6、 components 組件

在 components 選項(xiàng)中，添加一個(gè)子組件

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

</script>

<template>
  <div>
    	<SonPage />
  </div>
</template>

6.1、props 從父組件獲取收據(jù)

父組件

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

export default {
  components: {
    ChildComp
  },
  data() {
    return {
      greeting: '這段文字來自父組件'
    }
  },
  props: {
    msg: String
  }
}
</script>

<template>
  <ChildComp :msg="greeting"/>
</template>

子組件ChildComp.vue

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

<template>
  <h2>{{ msg || '子組件的文字' }}</h2>
</template>

6.2、emits 向父組件觸發(fā)事件

6.3、slots插槽， 將模板片段傳遞給子組件

文章來源地址http://www.zghlxwxcb.cn/news/detail-704577.html

到了這里，關(guān)于vue 腳手架新手入門（vue cli 3）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！