Vue簡單入門及使用（二）---基本語法及組件使用

• • Vue文件解讀
  • 基本語法
  • Vue組件使用

前言：做一個有夢想的程序猿！

Vue文件解讀

以HelloWorld.vue文件為例

一個vue文件里面包含三部分
1、template標(biāo)簽
< template >
< /template >

html模板代碼存放的標(biāo)簽，里面可以使用全局的屬性跟方法，或者當(dāng)前vue文件對象的屬性跟方法。
2、script標(biāo)簽

js代碼存放的標(biāo)簽，export default {}里面是一個vue的對象。
3、style標(biāo)簽

css代碼存放的標(biāo)簽，< style scoped >如果標(biāo)簽上加上scoped表示當(dāng)前css只會對當(dāng)前vue文件及其子組件生效，如果不帶scoped則表示為全局css。

基本語法

1. 插值
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值
example:


2. v-if
v-if是條件渲染指令，可根據(jù)條件是否渲染html標(biāo)簽，true渲染，false不渲染。
example:
v-else
也可以用 v-else 添加一個“else 塊”：

3. v-show
v-show也是條件渲染指令，可根據(jù)條件是否顯示html標(biāo)簽，true顯示，false不顯示。
與v-if的區(qū)別是，v-if是直接不渲染html標(biāo)簽，而v-show是渲染html標(biāo)簽，只是給html添加了一個display: none;的css樣式控制標(biāo)簽顯不顯示。
example:

6. v-for
v-for 指令基于一個數(shù)組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數(shù)據(jù)數(shù)組，而 item 則是被迭代的數(shù)組元素的別名。
example:

v-for 還支持一個可選的第二個參數(shù)（index），即當(dāng)前項的索引（數(shù)組下標(biāo)）。
為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，需要為每項提供一個唯一 key attribute。

7. v-bind
v-bind用于html標(biāo)簽屬性的數(shù)據(jù)綁定。v-bind:+屬性名或者簡寫為:+屬性名。
example: 綁定里面value的屬性為msg

8. v-on
v-on用于綁定html標(biāo)簽的事件，簡寫@+事件名稱。
綁定button的click事件
example:


9. v-model
v-model主要使用在表單中，實現(xiàn)雙向數(shù)據(jù)綁定的，在表單元素外使用不起作用。
與v-bind的區(qū)別是，v-bind不是數(shù)據(jù)雙向綁定，它是單向的，v-bind可用在任何標(biāo)簽中。
當(dāng)v-bind和v-model同時用在一個元素上時，它們各自的作用沒變，但v-model優(yōu)先級更高，而且需區(qū)分這個元素是單個的還是一組出現(xiàn)的。
example:

Vue組件使用

example:
編寫一個渲染按鈕列表的組件，并且父組件實現(xiàn)點擊對應(yīng)的按鈕增減1操作：
子組件：

父組件：


props
用于定義組件中有哪些屬性，父組件可以把父組件的數(shù)據(jù)綁定到子組件的屬性中去。

$emit
子組件自定義事件，用于子組件向父組件傳遞事件，父組件可以綁定子組件的事件。

slot 插槽
父組件可以將任意html代碼插入子組件中，子組件也可用 :+屬性名 的方式將子組件數(shù)據(jù)綁定到父組件，父組件可用slot-scope屬性來獲取子組件的數(shù)據(jù)。

最后，如果本篇文章對您有所幫助，可以評論或點贊支持一下哦，感謝感謝！

總結(jié)

以上是生活随笔為你收集整理的Vue简单入门及使用(二)---基本语法及组件使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。