# Vue入門一 #### 一、環境搭建 1. 對於中國大陸使用者，建議將 npm 源設定為[國內的映象](https://npm.taobao.org/)，可以大幅提升安裝速度。 ```vue npm install -g cnpm --registry=https://registry.npm.taobao.org ``` 2. npm最新穩定版安裝 ```vue cnpm install vue ``` 3. 命令列工具(CLI)安裝 ```vue cnpm install -g vue-cli ``` **注意：新版本Vue CLI3安裝方法不同** #### 二、關於舊版本 1. Vue CLI 的包名稱由 `vue-cli` 改成了 `@vue/cli`。 如果你已經全域性安裝了舊版本的 `vue-cli`(1.x 或 2.x)，你需要先通過 下面命令進行解除安裝後安裝。 ```vue npm uninstall vue-cli -g ``` 或者 ```vue yarn global remove vue-cli ``` 2. 可以使用下列任一命令安裝這個新的包 ```vue npm install -g @vue/cli ``` 或者 ```vue yarn global add @vue/cli ``` 3. 安裝之後，你就可以在命令列中訪問 `vue` 命令。你可以通過簡單執行 `vue`，看看是否展示出了一份所有可用命令的幫助資訊，來驗證它是否安裝成功。 你還可以用這個命令來檢查其版本是否正確 (3.x)： ```vue vue --version ``` #### 三、初始化專案 1. 初始化專案 ```vue vue init webpack demo ``` 初始化專案說明： ```vue Project name --專案名稱 Project description --專案描述 Author --作者 Install vue-router? No --是否安裝router路由 Use ESLint to lint your code? No --是否安裝程式碼格式檢測工具 Set up unit tests No --是否安裝測試模組 Setup e2e tests with Nightwatch? No --同樣是，是否安裝測試模組 接下來回車，通過npm進行安裝 ``` 2. 進入專案 ```vue cd demo ``` 3. 安裝依賴 ```vue cnpm install ``` 4. 啟動專案 ```vue npm run dev ``` 5. 開啟瀏覽器輸入地址檢視是否啟動成功 ```vue http://localhost:8080 ``` **注意：只用進行了第一步設定，才能使用淘寶的映象，才可以使用cnpm，否則還是使用npm命令。** #### 四、專案目錄結構  1. 主要檔案 ```vue index.html --專案根檢視 package.json --配置檔案 README.md --說明檔案 .postcssrc.js --postcss配置檔案 .gitignore --github上傳時，忽略的上傳檔案型別配置 .editorconfig --一些編碼配置，可以忽略該檔案 .babelrc --ES6的 ``` 2. 主要目錄 ```vue static --靜態檔案目錄，專案啟動後可以直接訪問裡面的檔案或內容。 src --原始碼檔案 config --配置檔案,開發伺服器的配置 build --伺服器配置檔案，webpack配置檔案 ``` 3. src目錄 ```vue main.js --入口檔案 App.vue --單檔案主元件 components --子元件 assets --公共資原始檔 ``` # Vue入門二 #### 一、專案入口 ```vue main.js --專案入口src目錄下 ```  1. main.js檔案介紹 ```vue Vue.config.productionTip = false 開發時的配置，可以暫時不用管 ``` 2. 初始化一個VUE例項 ```vue new Vue({ el: '#app', 繫結一個元素，繫結一個叫app的根元件元素,如上圖中index.html中的 元件元素。 components: { App }, 把元件注入進來 template: ' ' 模板，指定一個元件app.vue }) ``` #### 引入元件步驟 1. 引入元件 ```vue import App from './App.vue' ``` 2. 載入檢視 ```vue template: ' ' ``` 3. 建立一個元件名字，載入檢視元件名字和該名字一樣。 ```vue components: { App }, ``` #### 二、元件說明 Vue元件包括三部分： 1. template（檢視部分） 2. script（邏輯或者資料互動部分） 3. style（樣式部分） #### 三、模板語法 ###### {{ }} 文字 (資料繫結最常見的形式就是使用“Mustache”語法 (雙大括號) 的文字插值：) 渲染出來就是文字，沒有任何標籤。 ```vue {{mtds}}

{{1+3}}

{{1>0 ? "錯的": "對的"}}
```  功能： 1. 可以直接進行運算，可以直接放變數。 2. 不能直接放字串（除非先宣告，可以使中文的）。 3. 可以用三門運算子。 **注意：只能存在單行語句。多行語句如if else這種需要換行寫的,不能作用在html屬性上。** ###### v-html 原始html 雙大括號會將資料解釋為普通文字，而非 HTML 程式碼。為了輸出真正的 HTML，你需要使用 `v-html` 指令： ```vue {{mtds}}

mtds: '

v-text與v-html區別

', ```  ###### v-text與v-html v-html：會渲染html程式碼。 v-text：不會渲染出來。 都可以用來顯示。 ###### v-bind 繫結 1. 那個屬性是活的，就用v-bind去繫結。 ```vue 您好 ha: 'bianle', ```  ###### v-if 條件渲染 ````vue

我是否能被看見a

我是否能被看見b

show: false, ```` v-if與v-if v-else類似 **注意：同級標籤不能巢狀，div除外。** ###### template標籤 同級並排使用,承載容器，不會渲染。 ```vue ``` ###### v-show ```vue show ```  注意：v-show與v-if v-if：條件成立渲染，不成立則不渲染，結構中不能看見。 v-show：無論怎樣都會渲染。 切換頻繁時使用，v-show，不頻繁使用v-if。 ###### v-for 列表渲染 ```vue

• {{item}}{{index}}

datas: ["a","b","c","d","e"], ``` ```vue

• {{user.name}} {{user.age}}{{user.sex}}

users: [ {name:"zhangsan1",age:120,sex:"boy"}, {name:"zhangsan3",age:120,sex:"boy"}, {name:"zhangsan2",age:130,sex:"boy4"} ], ``` **注意：每個列表新增key，不然會出現警告。** #### 四、事件監聽 ###### v-on 事件監聽 ```vue 事件

{{ num }}

num: 1 ``` ###### methods 所有被呼叫的方法都放在這裡面。 ```vue 事件2 methods: { show() { alert("我是methods中執行的方法事件") } } ``` **注意：呼叫方法是，不加括號，加括號表示，一開啟就執行呼叫方法。** ###### this ```vue 事件3 change() { this.flag = ! this.flag; } ``` 可以用this來索引當前data中的資料。 **指向，當前的組建VueComponent**  向事件傳遞引數 #### 五、如何使用一個新組建 1. 組建匯出可被外部訪問 ```vue export default { data() { return { users: ["zhangsan","lisi","wangwu'"] } } } ``` ​ data:初始化資料 2. 在需要的組建中匯入該組建 ```vue import Events from './components/Events' ``` 3. 繫結該組建 ```vue components: { Events } ``` 4. 使用組建 ```vue ``` 完整程式碼(Events.vue定義的新組建，在App.vue中使用該組建)： ```vue ``` #### 六、事件中函式傳遞引數（事件引數） ```vue

• {{user}}

data() { return { users: ["zhangsan","lisi","wangwu'"] } }, methods: { getUserData(data) { console.log(this.users[data]) } } ``` #### 七、事件預設引數$event ```vue

• {{user}}

methods: { getUserData(data,event) { console.log(this.users[data]); console.log(event); } } ```  **$event:原生js物件** #### 八、事件修飾符 ```vue .stop .prevent .capture .self .once .passive ``` ```vue event.preventDefault() :阻止預設事件，也就是.prevent event.stopPropagation() ：阻止事件冒泡，也就是.stop ``` ```vue

... ... ... ``` 使用修飾符時，順序很重要；相應的程式碼會以同樣的順序產生。 因此，用 `v-on:click.prevent.self` 會阻止**所有的點選**， 而 `v-on:click.self.prevent` 只會阻止對元素自身的點選。 可參考[官網](https://cn.vuejs.org/v2/guide/events.html) #### 九、按鈕修飾符 ```vue ``` ```vue 全部的按鍵別名： .enter .tab .delete (捕獲“刪除”和“退格”鍵) .esc .space .up .down .left .right 可以通過全域性 config.keyCodes 物件自定義按鍵修飾符別名： // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 ``` 可通過keyup事件來檢視按鈕對應的數字是多少, 如下: k字母對應的數字是75. ```vue getKeyNum (event){ console.log(event); } ```  可參考[官網](https://cn.vuejs.org/v2/guide/events.html) #### 十、陣列更新檢測 data中的資料改變，會引起檢視的改變。 ###### 變異方法 Vue 包含一組觀察陣列的變異方法，所以它們也將會觸發檢視更新。這些方法如下： ```vue push() pop() shift() unshift() splice() sort() reverse() ``` 1. push() ```vue 插入資料 export default { data() { return { users: ["zhangsan","lisi","wangwu'"] } }, methods: { getUserData(data,event) { console.log(this.users[data]); console.log(event); }, getKeyNum (event){ console.log(event); }, adddata() { this.users.push("這是新增的資料"); } } } ``` ###### 替換陣列 不會引起檢視更新 **注意：** **filter(), concat() 和 slice() 。這些不會改變原始陣列，但總是返回一個新陣列。當使用非變異方法時，可以用新陣列替換舊陣列：** 可參考[官網](https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95) ###### 顯示過濾與排序結果 ```vue nums: [1,2,34,5,6,8,54,31,34,4,2] 顯示奇數 getJishu() { this.nums.filter(function(num){ if(num % 2 ==0){ console.log(num); } }); } ``` #### 十一、計算屬性與觀察者 模板內的表示式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。 所以，對於任何複雜邏輯，你都應當使用**計算屬性**。 ###### computed()計算屬性 與data()同級 ```vue {{msg}}
{{newmsg}} msg: 'abcde' computed: { newmsg(){ return this.msg.split('').reverse().join(''); } } ``` 這樣在很多需要翻轉的地方直接呼叫newmsg就可以，不用在每個呼叫中在單獨寫翻轉了。 ###### 計算屬性與methods區別 1. 不同的是**計算屬性是基於它們的依賴進行快取的**。只在相關依賴發生改變時它們才會重新求值。這就意味著只要 msg 還沒有發生改變，多次訪問 newmsg 計算屬性會立即返回之前的計算結果，而不必再次執行函式。 2. methods則每次都會重新執行。 #### 十二、表單輸入繫結 ###### v-model:雙向資料繫結 ```vue {{msg}}
return { msg: 'test' } ``` ###### watch（） 監聽資料 ```vue watch: { msg(data){ console.log(data); } } ``` **注意：watch監聽資料必須和data中名字一樣。** 多行文字，單選框，複選框都可以使用v-model、watch watch一般在input中使用。 #### 十三、修飾符 ###### .lazy ```vue ``` 在預設情況下，`v-model` 在每次 `input` 事件觸發後將輸入框的值與資料進行同步 (除了[上述](https://cn.vuejs.org/v2/guide/forms.html#vmodel-ime-tip)輸入法組合文字時)。你可以新增 `lazy` 修飾符，從而轉變為使用 `change`事件進行同步. ###### .number ```vue ``` 如果想自動將使用者的輸入值轉為數值型別，可以給 `v-model` 新增 `number` 修飾符 ###### .trim ```vue ``` 如果要自動過濾使用者輸入的首尾空白字元，可以給 `v-model` 新增 `trim` 修飾符 延遲操作,減輕伺服器負擔。 ```vue ``` #### 十四、Class與Style繫結 ###### 物件語法 繫結單個 ```vue ``` 或者繫結一個物件 ```vue

{{msg}}

styleObj: { active: true, demo: true }, msg: 'test' ``` ###### 陣列語法 ```vue msg: 'test', demo1: 'demo11', demo2: 'demo22' {{msg}} ``` ```vue

• {{user.name}}----{{user.age}}-----{{user.sex}}

all: [{name:"zhangsan",age:10,sex: '男'}, {name:"zhaoliu",age:23,sex: '女'}, {name:"wangwu",age:19,sex: '女'}, {name:"lisi",age:12,sex: '男'}] .active{ color: aqua; } ``` 更多繫結可參考[官網](https://cn.vuejs.org/v2/guide/class-and-style.html) ###### 繫結內聯樣式 物件語法 更多繫結可參考[官網](https://cn.vuejs.org/v2/guide/class-and-style.html) 檢視改變是有資料改變的。是有後端資料驅動前段檢視的變化。 #### 十五、Props父元件向子元件傳值 ###### 單元件由三部分組成： ```vue ``` 1. template: 裡面只能存在一個根元素 2. script：必須通過export default匯出，外部元件才能訪問。 1. name:指定元件名字。 2. data：繫結資料。 3. style：樣式 1. scoped：當前樣式只在當前元件內生效，區域性的。 ###### 子父級元件 一個元件被另一個元件巢狀。 如： app元件裡面巢狀hellowolrd元件。 ###### 子父級元件通訊 父 --> 子： props 子 --> 父： emit Event 父向子通訊： ```vue 父元件： msg: 'son hello' 子元件： props: [ "title" ] {{title}} ``` ###### props資料傳遞型別驗證 ```vue 子元件接受引數時，指定型別。 props: { title: { type: [String,Number], required: true， defalut: 100 } } ``` 1. type:指定接收引數型別，可以有多個型別。 2. required：是否必傳。 注意：如果是Number、String可以直接預設一個值，如果是其他型別則預設返回一個方法。 ```vue return { say: { name:"Zhangsan", age:20 } } props: { msg: { type:Object, default:function(){ return { name:"lisi", age:10 } } } } ``` 1. 資料驗證 2. 多資料型別驗證 3. 必選項驗證 4. 預設值 5. obj、arr資料型別的預設值 #### 十六、子向父元件通訊 使用v-on自定義事件 ```vue 子元件程式碼： ``` ```vue 父元件程式碼： ``` ###### 父元件向子元件傳遞資料步驟 1. 子元件通過一個事件來觸發。 2. 事件中有兩個引數，一個key，用來在父元件中作為事件。另一個數據。 3. 父元件使用key作為事件，定義一個事件接受資料 資料互動式同步的。 ###### input所有內容為String，可以通過下面進行轉換成數字。 ```vue computed: { getNum(){ return this.newMsg -0; } } ``` #### 十七、插槽與快取 ###### 使用插槽分發內容 1. 單個插槽 ```vue 父元件： ``` ```vue 子元件： ``` **注意：插槽的樣式，可以在父元件中設定，也可以在子元件中設定。** 2. 具名插槽 ```vue {{msg}}

我是插槽2哦

我是插槽，但是我會被父元件插入內容覆蓋。

---

``` **注意：當沒有傳遞檢視時，可以顯示查查預設設定的值。** 3. 作用域插槽（傳遞引數） ###### 作用於插槽傳遞資料 ```vue 子元件： 父元件： {{ key.text}} ``` ###### props與slot插槽對比 | 名稱 | props | slot | | -------- | ------------------ | ----------------- | | 傳遞資料 | 父元件 ---> 子元件 | 子元件---> 父元件 | | 資料 | 由父元件決定 | 由子元件決定 | | 檢視 | 由子元件決定 | 由父元件決定 | #### 十八、動態元件 ```vue ``` 注意：這樣的來回切換，每次都重新渲染了。因此下面介紹了keep-alive ###### ```vue ``` keep-alive:將組建保留在記憶體中，做到了快取效果。 注意：什麼情況使用keep-alive快取？ 實時更新不能使用快取。 #### 十九、過度與動畫 ###### 單元素與組建的過渡 自動應用class ```vue ``` ###### 過渡類名 1. `v-enter`：定義進入過渡的開始狀態。在元素被插入之前生效，在元素被插入之後的下一幀移除。 2. `v-enter-active`：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入之前生效，在過渡/動畫完成之後移除。這個類可以被用來定義進入過渡的過程時間，延遲和曲線函式。 3. `v-enter-to`: **2.1.8版及以上** 定義進入過渡的結束狀態。在元素被插入之後下一幀生效 (與此同時 `v-enter` 被移除)，在過渡/動畫完成之後移除。 4. `v-leave`: 定義離開過渡的開始狀態。在離開過渡被觸發時立刻生效，下一幀被移除。 5. `v-leave-active`：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時立刻生效，在過渡/動畫完成之後移除。這個類可以被用來定義離開過渡的過程時間，延遲和曲線函式。 6. `v-leave-to`: **2.1.8版及以上** 定義離開過渡的結束狀態。在離開過渡被觸發之後下一幀生效 (與此同時 `v-leave` 被刪除)，在過渡/動畫完成之後移除。 ```vue ``` 移動的過渡 ```vue ``` ###### CSS過渡 ```vue ``` 動畫可以控制過程，過渡不能。 ###### 使用第三方css 引入外部css方式 1. 直接新增到index.html中。 ```html ``` 所用動畫都應該設定為浮動的，不然會出現下拉或滾動條 ```vue position: absolute; ``` ###### SVG 可參考[這裡](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/circle) #### 二十、自定義指定 ###### 全域性指令 如自定義自動聚焦輸入框指定： ```vue main.js中自定義指令 // 註冊一個全域性自定義指令 `v-focus` Vue.directive('focus', { // 當被繫結的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() } }) ``` 自定義指令的使用： ```vue ``` ###### 區域性指令 將自定義指令放在使用的組建中： ```vue ``` #### 二十一、過濾器 如：自動轉換首字母為大寫： ```vue ```