1、vue上手
概念：vue是一個用于構建用戶界面的漸進式框架
vue的兩種使用方式：
1、vue的核心包開發
場景：局部模塊改造
2、vue核心包&vue插件工程化開發
場景：整站開發
1、創建實例
核心步驟
1、準備容器（盒子）
2、引包（官網）-開發版本/生產版本
3、創建vue實例 new vue()
4、指定配置項->渲染數據
el指定掛載點、data提供數據
例如：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- 1、準備容器 -->{{msg}}</div><!-- 2、引包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>// 3、創建實例const app=new Vue({// 通過el來配置選擇器el:'#app',data:{// 通過data提供數據msg:'hello world'}})</script>
</body>
</html>運行結果如下：
2、插值表達式
插值表達式是一種vue的模板語法
作用：利用表達式進行插值，渲染到頁面中
表達式：是可以被求值的代碼，JS引擎會將其計算出一個結果
語法：{{表達式}}
注意點：
1、使用的數據必須存在
2、支持的是表達式，而非語句，比如if for...
3、不能在標簽屬性中使用{{ }}插值
3、vue的響應式特性
數據的響應式處理，也就是數據變化后，視圖自動更新
如何訪問或修改呢，data中的數據，最終都會被添加到實例上，也就是成為實例的屬性，因此通過實例.屬性名即可訪問與修改
2、vue指令
vue會根據不同的指令，針對標簽實現不同的功能
指令：帶有v-前綴的特殊標簽屬性
1、v-html
例如：
?
<div v-html="str"></div>其中v-html指令就是設置DOM元素的innerHTML，該指令可以解析內容中的標簽
2、v-show
控制元素顯示隱藏
語法：v-show="表達式" 表達式值true顯示，false隱藏
本質上是在利用css屬性中的display:none來進行隱藏的
場景：頻繁切換顯示隱藏的場景
3、v-if
控制元素顯示隱藏（條件渲染）
語法：v-if="表達式" 表達式值true顯示，false隱藏
根據判斷條件，控制元素的創建與移除
4、v-else & v-else-if
輔助v-if進行判斷渲染
語法：v-else v-else-if="表達式"
注意：需要緊貼著v-if使用
5、v-on
作用：注冊事件=添加監聽+提供邏輯處理
語法：
v-on：事件名=‘’內聯語句‘’
內聯語句，也就是js代碼語句
v-on：事件名=‘’methods中的函數名‘’
或者將v-on替換為@，一種簡寫方式
method是vue實例中的配置項，內部可以裝函數，如果需要訪問data配置項的數據，需要使用實例.屬性名或者是this來進行訪問修改
* 調用參數
如果v-on中調用了函數，可以在函數名后加上括號來進行調用參數
6、v-bind
作用：動態設置html的標簽屬性->src\url\title...
語法：v-bind：屬性名=''表達式''
7、v-for
作用：基于數據循環，多次渲染整個元素
遍歷數組的語法：
v-for="(item,index) in 數組"
item為每一行，index為數組下標
* key
key屬性="唯一標識"
作用：給列表項添加的唯一標識。便于vue進行列表項的正確排序復用
8、v-model
作用：給表單元素使用，雙向數據綁定->可以快速獲取或設置表單元素內容
數據變化，視圖自動更新
視圖變化，數據自動更新
語法：v-model='變量'
