vue-cli:為單頁(yè)面應(yīng)用快速搭建繁雜的腳手架
main.js是整個(gè)項(xiàng)目的入口文件飒箭，在此處引入組件并在頁(yè)面顯示借帘。
index.html是頁(yè)面歌亲。
src中存放源碼。
package.json中定義了script命令標(biāo)簽疾就。
全局樣式與局部樣式：
當(dāng)在頁(yè)面中寫
<style scoped>
/* scoped 給樣式添加了作用域，只作用在本頁(yè)面 */
</style>
則為局部樣式艺蝴，否則全局內(nèi)同名樣式會(huì)相互影響
TodoList.vue
<template>
<!-- template模板下只能有一個(gè)最外層的包裹元素 -->
<div>
<input v-model="inputValue">
<button @click="handleSubmit">提交</button>
<div>
<ul>
<todo-item
v-for="(item, index) in list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
></todo-item>
</ul>
</div>
</div>
</template>
<script>
// ./表示當(dāng)前目錄下
// 將局部組件注冊(cè)到本組件中猬腰，并使用（引入、聲明猜敢、使用）
import todoItem from './components/todoItem.vue'
export default {
components: {
'todo-item' : todoItem
},
//data之前是個(gè)對(duì)象姑荷，但在腳手架工具中，data是個(gè)函數(shù)
data() {
return{
inputValue: '',
list: []
}
},
methods:{
handleSubmit() {
//this指向?qū)嵗? this.list.push(this.inputValue),
this.inputValue = ''
},
handleDelete(index) {
this.list.splice(index, 1)
}
}
}
</script>
<style>
</style>
todoItem.vue
<template>
<!-- 使用content -->
<!-- 組件中的template就是頁(yè)面中顯示的內(nèi)容 -->
<li @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
//接收父組件傳來(lái)的數(shù)據(jù)缩擂，聲明對(duì)content的接收
props: ['content', 'index'],
methods: {
handleDelete() {
this.$emit('delete', this.index)
}
}
}
</script>
main.js
import Vue from 'vue'
import TodoList from './TodoList.vue'
Vue.config.productionTip = false
new Vue({
//=> 箭頭語(yǔ)法鼠冕，定義一個(gè)方法h，return為h(TodoList)胯盯，括號(hào)里的為引入的vue實(shí)例
//該方法聲明了這個(gè)組件渲染的是TodoList的內(nèi)容懈费，接下來(lái)用$mount進(jìn)行掛載
//聲明+掛載
render: h => h(TodoList),
//mount掛載到html的結(jié)點(diǎn)上，這里在index.html中聲明了一個(gè)app結(jié)點(diǎn)
}).$mount('#app')
