vue學習進階：元件入門練習到使用vue-cli開發
阿新 • • 發佈：2018-12-18
新建index.html，直接複製以下程式碼，雙擊瀏覽器執行即可。程式碼包含Vue的元件使用，可對照練習。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue元件</title>
<!--<script src="./vue.js"></script>-->
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<h1>todoList</h1>
<input v-model="inputValue" placeholder="請輸入內容"/>
<button @click="handleSubmit">提交</button>
<ul>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ul>
<h1>全域性元件 todo-item</h1>
<ul>
<todo-item v-for="(item,index) in list" :key="index"
:content="item"
:index="index"
@delitem="doDelItem"
></todo-item>
</ul>
<h1>全域性元件</h1>
<my-p></my-p>
<h1>區域性元件</h1>
<my-h2></my-h2>
</div>
<script>
//全域性元件
Vue.component('my-p',{
template:'<p>我是一個P標籤</p>'
})
//區域性元件
var myH2={
template:'<h2>我是一個h2標籤</h2>'
}
Vue.component('todo-item',{
props:['content','index'],
template:'<li>{{content}}<button @click="clickDelItem">刪除當前項</button></li>',
methods:{
clickDelItem:function(){
this.$emit('delitem',this.index)
}
}
})
new Vue({
el:"#root",
components:{
'my-h2':myH2
},
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
doDelItem:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>使用vue-cli開發，首先確保電腦上安裝了node和npm
#全域性安裝 vue-cli
npm install --global vue-cli
#建立一個基於webpack 模板的新專案
vue init webpack your-project-name
cd your-project-name
npm run dev
檔案結構
重複實現上述程式碼的功能,可以比較語法上的差異。
修改main.js
import Vue from 'vue'
import todoList from './todoList'
Vue.config.productionTip = false
new Vue({
el: '#app',
components: { todoList },
template: '<todoList/>'
})在src資料夾下新建檔案todoList.vue
<template>
<div>
<h1>todoList</h1>
<input v-model="inputValue" placeholder="請輸入內容"/>
<button @click="handleSubmit">提交</button>
<ul>
<todo-item v-for="(item,index) in list" :key="index"
:content="item"
:index="index"
@delitem="doDelItem"
></todo-item>
</ul>
</div>
</template>
<script>
import todoItem from './components/itemList'
export default{
components:{
'todo-item':todoItem
},
data(){
return {
inputValue:'',
list:[]
}
},
methods:{
handleSubmit(){
this.list.push(this.inputValue)
this.inputValue=''
},
doDelItem(index){
this.list.splice(index,1)
}
}
}
</script>
<style scoped>
</style>
在src/components資料夾下新建檔案itemList.vue
<template>
<div>
<li>{{content}}<button @click="clickDelItem">刪除當前項</button></li>
</div>
</template>
<script>
export default{
props:['content','index'],
data(){
return {
}
},
methods:{
clickDelItem(index){
this.$emit('delitem',index)
}
}
}
</script>
<style scoped>
</style>