Vue核心要點理解

Vue效能操作

• computed計算屬性的快取和methods,watch
• v-if和v-show
• :key 解決唯一性，迴圈遍歷的時候最好用資料的id，而不是下標
• 使用v-once來提高動態元件之間的切換，是元件第一次渲染之後放在記憶體中，後面操作直接呼叫，提高效能
• 函式節流
• 使用keep-alive結合鉤子函式activated進行頁面效能優化

Vue的資料傳遞

• 父傳子 通過v-bind:傳遞，子元件通過props接收
• 子傳父 子元件通過$emit傳送事件，父元件通過v-on監聽事件
• 非父子 通過bus/釋出訂閱/匯流排機制來傳遞，或者使用vuex傳遞
• 父傳子可以通過slot插槽傳遞資料

MVVM和MVC

1. MVVM：M表示資料model，是獲取到的資料。V表示檢視view,是展示的介面。VM表示檢視模型，用來連線model和view，是vue底層自動實現，不需要認為操作。MVVM是資料驅動的。
2. MVC: M表示資料model,是從後臺用ajax獲取到的資料。V表示檢視層view，是前端渲染的頁面。C表示控制器controler,用來將獲取到的資料使用dom操作來更新頁面，VMMC中資料和操作dom是混合的，controler控制器部分比較龐大，比如原始的jquery就是MVC模式。

虛擬DOM和Object的defineProperties

前端的元件化

父子元件之間的傳值

1. 父傳子
   • 使用v-bind:屬性名=變數值傳遞
   • 使用props: [屬性名]接收
2. 子傳父
   • 子元件通過事件使用this.$emit(事件名，資料)傳送事件和資料
   • 父元件通過v-on:事件名="父元件事件"監聽並接收傳遞過來的資料

Vue的例項

vue的每一個元件都是一個vue的例項。

vue的專案都是用多個vue例項拼裝而成的。

Vue的生命週期

生命週期函式就是vue例項在某個事件點會自動執行的函式

beforeCreate: 在此之前只有預設的一些事件和生命週期鉤子函式

created: 在此過程中，data和methods都已經被初始化好了，最早可以在created中操作方法和資料

beforeMount: 表示模板已經在記憶體中編譯完成了，但是尚未渲染到頁面中，頁面中的元素還沒有替換過來，還是之前的模板字串，頁面資料還未編譯到模板template中

mounted: 記憶體中的模板已經掛在到了頁面中，例項已經被完全建立好了

beforeUpdate: 頁面中的資料被更新了，此時data中的資料是最新的，頁面尚未和最新的資料保持同步。

updated: 更新之後，頁面和data中的資料保持同步，都是最新的。

beforeDestroy: 當呼叫了vm.$destroy()函式的時候觸發

destroyed: 當vue例項被銷燬的時候觸發

計算屬性

計算屬性是基於它們的依賴進行快取的，如果依賴的值沒有發生改變，計算屬性也不會執行

相對於watch監聽和方法來說，同樣的功能，計算屬性相對來說比較簡單而且有快取

計算屬性預設呼叫的是get,還可以設定set.

watch監聽，和compute計算屬性類似，也具有快取。只有依賴發生改變時候才會觸發，但是寫法比較麻煩

get,set的使用

樣式繫結

class

1. 物件繫結

   :class={類名：變數}

2. 陣列繫結

   :class=[變數]

style

1. 物件繫結

   :style={變數}

2. 陣列繫結

   :style=[變數]

iff演算法

條件渲染

v-if: 每一次都會刪除和新增dom，效能不好

v-show: 經常操作的可以使用v-show,效能好

問題：

# 解決vue的複用問題，在不新增key的時候，當切換顯示和隱藏時候，vue會複用文字框，裡面內容也不會改變，解決辦法就是給元素加一個key就可以使之唯一，vue就會重新渲染。
<div id="app">
    <div v-if="isShow">
   		 使用者名稱：<input type="text" key="username">
    </div>
    <div v-else>
   		 密碼：<input type="password" key="password">
    </div>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data: {
    	isShow: true,
    }
})
</script>

vue陣列的變異方法

Vue 包含一組觀察陣列的變異方法，所以它們也將會觸發檢視更新。這些方法如下

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

改變陣列內容的方法：變異方法和引用（list = []）、set方法（Vue.set(vm.userInfo,1,5)）

改變物件內容的方法：引用（obj = {}）、set方法（vm.$set(vm.userInfo,‘address’,‘beijing’)）

template標籤的使用

用來佔位，包裹一些元素，但是不顯示

使用is解決元件模板標籤的bug問題

	<div id="box">
		<table>
			<tbody>
				<!-- <row></row> -->
				<tr is="row"></tr>
                <Ul>
                    <li is="row"></li>
                </Ul>
			</tbody>
		</table>
	</div>
	<script>
		Vue.component('row', {
			template: '<tr><td>this is a row</td></tr>'
		})
		var vm = new Vue({
			el: '#box'
		})
	</script>

子元件中定義data必須是函式

<div id="box">
		<table>
			<tbody>
				<tr is="row"></tr>
			</tbody>
		</table>
	</div>
	<script>
		Vue.component('row', {
			data: function(){
				return {
					content: 'this is a row'
				}
			},
			template: '<tr><td>{{content}}</td></tr>'
		})
		var vm = new Vue({
			el: '#box'
		})
	</script>
# 作用：是為了讓每個可複用的元件擁有自己的獨立資料

使用ref來獲取dom

# 在html元素上的ref可以獲取dom
<div id="box">
		<div ref="hello" @click="handleClick">hello world</div>
	</div>
	<script>
		var vm = new Vue({
			el: '#box',
			methods: {
				handleClick: function(){
					alert(this.$refs.hello.innerHTML)
				}
			}
		})
	</script>

# 使用釋出訂閱的方式,在元件上的ref可以獲取該元件的引用
<div id="box">
		<counter ref="one" @change="handleChange"></counter>
		<counter ref="two" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>
	<script>
		Vue.component('counter', {
			template: '<div @click="handleClick">{{number}}</div>',
			data: function(){
				return {
					number: 0
				}
			},
			methods: {
				handleClick: function(){
					this.number ++
					this.$emit('change')
				}
			}
		})
		var vm = new Vue({
			el: '#box',
			data: {
				total: 0
			},
			methods: {
				handleChange: function(){
					this.total = this.$refs.one.number + this.$refs.two.number
					console.log(this.$refs.one)
				}
			}
		})
	</script>

父子元件之間的資料傳遞

vue中的單項資料流，只允許父元件向子元件傳遞資料，不允許子元件改變父元件傳遞過來的資料。如果需要修改父元件傳遞過來的資料，則可以將傳遞過來的資料儲存為自己的變數，然後做更改。

元件引數校驗

props: {
    content: String,
    age: Number,
    id: [Number, String],
    address: {
		type: String,
         required: true,
         default: 'default value',
         validator: function(value){
            return value.length > 5
         }
    }
}

非props屬性

• 非props特性：當父元件向子元件傳遞資料時候，子元件並沒有用props接收；在子元件中無法使用
• 非props特性傳遞給子元件的屬性及屬性值會顯示到dom中html的屬性中

給元件繫結原生事件

在元件上繫結事件的時候，這個事件是屬於監聽事件，而不是原生事件。因此當點選時候不會觸發。如果需要觸發，有以下兩種操作：

• 通過子元件使用事件$.emit(‘事件名’)，傳送一個事件，然後父元件監聽@事件名='自己的事件’來觸發
• 通過事件修飾符，只需要在子元件上定義的事件後面加上一個.native.@click.native="chandleClick"

非父子元件間的傳值

通過（Bus/匯流排/釋出訂閱模式/觀察者模式）

1. 非父子元件之間資料傳遞的方式
   • 逐層傳遞
   • 使用Vuex
   • 使用釋出訂閱模式匯流排機制傳遞

    <div id="box">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            props: {
                content: String
            },
            data: function() {
                return {
                    selfContent: this.content
                }
            },
            template: '<div @click="handleClick">{{selfContent}}</div>',
            methods: {
                handleClick: function() {
                    this.bus.$emit('change', this.selfContent)
                }
            },
            mounted: function() {
                var that = this
                this.bus.$on('change', function(msg) {
                    that.selfContent = msg
                })
            }
        })

        var vm = new Vue({
            el: '#box'
        })
    </script>

Vue中的插槽

在vue中，父元件向子元件傳遞資料的時候，通過繫結屬性向子元件傳遞，子元件通過props來接收

通過插槽的方式可以批量的在子元件內部傳遞資料，然後通過slot來接收，並且可以接收具名slot內容。

    <div id="box">
        <body-content>
            <div slot="header">header</div>
            <div slot="footer">footer</div>
        </body-content>
    </div>

    <script>
        Vue.component('body-content', {
            template: `
                <div>
                    <slot name="header"></slot>
                    <div>content</div>
                    <slot name="footer"></slot>
                </div>
            `
        })

        var vm = new Vue({
            el: '#box'
        })
    </script>

Vue中的作用域插槽

    <div id="box">
        <child>
            <template slot-scope="props">
                <h1>{{props.item}} - hello</h1>
            </template>
        </child>
    </div>
    <script>
        Vue.component('child', {
            data: function() {
                return {
                    list: [1, 2, 3, 4]
                }
            },
            template: `
                <div>
                    <ul>
                        <slot v-for="item of list" :item='item'>
                                
                        </slot>   
                    </ul>    
                </div>
            `
        })

        var vm = new Vue({
            el: '#box'
        })
    </script>

動態元件

    <div id="box">
        <component :is="type"></component>
        <!-- <child-one></child-one>
        <child-two></child-two> -->
        <button @click="handleBtnClick">動態元件</button>
    </div>

    <script>
        // v-once 減少效能的消耗
        Vue.component('child-one', {
            template: '<div v-once>child one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child two</div>'
        })

        var vm = new Vue({
            el: '#box',
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function() {
                    this.type = this.type === "child-one" ? "child-two" : "child-one";
                }
            }
        })
    </script>

在Vue中 使用animate.css庫

<div id="box">
        <transition enter-active-class="animated swing" leave-active-class="animated shake" appear appear-active-class="animated shake">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切換</button>
</div>

在Vue中同時使用過渡和動畫

<style>
    .fade-enter, .fade-leave-to {
        opacity: 0
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity 1s
    }
</style>

<transition
    type=""
    :duration="{enter: 5000, leave: 10000}"
    name: "fade"
    appear
    enter-active-class="animated swing fade-enter-active"
    leave-active-class="animated shake fade-leave-active"
    appear-active-class="animated swing"
>
	<div v-show="show">
        hello world
    </div>
</transition>

Vue動畫中屬性宣告javascript鉤子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

Vue中使用Velocity.js

中文文件：http://www.mrfront.com/docs/velocity.js/index.html

Vue中多個元素/元件的過渡和動畫

vue中的dom的複用，導致動畫不會出現，需要新增不同的key值

<style>
    .v-enter,v-leave-to{
        opacity: 0
    }
    .v-enter-active, .v-leave-active{
        transition: opacity 1s;
    }
</style>
<transition mode="in-out/out-in">
	<div v-if="show" :key="A">
        hello world
    </div>
    <div v-else :key="B">
        bye world
    </div>
</transition>

Vue中的列表過渡

<style>
    .v-enter,v-leave-to{
        opacity: 0
    }
    .v-enter-active, .v-leave-active{
        transition: opacity 1s;
    }
</style>

<transition-group>
	<div v-for="(item, index) of arr">
        {{item.title}}
    </div>
</transition-group>

Vue中動畫的封裝

<div>
    <fade :show="show">
    	<div>
            hello world
        </div>
    </fade>
    <button @click="handleBtnClick">
        toggle
    </button>
</div>

Vue.component('fade', {
	props: ['show'],
	template: `
		<transition @before-enter="handleBeforeEnter"
         	@enter="handleEnter"    
         >
			<slot v-if="show"></slot>
		</transition>
	`,
    methods: {
        handleBeforeEnter: function(el){
            el.style.color="red"
        },
        handleEnter: function(el, done){
            setTimeout(() => {
				el.style.color = 'green'
				done()
            }, 2000)
        }
    }
})

Vue專案開發環境

• 安裝node.js
  • 檢測npm -v和 node -v
• 建立碼雲的倉庫
  • 用賬號登入碼雲
  • 然後選擇專案>Private點選+號建立私有的專案
  • 依次填寫專案名稱>專案介紹>是否公開（私有）>選擇語言（JavaScript）> 新增開源許可證（MIT License）> 使用Readme檔案初始化這個專案>建立即可
• 安裝git並使用git將本地倉庫和遠端倉庫進行關聯
  • 點選碼雲頭像>設定>SSH公鑰>專案管理>公鑰 管理>生成/新增SSH公鑰
  • 在git-bash中三次回車執行ssh-keygen -t rsa -C "[email protected]"，如果之前生成過公鑰，這會提示已經生成，不需要再次生成了
  • 然後在 git-bash中執行 cat ~/.ssh/id_rsa.pub獲取公鑰
  • 然後將公鑰新增到SSH公鑰的裡面，標題會自動生成。
  • 這樣在本地會有一個私鑰，然後私鑰和公鑰匹配之後就可以不用密碼來上傳和更新。
• 配置SSH私鑰並建立連線
• 將線上的倉庫通過SSH克隆到本地。在本地執行git clone SSH地址
• 安裝vue腳手架工具npm install --global -vue-cli
• 在克隆下來的資料夾中使用vue-cli建立vue專案初始化專案:vue init webpack projectName(專案名)  **ps：**注：專案名不能大寫，不能使用中文
• 進入專案資料夾，執行cnpm install下載依賴
• 執行 npm run dev
• 在專案資料夾中執行git add .和git commit -m ''提交到本地倉庫
• 然後執行git push將本地庫提交到碼雲倉庫

詳細的環境配置：https://blog.csdn.net/yw00yw/article/details/81201670

單頁應用VS多頁應用

• 多頁應用網站
  • 當每次請求跳轉的時候後臺都會返回一個新的html檔案，則為多頁應用網站
    • 優點：首屏時間快，SEO效果好
    • 缺點：頁面切換慢
• 單頁應用網站
  • 頁面每次跳轉並不載入html頁面，而是通過js動態清除當前頁面內容然後渲染新的html頁面內容，只請求載入了一次。
    • 優點：頁面切換快
    • 缺點：首屏時間稍慢，SEO差

專案初始化

• 增加meta標籤

樣式問題——在main.js中引入

• 引入reset.css使各個瀏覽器顯示的效果一樣
  • import './assets/styles/reset.css'
• 引入border.css解決移動端1px問題
  • import './assets/styles/border.css'

js問題

• fastclick 解決移動端click300ms延遲問題
  • import fastClick from 'fastclick'
  • fastClick.attach(document.body)

第三方字型庫

• iconfont

css前處理器

stylus——> npm install stylus stylus-loader --save

<style lang="stylus" scoped>
    .header
        height value
</style>

rem的使用

# 在rest.css中設定了html的根字型大小為 50px
# 因為設計稿一般是750px是iphone6的二倍圖
# 那麼可以簡單在設計稿上量取的高度/寬度 = html * 2 = 50 * 2 = 1rem / 100
# 即 1px = 0.01rem

配置檔案路徑的別名，簡化路徑

build > webpack.base.conf.js中配置

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            'styles': resolve('src/assets/styles'),
        }
    }

引入

# 在css中引入必須加~
# 在main.js中引入不需要加前面的~
@import '~styles/stylus/varibles.styl'

分支的建立

# 在碼雲git倉庫中建立一個分支，並起用分支名，然後將線上倉庫使用`git pull`拉取到本地，然後使用`git checkout ...`切換到新分支上，然後進行開發，該功能模組開發完成之後依次提交到本地倉庫`git commit`、線上倉庫`git push`的當前分支上，然後切換到主分支，使用`git merge ...`合併到主分支，然後`git push`提交到遠端倉庫

輪播外掛

使用Vue-Awesome-Swiper輪播外掛

npm install vue-awesome-swiper --save

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

解決圖片的寬高比例自適應問題，即圖片的自適應，用來佔位，防止頁面的抖動

.wrapper
	overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 31.25% /*圖片的高寬比例*/
	.swiper-img
		width 100%

樣式的穿透，使子元件的樣式不受scoped的限制

.wrapper >>> .swiper-pagination-bullet-active
        background  #fff !important

使用swiper解決多頁小圖示輪播

computed: {
    pages () {
        const pages = []
        this.iconList.forEach((item, index) => {
            const page = Math.floor(index / 9)
            if (!pages[page]) {
                pages[page] = []
            }
            pages[page].push(item)
        })
        return pages
    }
}

使用axios進行ajax資料的請求

• fetch
• vue-resource
• axios
• npm install axios --save

在專案目錄static目錄下模擬json資料，因為只有static才可以在位址列中請求到。

• http://localhost:8082/static/mock/index.json

在.gitignore中寫入不需要提交到倉庫的檔案

• static/mock
• 則可以使用axios.get('/static/mock/index.json').then(this.getHomeInfoSucc)請求到資料

請求代理的替換，使用webpack提供的proxyTable解決跨域問題

開啟專案根目錄資料夾config下的index.js，然後在proxyTable屬性中更改

proxyTable: {
    '/api': {
        target: 'http://localhost:8080', //目標介面域名
            changeOrigin: true, //是否跨域
            pathRewrite: {
                '^/api': '/static/mock' //重寫介面
            }
    }
}

請求：

axios.get('/api/index.json').then(this.getHomeInfoSucc)

父子元件之間的資料傳遞

將父元件中請求到的資料傳遞給所有子元件

移動端文字垂直居中問題

關於移動端文字無法垂直居中（或line-height不起作用）的問題的解決方案

使用better-scroll實現列表滾動

cnpm install better-scroll --save

<div class="wrapper">
  <ul class="content">
    <li>...</li>
  </ul>
</div>

import BScroll from 'better-scroll'
const wrapper = document.querySelector('.wrapper')
const scroll = new BScroll(wrapper)

獲取源事件的元素

 handleLetterClick (e) {
     console.log(e.target.innerText)
 }

使用scrollToElement實現滾動

# 同級元件1
handleLetterClick (e) {
    this.$emit('change', e.target.innerText)
}
# 同級元件2
watch: {
    letter () {
        if (this.letter) {
            const element = this.$refs[this.letter][0]
            this.scroll.scrollToElement(element)
        }
    }
}

觸控滑動

<div class="list">
    <ul>
        <li class="item" v-for="(city, key) of cities" :key="key" 
            @touchstart="handleTouchStart"
            @touchmove="handleTouchMove"
            @touchend="handleTouchEnd"
            @click="handleLetterClick"
            >{{key}}</li>
    </ul>
</div>

    data () {
        return {
        	touchStatus: false
        }
     },
    computed: {
        letters () {
            const letters = []
            for (let i in this.cities) {
                letters.push(i)
            }
            return letters
        }
    },
    methods: {
        handleLetterClick (e) {
            this.$emit('change', e.target.innerText)
        },
        handleTouchStart () {
            this.touchStatus = false
        },
        handleTouchMove (e) {
           // 1. 獲取A元素距離頂部的距離
           // 2. 獲取手指滑動距離頂部的當前距離
           // 3. 相減得到手指滑動到字母的距離
           // 4. 使用在字母上得到的距離/字母的高度=字母下標
            const startY = this.$refs['A'][0].offsetTop
            const touchY = e.touches[0].clientY - 79
            const index = Math.floor((touchY - startY) / 20 )
            if (index >= 0 && index < this.letters.length) {
                this.$emit('change', this.letters[index])
            }
        },
        handleTouchEnd () {
            this.touchStatus = true
        }
    }

列表效能優化

• 函式節流

if (this.touchStatus) {
    if (this.timer) {
    	clearTimeout(this.timer)
    }
    this.timer =  setTimeout(() => {
           const touchY = e.touches[0].clientY - 79
           const index = Math.floor((touchY - this.startY) / 20 )
           if (index >= 0 && index < this.letters.length) {
               this.$emit('change', this.letters[index])
           }
    }, 16)          
}

搜尋功能 實現

watch: {
keyWord () {
    if (this.timer) {
    	clearTimeout(this.timer)
    }
    if (!this.keyWord) {
    	this.list = []
    	return
    }
    this.timer = setTimeout(()  => {
        const result = []
        for (let i in this.cities) {
            this.cities[i].forEach(value => {
                if (value.spell.indexOf(this.keyWord) > -1 || value.name.indexOf(this.keyWord) > -1) {
                	result.push(value)
                }
            })
        }
        this.list = result
        }, 100)
    }
},
mounted () {
this.scroll = new BScroll('.search-content')
}

使用vuex實現資料管理

export default new Vuex.Store({
    state: {
        city: '北京'
    },
    getters: {},
    actions: {
        changeCity(ctx, city) {
            ctx.commit('changeCity', city)
        }
    },
    mutations: {
        changeCity(state, city) {
            state.city = city
        }
    }
})

使用localStorage實現切換不同城市的資料儲存,實現城市儲存

let defaultCity = '北京'

try {
    if (localStorage.city) {
        defaultCity = localStorage.city
    }
} catch (e) {}

export default new Vuex.Store({
    state: {
        city: defaultCity
    },
    getters: {},
    actions: {
        changeCity(ctx, city) {
            ctx.commit('changeCity', city)
        }
    },
    mutations: {
        changeCity(state, city) {
            state.city = city
                // 儲存城市
            try {
                localStorage.city = city
            } catch (e) {}
        }
    }
})

使用keep-alive效能優化

每一次切換路由的時候，對應的ajax就會被執行請求，原因是因為執行了mounted鉤子函式，正常情況下只需要獲取一次，可以減少效能

keep-alive 包含的元件第一次執行的時候被放到記憶體中，下一次不需要請求，直接從記憶體中呼叫

<div id="app">
    <keep-alive>
        <router-view/>
    </keep-alive>
</div>

activated

# 使用keep-alive會將請求的資料快取到記憶體中，然後會呼叫activated鉤子函式的執行，當頁面改名的時候回執行該鉤子函式。
activated () {
    if (this.lastCity !== this.city) {
        this.lastCity = this.city
        this.getHomeInfo()
    }
}

使用router-link或者動態路由實現頁面詳情

<router-link :to="'/detail/' + item.id" tag="li"></router-link>

{
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
}

在build目錄下的webpack.base.config.js中配置別名

resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            '@': resolve('src'),
            'styles': resolve('src/assets/styles'),
            'common': resolve('src/common')
        }
    }

使用swiper配置圖片的輪播

swiperOption: {
    pagination: {
        el: '.swiper-pagination',
            type: 'fraction'
    },
    observer:true,
    observeParents:true
}

採用監聽事件scroll實現header顯示隱藏及動畫

handleScroll () {
    const top = document.documentElement.scrollTop
    if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = {
            opacity
        }
        this.showAbs = false
    } else {
        this.showAbs = true
    }

}

使用activated 和deactivated 鉤子函式對全域性函式的新增和解綁

activated () {
	window.
            
  
           

              
              
            
            
相關推薦
			   
            
            
            
 

    

    
    
Vue專案核心要點總結
     
  
  
  
 Vue核心要點理解 
 Vue效能操作 
  
  computed計算屬性的快取和methods,watch 
  v-if和v-show 
  :key 解決唯一性，迴圈遍歷的時候最好用資料的id，而不是下標 
  使用v-once來提高動態元件之間的切換，是元件第一次渲染之後放在記憶體 

  
 

    

    
    
自學vue基礎，搭建vue專案，小總結
     
 node.js環境（npm包管理器）vue-cli 腳手架構建工具cnpm npm的淘寶映象--save-dev 是你開發時依賴的東西 ， --save 是你釋出之後還依賴的東西 
  
一、下載安裝node.js 
網上免費下載，不熟悉可以下載完成後傻瓜式next安裝安裝完成後開啟終端dos命令n 

  
 

    

    
    
第一次react-native專案實踐要點總結
     
  
 
 今天完成了我的第一個react-native專案的封包，當然其間各種環境各種坑，同時，成就感也是滿滿的。這裡總結一下使用react-native的一些入門級重要點（不涉及環境）。注意：閱讀需要語法基礎： ES6 、react 、JSX 
 我對react-native的理解簡而言之就是 ：react 

  
 

    

    
    
Vue專案環境搭建總結
     
  
 
 
 關於Vue安裝的詳細步驟總結 
 安裝NodeJs 
 首先解釋一下什麼是nodejs，為什麼要安裝node？node的優點？ 
 node.js是一個執行在chromeJavascript執行環境下（俗稱GoogleV8引擎）的開發平臺，用來方便快捷的建立伺服器端網路應用程式，也可以把它理解為 

  
 

    

    
    
產品方法論總結（7）——產品服務設計的幾個核心要點
     
 好的   藍圖   記憶   時長   品牌   朋友圈   蝸牛   今天   自己         前面總結的方法比較宏觀，今天匯總了一下，分享一下產品在服務設計時具體的3個核心要點，分別是：用戶故事、峰值&終值、上癮機制、口碑。
      第一，用戶故事。簡單解釋一下就是，先向用戶展示產品的功 

  
 

    

    
    
mui+vue專案總結
     
  
  
  
 1、在webpack中配置vue元件頁面的解析
  
  
  執行cnpm i vue -S將vue安裝為執行依賴； 
  執行cnpm i vue-loader vue-template-compiler -D將解析轉換vue的包安裝為開發依賴； 
  執行cnpm i style-lo 

  
 

    

    
    
關於使用Vue.js搭建Vue專案的總結
     
  
  
  
 關於使用Vue.js搭建Vue專案的總結@vue 
 關於使用Vue.js搭建Vue專案的總結 
 我學習Vue.js的目的很簡單，前幾天在網上看到別人用vue.js做出了個人組件庫，很厲害，很羨慕，我也想要嘗試一下（各位大佬可以無視，本人新手(oﾟvﾟ)ノ）。而且作為一個前端裡不容忽視的輕 

  
 

    

    
    
VUE知識要點總結思維導圖
     
  
 
 
 1、MVVM思想 
 2、vue常見指令 
 3、Vue生命週期的介紹 
 4、元件間通訊 
 5、路由的使用 vue-router 
 6、vue傳送 ajax請求 
 7、計算屬性,方法與偵聽器 
 8、元件間繫結原生事件 
 9、vue常見外掛 
 10、全域性事件的繫結與解綁 
 11、 

  
 

    

    
    
Vue專案如何打包問題總結
     
 當我們將 vue 專案完成後，面臨的就是如何將專案進行打包上線，放到伺服器中。我使用的是 vue-cli（simple） 腳手架，所以就講一下如何將專案進行打包，並放到 tomcat 上。 
** 先來描述一下期間遇到的問題有哪些：** 
1、打包後將 dist 資料夾和 index.html 放到 tomc 

  
 

    

    
    
vue專案打包後首頁一片空白解決辦法和具體原因總結
     
  
  
  
 很高興在萬千文章中你看到本章，希望能為你解決問題！！！ 
 在最初用vue+webpack+vue-router做專案的時候，在本地pc開發測試都是正常的，但是在把程式碼打包部署到測試伺服器之後，訪問專案首頁總是白屏。 
 第一種，打包後的dist目錄下的檔案引用路徑不對，會因找不到檔案而報 

  
 

    

    
    
node.js、vue專案建立以及git常用指令總結
     
  
  
  
 node.js、vue專案建立以及git常用指令總結 
 node.js指令 
  
   cd… 返回上級  
   dir 檢視該資料夾下有哪些檔案  
   node 進入node.js執行環境  
   .exit 退出node.js執行環境 或者兩側ctrl+c  
   md f 

  
 

    

    
    
vue專案---仿寫音樂app----遇到的問題及解決總結
     
 
                0.https://y.qq.com/m/index.html
1. 基於router-link的導航跳轉 ：
    html:
        <router-link tag="div" :to="item.path" 
            class="ta 

  
 

    

    
    
vue專案--仿寫去哪兒網app--遇到的問題及說明總結
     
 
                1. 移動端開發中的1px邊框問題，由於在不同螢幕上，可能會使得1px實際在移動端顯示不是1px,怎麼解決?
2. 移動端click點選事件，會延遲300ms,怎麼解決？
解決：引入第三方包,解決移動端click事件延遲300ms；
    npm install fastc 

  
 

    

    
    
根據我開發過的六七個vue專案以及獨立開發的3個vue專案總結，手把手教你搭建一個結構清晰易開發易維護的公司的Vue專案，包含axios服務，vuex，公共元件/指令/過濾器/服務等
     
  
 
 
 看了網上有很多搭建vue專案的demo，但是不是已經年久失修的專案就是很簡單的demo，那些只能做新手參考並不能直接拿來用。我近兩年中已經參與了六七個vue專案的開發，包含PC端、客戶端、手機端，其中獨立負責的vue專案主要為微信公眾號的開發。而在每個專案中，我都會取長補短的去搭建自己的專案，經 

  
 

    

    
    
vue專案使用微信公眾號支付總結
     
 微信公眾號支付
1. 使用jssdk呼叫微信支付，具體檢視開發文件；
使用的vuex，在mutations中
    wechatPay (state, data) {
         state.payObject = data
         console.log('微信支付開始請求')
      

  
 

    

    
    
vue專案中api介面管理總結
     
  
  
  
 預設vue專案中已經使用vue-cli生成，安裝axios，基於element-ui開發，axiosconfig目錄和api目錄是同級，主要記錄配置的相關。 
 1. 在axiosconfig目錄下的axiosConfig.js 
 import Vue from 'vue'
import  

  
 

    

    
    
Vue專案中npm整合錯誤總結
     
 
							
							
							Cannot find module ‘C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js’
這個問題，百度上很多，各種各樣的方法都有，
解決方法
配置系統變數裡面開始配置了一個bin檔案，把這個目錄刪 

  
 

    

    
    
總結vue專案的rouer的使用
     
  
 
 // npm install vue-router 安裝路由

//引進
import Vue from 'vue';
import VueRouter from 'vue-router';
// import demo from '../page/demo'
const demo = () =&g 

  
 

    

    
    
jQuery轉Vue專案實踐總結
     
 
							
							
							
  工作需要，將公司專案從jQuery轉成Vue來寫。這裡分享下轉變專案的過程並寫了一個小demo，希望能對遇到同樣問題的朋友一些幫助。 
  PS： 本人Android開發，兼職前端，前端知識淺薄，有什麼不對的地方還請指出，大家共同進步。謝謝~


jQue 

  
 

    

    
    
vue專案中使用echarts 遇到問題總結2
     
 
                一：echarts圖形的父級容器寬度設定為百分比形式，導致echarts變形；12解決方案：固定寬度沒問題，只要設定成百分比，有的好用，有的不好用，只能將寬高設定為rem,好在相差不大；二：vue-cli專案下使用 vue的tab切換3個不同的echarts圖表，未打包正常顯