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>