VUE 基礎語法 插值表示式{{}} 指令v-... 樣式的設定
阿新 • • 發佈：2020-11-16
1-階段學習目標
- vue框架
- react框架
2-vue框架介紹
特點
- 入門門檻比較低(學習成本比較低)
- 開發效率高(有非常多的配套設施: UI庫)
- 資料驅動檢視更新(不建議操作DOM)
- vue開發的專案效能會比原生方式開發的效能高
3-下載以及安裝
-
手動下載, 通過script標籤引入
-
直接通過script標籤引入線上CDN地址
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -
通過npm線上下載 通過script標籤引入
npm i vue -S<script src="node_modules/vue/dist/vue.js"></script>
4-vue基礎語法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第一步: 引入vue核心包 --> <script src="libs/vue.js"></script> </head> <body> <!-- 第二步: 模板 --> <div id="app"> <h1>{{msg}}</h1> <h2>{{msg2}}</h2> </div> </body> <script> // 第三步: 建立vue例項物件 const vm=new Vue({ // 指定模板的選擇器 el:'#app', // 儲存資料 data:{ msg:'hello vue', msg2:'你好, vue' } }); </script> </html>
5-插值表示式
- 書寫位置: 僅限於標籤之間
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 第一步: 引入vue核心包 --> <script src="libs/vue.js"></script> </head> <body> <!-- 第二步: 模板 --> <div id="app"> <h1>{{msg}}</h1> <!-- 呼叫系統方法 --> <h1>{{msg.toUpperCase().substr(0,5)}}</h1> <!-- 能否呼叫自定義方法 --> <h1>{{mySubstr(msg,0,2)}}</h1> <hr> <!-- 字串拼接 --> <h1>{{msg+'~~~'}}</h1> <h2>{{count}}</h2> <!-- 數學運算 --> <h2>{{count+200}}</h2> <!-- 邏輯處理 --> <h2>{{score>=60?'及格':'不及格'}}</h2> <hr> <h2>{{foo}}</h2> <h2>{{foo1}}</h2> <h2>{{foo2}}</h2> </div> </body> <script> // 第三步: 建立vue例項物件 const vm = new Vue({ // 指定模板的選擇器 el: '#app', // 儲存資料 data: { msg: 'hello vue', count: 100, score: 50, foo: true, foo1: undefined, foo2: null }, // 書寫方法: 事件處理函式/ methods:{ mySubstr(str,start=0,len=1){ return str.substr(start,len); } } }); </script> </html>
6-指令
- 指令是一種特殊的語法
- 指令的語法: 當做自定義標籤使用即可
6.1-v-text
-
作用: 指定標籤的內容
-
特點: 如果變數中包含標籤, 會原樣輸出
-
語法:
<h1>{{msg}}</h1> <h1 v-text="msg"></h1>
6.2-v-html
-
作用: 渲染富文字, 可以解析變數中的標籤
-
特點: 如果變數中包含標籤, 會解析標籤
-
語法
<h1 v-html="content"></h1>
6.3-v-bind
-
作用: 設定標籤屬性值
-
簡寫: 省略
v-bind, 只保留: -
語法
<img v-bind:src="url" /> <!--簡寫--> <img :src="url" />
6.4-v-show
-
作用: 控制元素的顯示狀態(隱藏, 顯示)
-
特點: 通過css的方式實現隱藏元素(display:none)
<img src="./imgs/3.jpg" v-show="isShow"/>
6.5-v-if
-
作用: 控制元素的顯示或隱藏狀態
-
特點: 根據條件成立與否, 建立或者銷燬元素實現切換顯示狀態
-
注意:
v-else,v-else-if指令不能單獨使用, 必須配合v-if指令使用 -
語法
<h1 v-if="score<60">不及格</h1> <h1 v-else-if="60<=score&&score<=70">及格</h1> <h1 v-else-if="70<score&&score<=80">良好</h1> <h1 v-else-if="score>80&&score<=100">優秀</h1> <h1 v-else>成績不合法</h1>
6.6-v-once
-
作用: 只對指定所在標籤執行一次模板編譯, 當標籤引用的變數發生更新時, 不會對其進行二次編譯
-
應用場景: 主要用於效能優化(如果變數的更新, 不希望觸發模板的二次編譯, 可以使用v-once指令)
-
語法:
<h1 v-once>{{msg}}</h1>
6.7-v-on
-
作用: 註冊事件
-
語法
<button v-on:事件名稱="事件處理函式">按鈕</button> -
注意:
- 在methods方法中獲取data中的資料, 直接通過
this關鍵字+資料屬性名即可
- 在methods方法中獲取data中的資料, 直接通過
-
簡寫: 使用
@代替v-on:<button @事件名稱="事件處理函式">按鈕</button>
6.8-v-for
-
作用: 對陣列, 物件進行迴圈遍歷輸出
-
語法
<div id="app"> <!-- 迴圈遍歷陣列 --> <!-- value表示陣列的元素, index表示陣列的索引 --> <h1 v-for="(value,index) in list">{{index}}----{{value}}</h1> <hr> <!-- 遍歷物件 --> <!-- item表示物件屬性值, key表示物件屬性名 --> <h1 v-for="(item,key,index) in user">{{index}}----{{key}}----{{item}}</h1> <hr> <!-- 遍歷數值 --> <ul> <li v-for="(str,index) in 'hello'">{{index}}---{{str}}</li> </ul> <!-- 遍歷字串 --> <ul> <li v-for="(number,index) in 10">{{index}}----{{number}}</li> </ul> </div> <script> // 第三步: 建立vue例項物件 const vm = new Vue({ // 指定模板的選擇器 el: '#app', // 儲存資料 data: { msg: 'hello vue', list:['jack','robin','pony'], user:{ name:'jack', gender:'男', age:50, address:'中國' } } }); </script> -
key屬性: 一般在進行v-for迴圈遍歷的時候, 需要給迴圈遍歷的標籤動態新增key屬性, 並且要保證key屬性的唯一性
- 作用: 在檢視和資料層建立一一對應關係, 方便後期進行佈局更新
6.9-v-model
-
作用: 雙向繫結, 瀏覽器輸入的東西, 實時反饋到某個地方
-
語法
<input type="text" v-model="變數">
7-樣式的設定
7.1-動態設定style
-
靜態style
<div style="width: 200px;height: 200px;background-color: green;"></div> -
v-bind動態繫結style
<div v-bind:style="{width:'200px',height:'200px',backgroundColor:'red'}"></div><div v-bind:style="divStyle"></div> <script> const vm = new Vue({ el: '#root', data: { // 樣式物件 divStyle: { width: '200px', height: '200px', backgroundColor: 'red', boxShadow:'0 0 2px 2px #333' } } } </script> -
陣列寫法
<div id="root"> <!-- 動態設定兩個樣式物件 --> <div v-bind:style="[hashSize?sizeStyle:'',hashBg?bgStyle:'']">動態設定style</div> <hr> <button @click="addSize">新增尺寸</button> <button @click="addBg">新增背景</button> </div> <script> const vm = new Vue({ el: '#root', data: { hashSize:false, hashBg:false, // 樣式物件1 sizeStyle: { width: '200px', height: '200px', }, // 樣式物件2 bgStyle:{ backgroundColor: 'red', boxShadow:'0 0 2px 2px #333' } }, methods: { addSize(){ this.hashSize=!this.hashSize; }, addBg(){ this.hashBg=!this.hashBg; } } }); </script>
7.2-動態設定class
-
字串寫法
<style> .size{ width: 200px; height: 200px; } .bg{ background-color: hotpink; } .font{ text-align: center; font-size: 20px; line-height: 200px; } </style> <div id="app"> <div v-bind:class="className">動態設定class</div> </div> <script> new Vue({ el:'#app', data{ className:'size bg font' } }) </script> -
陣列寫法
<style> .size{ width: 200px; height: 200px; } .bg{ background-color: hotpink; } .font{ text-align: center; font-size: 20px; line-height: 200px; } </style> <div id="app"> <div v-bind:class="[hashSize?'size':'',hashBg?'bg':'',hashFont?'font':'']">動態設定class</div> <hr> <button @click="toggleSize">新增尺寸</button> <button @click="toggleBg">新增背景</button> <button @click="toggleFont">新增字型</button> </div> <script> new Vue({ el:'#app', data{ hashSize:false, // 是否新增.size類名 hashBg:false, // 是否新增.bg類名 hashFont:false // 是否新增.font類名 }, methods: { toggleSize(){ this.hashSize=!this.hashSize; }, toggleBg(){ this.hashBg=!this.hashBg; }, toggleFont(){ this.hashFont=!this.hashFont; } } }) </script> -
物件寫法
<style> .size{ width: 200px; height: 200px; } .bg{ background-color: hotpink; } .font{ text-align: center; font-size: 20px; line-height: 200px; } </style> <div id="app"> <div v-bind:class="{size:hashSize,bg:hashBg,font:hashFont}">動態設定class</div> <hr> <button @click="toggleSize">新增尺寸</button> <button @click="toggleBg">新增背景</button> <button @click="toggleFont">新增字型</button> </div> <script> new Vue({ el:'#app', data{ hashSize:false, // 是否新增.size類名 hashBg:false, //是否新增.bg類名 hashFont:false //是否新增.font類名 }, methods: { toggleSize(){ this.hashSize=!this.hashSize; }, toggleBg(){ this.hashBg=!this.hashBg; }, toggleFont(){ this.hashFont=!this.hashFont; } } }) </script>