Vue2實踐揭秘讀書筆記 1 Vue概要

vue.js與angular2和react相比，vue.js一開始就為我們鋪平入門的道路，腳手架vue-cli。

因為它的存在，省去了手工配置開發環境、執行環境和測試環境的步驟，開發者可以直接步入vue.js開發的殿堂。

在開始之前，先安裝npm，然後輸入vue-cli安裝到全域性環境

npm i vue-cli -g

然後，開始建立工程

vue init webpack-****** vue-todos

然後進入vue-todos目錄，安裝腳手架專案的基本支援包：

npm i

安裝完支援包後鍵入以下指令就可以執行乙個由腳手架構建的基本vue.js程式

npm run dev

vue-cli的**結構

——readme.md ——index.html # 預設啟動頁面 ——package.json # npm 包配置檔案 ——src ——assets ——logo.png ——main.js # vue 例項啟動入口

——webpack.config.js # webpack 配置檔案

main.js檔案

import vue from
'vue'
newvue
()

vue2新增的特色render方法，與react渲染機制一樣。為了得到更好的執行速度，vue2也採用了virtual dom。一種比瀏覽器原生的dom具有更好效能的虛擬元件模型。

開啟index.html檔案就能看到vue例項與頁面的對應關係：


lang
="en"
>
>
charset
="utf-8"
>
head
>
>
>
div>
src=
"/dist/build.js"
>
script
>
body
>
html
>

乙個vue例項必須與乙個頁面元素繫結。vue例項一般用作vue的全域性配置來使用，例如向例項安裝路由、資源外掛程式，配置應用於全域性的自定義過濾器、自定義指令等。

單頁元件由三個部分組成

檢視模板

屬性繫結

vue的屬性繫結語法是attribute=「expression」，attribute就是元素接收的屬性值（既可以是原生的也可以是自定義的），expression則是在vue元件內由data或props內定義的物件屬性，又或是乙個合法的表示式。

如果在元素屬性中不加上』:』，vue認為是向這個屬性賦上字串值而不是vue元件上定義的屬性引用。

樣式繫結必然是繫結到判斷物件上的:class=""，不能直接寫css類名，即使要繫結乙個固定的css類也都要這樣寫，即:class=""，除非不使用樣式繫結。

無論繫結的是樣式類還是樣式屬性，:class和:style表示式內一定是乙個json物件。

:class的json物件的值一定是布林型的，true表示加上樣式，false表示移除樣式類。

:style的json物件則像是乙個樣式配置項，key宣告屬性名，value則是樣式屬性的具體值。

過濾器

安裝乙個很出名的時間格式化專用的包——moment.js

npm i moment -s

vue中用「過濾器」進行模板格式化，實質上是乙個只帶單一輸入引數的函式，在vue2中已經將原有的內建過濾器移除。在vue元件中加入自定義過濾器非常簡單，只要在filters屬性內加入方法定義就可以在模組上使用了。

引入moment

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

加入過濾器

export default 
}}

模板上應用

在所有過濾器中是沒有this引用的，乙個undefined值。