重拾vue2

Vue組件

1、組件介紹

• 每個組件都是一個vue實例
• 每一個組件均具備自身的模板template，根組件的模板就是掛載點
• 每一個組件模板只能擁有一個根標籤
• 子組件的數據具備做用域，以達到組件的複用

2、局部組件

<div id="app"> <local-tag></local-tag> <local-tag></local-tag> </div> <script> var localTag = { data () { return { count: 0 } }, template: '<button @click="btnAction">局部{{ count }}</button>', methods: { btnAction () { this.count ++ } } } new Vue({ el: "#app", components: { 'local-tag': localTag } }) </script> 

3、全局組件

<div id="app"> <global-tag></global-tag> <global-tag></global-tag> </div> <script> Vue.component('global-tag', { data () { return { count: 0 } }, template: '<button @click="btnAction">全局{{ count }}</button>', methods: { btnAction () { this.count ++ } } }) new Vue({ el: "#app" }) </script> 

4、父組件傳遞數據給子組件

• 經過綁定屬性的方式進行數據傳遞

<div id="app"> <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag> </div> <script type="text/javascript"> Vue.component('global-tag', { props:['sup_data1', 'supdata2'], template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>' }) new Vue({ el: '#app', data: { sup_data1: '數據1', sup_data2: '數據2' } }) </script> 

5、子組件傳遞數據給父組件

• 經過發送事件請求的方式進行數據傳遞

<div id="app"> <global-tag @send_action='receiveAction'></global-tag> </div> <script type="text/javascript"> Vue.component('global-tag', { data () { return { sub_data1: "數據1", sub_data2: '數據2' } }, template: '<div @click="clickAction">發生</div>', methods: { clickAction () { this.$emit('send_action', this.sub_data1, this.sub_data2) } } }) new Vue({ el: '#app', methods: { receiveAction (v1, v2) { console.log(v1, v2) } } }) </script> 

6、父子組件實現todoList

<div id="app"> <div> <input type="text" v-model='value'> <button @click='click'>提交</button> </div> <ul> <item v-for='(e, i) in list' :key='i' :ele='e' :index='i' @delete='deleteAction' ></item> </ul> </div> <script type="text/javascript"> Vue.component('item', { props: ['ele', 'index'], template: '<li @click="item_click">{{ ele }}</li>', methods: { item_click: function () { this.$emit('delete', this.index) } } }) new Vue({ el: '#app', data: { value: '', list: [], }, methods: { click: function () { this.list.push(this.value) this.value = '' }, deleteAction: function (index) { this.list.splice(index, 1) } } }) </script> 

7、搭建Vue開發環境

一、安裝nodeJS

• 官網下載安裝：https://nodejs.org/zh-cn/

二、安裝腳手架

• vue官網 => 學習 => 教程 => 安裝 => 命令行工具(CLI)

安裝全局vue：npm install -g @vue/cli 在指定目錄建立vue項目：vue create my-project 進入項目目錄啓動項目：npm run serve 經過指定服務器路徑訪問項目頁面：http://localhost:8080/ 

三、項目建立

babel：是一個 JavaScript 編譯器。 eslint：是一個語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼。 

四、vue基礎模板

<template>
	
</template>
<script>
    export default {
        
    }
</script>
<style scoped>
</style>

npm install -g vue-cli

vue init webpack my-project

npm install -g cnpm --registry=https://registry.npm.taobao.org