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

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

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

Vue文件解讀

以HelloWorld.vue文件為例

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

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

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

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

基本語法

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


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

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

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

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

7. v-bind
v-bind用于html標簽屬性的數據綁定。v-bind:+屬性名或者簡寫為:+屬性名。
example: 綁定里面value的屬性為msg

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


9. v-model
v-model主要使用在表單中，實現雙向數據綁定的，在表單元素外使用不起作用。
與v-bind的區別是，v-bind不是數據雙向綁定，它是單向的，v-bind可用在任何標簽中。
當v-bind和v-model同時用在一個元素上時，它們各自的作用沒變，但v-model優先級更高，而且需區分這個元素是單個的還是一組出現的。
example:

Vue組件使用

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

父組件：


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

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。