一、什么是Vue？
官方：是一套用于構建用戶界面的漸進式框架也是前端開發(fā)工程師必學的一個框架，和Angular、React 并稱為前端三大主流框架。
二、如何使用Vue框架？
-
通過包的形式引入
image.png -
查看是否引入成功
打開網頁 在控制臺查看是否有vue的標識
image.png
三、使用vue框架
image.png
注意是要在script 引入
四、vue五大指令 （靈魂）
-
內容渲染指令
{{}}
22fd179dc07be9617546d2bcf4ec083.png
渲染效果為
我是游六花今年18歲，是個可愛的女中二晚期 -
雙向綁定指令
作用：表單 v-model
image.png -
事件綁定指令
@click 綁定
image.png
我們需要多少個事件就可以在methods中寫多少個函數(shù) 如果需要使用就使用@click進行一個綁定
-
條件渲染指令
可以讓內容進行一個顯示和隱藏 v-if
如果為ture就會顯示 如果為false就會隱藏
6dc2e6252f4a20991f3677b462a35db.png
v-show 和v-if 用法都是一樣的
區(qū)別在于
v-show是通過css diaplay：none來顯示和隱藏
v-if是通過刪除和添加dom元素 來顯示和隱藏 -
列表渲染指令 v-for
id：唯一標識符 不加上不好報錯 加上會提升性能
image.png
image.png
渲染效果為
image.png
