Vue.js快速入門

Sliing·發表於2020-11-04

簡介

  • JS框架
  • 簡化Dom操作
  • 響應式資料驅動

Vue基礎

el掛載點

在這裡插入圖片描述
在這裡插入圖片描述
Vue例項的作用範圍是什麼呢?
Vue會管理el選項命中的元素及其內部的後代元素

是否可以使用其他的選擇器?
可以使用其他的選擇器,但是建議使用ID選擇器,因為id是唯一的

是否可以掛載其他的dom元素呢?
可以使用其他的雙標籤,不能使用HTML和BODY
在這裡插入圖片描述

data資料物件

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

本地應用

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

v-text

設定標籤的文字值(textContent)
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

v-html

設定標籤的innerHTML,如果有< a >這些,它會解析後然後展示出來,而不是原樣輸出
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

v-on基礎

為元素繫結事件
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

v-show

根據表達值的真假,切換元素的顯示和隱藏
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

v-if

根據表達值的真假,切換元素的顯示和隱藏
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述

v-bind

設定元素的屬性(比如:src,title,class)
在這裡插入圖片描述

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述