**
新學習新征程，我們一起踏上學習 vue.js的新長征
遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js
… … …
遇見 vue.js --------阿文的vue.js學習筆記(目錄)
關注我，我們一起學習進步，
**
1、v-text
類似于雙大括號 的作用，用作宣告式渲染，
舉個例子：
執行結果：你可以看出和我們的雙大括號寫 {{message}}的效果是一樣的
2、v-if
你可以簡單的理解為 v-if 就是將我們 系結之后的資料來進行判斷，
舉個例子：
執行結果：因為我們這里的判斷條件 condition 是true 所以 該條件可以顯示
但是你可以看見當我們將condition 條件改為false 的話，那么這句話將不可見
3、v-for
可以簡單的理解為，將一個資料回圈渲染到一個專案串列上去，
比如我們有很多個li 上面要傳入我們的資訊，如果一條一條寫我們就需要寫很多，所以這個時候我們就可以用到我們的 v-for
舉個例子：
執行結果：可以看出我們雖然只寫了一個li 但還是將我們下面的三條 text資料都渲染進了我們的li 串列上去
4、認識 組件
組件系統是 Vue 的另一個重要概念，也是 Vue.js 最強大的功能之一，使用組件化的方式來進行開發，可以封裝可以重用的代碼，減少程式猿重復勞動，
你可以簡單的理解為將一個大的東西分成很多小的東西，類似于將我們的網頁 分成一塊一塊的.
我們先簡單的做個例子：你可以看到這其實就是兩個p標簽，但是我們用組件的思維可以將其拆分為兩個，
代碼如下：
我們運用組件的作用就是當我們以后要寫大段大段的代碼的時候，我們檢測或者觀看起來就會很麻煩，而我們組件的作用就是將這一大段大段的代碼分成一小份一小份的，方便我們查看與使用和更改.
當然我們也可以 props 來傳遞屬性
簡單示例：
執行結果：你可以看出我們的第一個組件后面 就系結了我們的name 屬性
組件語法：
Vue.component("組件名"{
props:["屬性"]，
template:" 代碼 "
})
new Vue({
el:“元素名”
})
當然這里的new Vue 里面el 只是最基本的 ，根據需要還需添加其他的東西
下面我們再做個例子：
這里的 v-bind:mes = “item” 的意思是將我們下面獲得的 mes 屬性 將它與我們的item 資料進行系結，
執行結果：你可以看出這就是我們用組件的方式，來將下面的資料同時渲染進我們的li 里面，
**
現在基本了解即可，后面詳細學習的時候，再進行詳細的記錄，
**
關注 校園君有話說 公眾號 ，回復 web前端 免費領取50G 前端學習資料 一份 ，我們一起學習進步吧，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/80379.html
標籤：其他
上一篇：大資料到底應該如何學？