Vue項目開發基礎知識

#項目初始化
1.安裝vue-cli腳手架工具
npm install -g vue-cli
2.初始化項目
vue init webpack my-project
3.進入項目
cd my-project
4.安裝依賴
npm install
5.運行項目
npm run dev
#項目目錄結構
index.html項目根視圖
package.json配置文件
.postcssrc.js postcss配置文件
.gitignore 用git上傳時忽略的文件
.editorconfig IDE配置文件
.babelrc

static 靜態文件目錄

#組件的使用
1.引入組件
import app from './App'
2.加載視圖
template: '<App/>'
3.註冊組件
components: {App}

#模板語法
mustache模板(雙花括號的模板語法)
表現形式：{{ 語法：變量 }}
例子：
{{ hello(已定義的變量) }}
{{ 1+1 }}
{{ "哈哈" }}
{{ 0>10 ? '對的' : '錯的' }}
注意：只能寫單行語句，而且不是做用在HTML的屬性上邊
#Vue組件包括三個部分：
1.template: 視圖
2.script： 邏輯
3.style： 樣式

#Vue的基本指令
1.v-html: 渲染文本 <p v-html="hello"></p>
和雙花括號的區別：雙花括號只是變量，v-html必須依賴於標籤
2.v-text: 渲染文本 <p v-text="hello"></p>
和v-html的區別： v-html能夠解析html v-text不能
3.v-bind: 綁定屬性 <span v-bind:class="haha">我要888</span>
想要變成活的屬性均可以使用v-bind綁定。

#條件渲染
1.v-if
2.v-else
3.v-show
v-if與v-show的區別
v-if只有在條件爲true時才渲染，v-show無論何時都渲染，只是進行簡單的cdd切換。v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

#列表渲染
1.v-for:是根據數組的選項列表進行渲染
<li v-for="(name,index) in names" v-bind:key="index">{{ name }}-{{ index }}</li>
<li v-for="item in user">
<span>{{ item.name }}</span>
<span>{{ item.age }}</span>
</li>

#事件監聽
v-on：(methods，參數，事件修飾符)
事件修飾符：stop(阻止事件冒泡)，prevent(阻止默認事件)，once(只生效一次)
captrue(添加事件監聽是採用事件捕獲模式，即內部元素觸發的事件先在此處理，而後才交由內部元素自身處理)
self(當事件源是當前元素自身時觸發函數)
enter

#數組更新檢測
變異方法：引發視圖的變化push(),pop(),shift(),unshift(),splice(),sort(),reverse()
替換方法：不會引發視圖的變化,filter(), concat() 和 slice()

#計算屬性和觀察者
computed
computed和methods的區別：計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的 相關依賴發生改變時纔會從新求值。這就意味着只要 message 尚未發生改變，屢次訪問 reversedMessage 計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

#表單輸入綁定
v-model: 實現數據雙向綁定
watch監聽數據
修飾符：lazy,number,trim

#class與style綁定 <p v-bind:class="{ active: isActive }">哈哈</p>