VUE2.0學習總結
摘要: 年後公司項目開始上vue2.0，本身對學習進行了總結，但願對你們有幫助！javascript
VUE2.0學習php
vue介紹
vue是什麼？
- https://vuefe.cn/guide
- vue也是一個數據驅動框架，作spa頁面的
- vue若是不作頁面能夠當作一個單獨使用的js庫，作雙向數據綁定用
- Vue的
核心庫只關注視圖層,可是vue並不僅關注視圖，和angular同樣也有指令，過濾器這些東西 - vue有很是強大的單文件組件
- 就是css+html+js都寫在一個.vue文件中，這樣定義的組件很簡潔，清晰，組件化分的很完全
- 而angular中的js文件只能寫js
- 雖然react中能夠寫css-in-js，可是缺少選擇器功能，即使能夠在js中引入css文件，但仍是不方便
- vue融合了react和angular的優勢，而且解決了react和angualr的痛點
vue學習地址和技術棧
- Vue2.0中文網：https://vuefe.cn/
- vue全家桶變爲vue2.0+vue-router+fetch+vuex
- 咱們下文中所出現的vue都指代vue2.0
vue和其餘框架的對比
- https://vuefe.cn/guide/comparison.html
- vue比市面上的其餘框架功能更完善，性能更高效
vue快速開始
用vue-cli開始
- github地址:https://github.com/vuejs/vue-cli
# 全局安裝 vue-cli $ npm install --global vue-cli # 建立一個基於 webpack 模板的新項目 $ vue init webpack my-project # 安裝依賴，走你 $ cd my-project $ npm install $ npm run dev
- 你只須要關注你配置的東西就能夠了，不須要關注webpack的配置項，由於webpack的配置很難，不少人不會，也是爲了簡便開發
本身建立Vue的開發環境
準備工做
- 升級webstorm到最新版本，老版本對.vue文件的開發是有bug的
- 下載webstorm爲Vue提供的插件vue-for-idea，這個插件可讓webstorm支持以.vue結尾的文件可以運行
修改webpack的配置文件
- 把以前react中配置的webpack.publish.config.js和webpack.develop.config.js直接拿過來用
- 下載vue-loader加載器
npm install vue-loader -save-dev
- 配置webpack的loader部分
{
test: /\.js$/, // 用正則來匹配文件路徑，這段意思是匹配 js 或者 jsx loader: 'babel'// 加載模塊 "babel" 是 "babel-loader" 的縮寫 }, { test: /\.vue$/, loader: 'vue' }
- 單獨配置一個vue屬性，和entry屬性是同級別的
vue: { loaders: { js: 'babel' } }
- 在項目根目錄生成一個.babelrc文件
{
"presets": ["es2015","stage-0","stage-1","stage-2","stage-3"] // "plugins": ["transform-runtime"] }
- 修改自動識別.vue的擴展文件名
resolve: { extensions: ['', '.js', '.json', '.scss', '.vue'] }
- 注意在publish和develop中都要配置
- 下載vue
npm install vue -save - 下載編譯模塊
npm install vue-template-compiler -save - src/js文件中建立main.js
import Vue from 'vue' import AppContainer from '../containers/AppContainer' const app = new Vue({ render: h => h(AppContainer), }).$mount('#app') // new Vue({ // el:'#app', // render: h => h(App) // })
- 在src/container中建立AppContainer.vue文件
<template> <div> {{msg}} </div> </template> <style> body{ background-color:#ff0000; } </style> <script> export default{ data(){ return{ msg:'hello vue' } } } </script>
- 當你第一次建立.vue文件的時候IDE會問你用什麼語法去解析，你選擇html語法
- 接下來就能夠直接運行npm run develop了
- 你能夠去google中搜索vue-devtools下載並安裝，用於幫你監聽組件的data屬性變化
vue中的基礎知識點
Vue實例
屬性與方法
- 咱們自定義的一些數據和方法是要綁定到實例的不一樣屬性上面去的
- 例如數據都要綁定要data屬性，方法都要綁定到methods方法
- 實例上的data和methods裏面的key值會自動掛載到vue實例上，咱們管他們叫動態屬性，獲取方式直接使
實例.動態屬性名 - vue實例上的實例屬性要經過
實例.$實例屬性名獲取 - 在vue實例裏面用this，this指向的是vue實例
- 能夠經過
this.a去獲取動態屬性 - 能夠經過
this.$data去獲取實例屬性
- 能夠經過
- 實例上有一個$watch方法能夠監聽data屬性裏面的數據的變化，data一變會自動觸發監聽事件的執行
var data = {a: 1} const app = new Vue({ // 和數據相關的都掛載到data上 data: data, // 和方法相關的都掛載到methods上 methods: { // this和$的使用 func1: function () { console.log(this.a); console.log(this.$data.a); }, changeData:function () { this.a=2 } } }) // 先監聽再改變 app.$watch('a', function (newVal, oldVal) { console.log(newVal) console.log(oldVal) }) // 值改變以後會自動執行監聽方法 // data的值是能夠直接改變的，和react的setState方法不同，由於vue裏面用了ES6的set和get方法，能夠起到自動監聽的做用 app.a=3 // 動態屬性和實例屬性 // console.log(app) // console.log(app.a) // console.log(app.$data.a)
實例生命週期
- 和react的生命週期基本思想是同樣的
- 只不過react中是監聽props和state屬性的變化
- 而在vue中是隻監聽data屬性的變化
- vue中的生命週期函數要比react中的方法多
- 這些生命週期方法只能在spa應用中起做用，單獨做爲雙向數據綁定庫沒法生效
- vue生命週期圖
模板語法
- 就是如何在.vue文件的template標籤中書寫內容
- {{}}（Mustache語法）裏面會按照純文本輸出
- v-once指令只會執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上全部的數據綁定：
- v-html會按照html規則去解析內容
- 咱們在爲標籤的屬性賦值的時候不能Mustache語法，咱們要用v-bind指令
- v-bind綁定的屬性必須是data屬性裏面定義的值，若是想寫固定的值加單引號
// 錯誤的寫法 <div id="{{id}}"></div> // 正確的寫法 <div v-bind:id="id"></div>
- 在Mustache中能夠處理一些簡單的js表達式，Mustache中的屬性自己有什麼方法，在裏面也是能夠直接使用的
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>
- 在Mustache中可使用自定義過濾器，也能夠多過濾器串聯。可是過濾器不能用在v-bind中，若是想實現相同的效果在v-bind中咱們要用計算屬性
{{ message | capitalize }}
{{ message | filterA | filterB }}
new Vue({ // ... filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
- 在dom標籤中可使用指令，如v-if，v-for
<a v-on:click="doSomething">
- 在dom的事件中可使用修飾符去幫你簡化一些操做
<form v-on:submit.prevent="onSubmit"></form>
- v-bind和v-on在模板語法中能夠縮寫
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a>
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>
計算屬性
- 計算屬性能夠處理模板語法中的複雜業務邏輯，跟Mustache語法比
-
計算屬性 vs methodscss
- 咱們看到計算屬性和methods的效果基本你同樣，那麼他們的區別是什麼？
- 計算屬性的依賴若是沒有發生變化，當你再次調用計算屬性的時候，可以當即返回上次緩存的計算值，而不須要重新執行計算屬性的方法
- 而方法須要重新執行方法體
- 樣例
<template> <div> <p>Original message: "{{ message }}{{name}}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> <p>Computed reversed message: "{{ reverseMessage() }}"</p> </div> </template> <style> body{ background-color:#ff0000; } </style> <script> export default