小白的vue學習路程

最近公司開發新的項目，前端框架選定vue，對於前端小白的我，須要本身學習補充能量。

vue的最大特色：響應的數據綁定、組合的視圖組件。

vue文件裏面包含三種：<template>html模板</template>  <script>js</script>  <style>css<style>

webpack 將vue的文件打包成瀏覽器能識別的 html（視圖層）、js(就是一個vue對象，model數據層在這裏)、css

 

全局安裝vue的環境：

npm install -g vue-cli(能夠在命令行vue命令)

vue init webpack vueTest(建立一個基於webpack模板的vue的新項目，項目名稱爲：vueTest)

npm install -d(將項目中package.json中的依賴的包下載到vueTest)

npm  run dev(啓動環境，在package.json中的"scripts": "dev": "node build/dev-server.js",因此啓動只須要npm run  dev  就好，在瀏覽器中能夠瀏覽該項目：http://localhost:8080)以下圖所示：能夠實時監控，當你修改了js，頁面就會實時輸出對應的內容

 vue.js重要的組件:

1:data:數據

2：method：方法

3：watch：監聽

4：el:綁定的對象

vue的數據渲染：

三種形式：{{}}、v-text、v-html效果上沒有多大的區別。

當Vue中的a發生變化，上面的a也會相對應發生變化，響應式的數據綁定。

經常使用的指令：

控制模塊隱藏：v-if、v-show

渲染循環列表：v-for，就會循環出來兩個qinbb、mmp

事件綁定：v-on（其中v-on:click和@click是同樣的事件綁定）

 

 屬性綁定：v-bind，這個通常綁定的是class屬性，因此v-bind會省略，其中imageSrc是字符串，第三個p中的classA和classB也是字符串，{red:isRed}這個是對象，is說明是個布爾值。

總結：

new一個vue對象，主要包含了三個重要的屬性data（vue對象的數據至關於model）、method（vue對象的方法）、watch（vue對象的事件監聽）

模板指令將視圖層（html）和邏輯層（data）鏈接起來，經常使用的模板指令：

v-if（v-show）:判斷指令

v-text（v-html、{{}}）:模板渲染

v-for:循環指令

v-on:事件綁定