當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue-day01-vue模板语法

發布時間：2024/7/19 vue 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue-day01-vue模板语法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- - Vue 是什么？
  - 使用Vue將helloworld 渲染到頁面上
  - 指令
  - v-cloak
  - v-text
  - v-html
  - v-pre
  - **v-once**
  - 雙向數據綁定
  - - v-model
  - mvvm
  - v-on
  - v-on事件函數中傳入參數
  - 事件修飾符
  - 按鍵修飾符
  - 自定義按鍵修飾符別名
  - ==小案例==-簡單計算器
  - v-bind
  - - 綁定對象
    - 綁定class
    - 綁定對象和綁定數組的區別
    - 綁定style
  - 分支結構
  - - v-if 使用場景
    - v-show 和 v-if的區別
  - 循環結構
  - - v-for
  - 案例選項卡
  - - 1、 HTML 結構
    - 2、提供的數據
    - 3、把數據渲染到頁面
    - 4、給每一個tab欄添加事件,并讓選中的高亮

Vue 是什么？

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架
vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合

使用Vue將helloworld 渲染到頁面上

指令

本質就是自定義屬性
Vue中指定都是以 v- 開頭

v-cloak

防止頁面加載時出現閃爍問題
<style type="text/css">/* 1、通過屬性選擇器選擇到帶有屬性 v-cloak的標簽讓他隱藏*/[v-cloak]{/* 元素隱藏 */display: none;}</style> <body><div id="app"><div v-cloak >{{msg}}</div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({// el 指定元素 id 是 app 的元素 el: '#app',// data 里面存儲的是數據data: {msg: 'Hello Vue'}}); </script> </body> </html>

v-text

v-text指令用于將數據填充到標簽中，作用于插值表達式類似，但是沒有閃動問題
如果數據中有HTML標簽會將html標簽一并輸出
注意：此處為單向綁定，數據對象上的值改變，插值會發生變化；但是當插值發生變化并不會影響數據對象的值

<div id="app"><p v-text="msg"></p><p>{{msg}}</p> </div><script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});</script>

v-html

用法和v-text 相似但是他可以將HTML片段填充到標簽中
可能有安全問題, 一般只在可信任內容上使用 v-html，永不用在用戶提交的內容上
它與v-text區別在于v-text輸出的是純文本，瀏覽器不會對其再進行html解析，但v-html會將其當html標簽解析后輸出。
<div id="app"><p v-html="html"></p> <p>{{message}}</p> <p v-text="text"></p>  </div> <script>let app = new Vue({el: "#app",data: {message: "<span>通過雙括號綁定</span>",html: "<span>html標簽在渲染的時候被解析</span>",text: "<span>html標簽在渲染的時候被源碼輸出</span>",}}); </script>

v-pre

顯示原始信息跳過編譯過程
跳過這個元素和它的子元素的編譯過程。
一些靜態的內容不需要編譯加這個指令可以加快渲染

<span v-pre>{{ this will not be compiled }}</span> <span v-pre>{{msg}}</span>  <script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}});</script>

v-once

執行一次性的插值【當數據改變時，插值處的內容不會繼續更新】

<span v-once>{{ msg}}</span> <script>new Vue({el: '#app',data: {msg: 'Hello Vue.js'}}); </script>

雙向數據綁定

當數據發生變化的時候，視圖也就發生變化
當視圖發生變化的時候，數據也會跟著同步變化

v-model

v-model是一個指令，限制在 <input>、<select>、<textarea>、components中使用

<div id="app"><div>{{msg}}</div><div>當輸入框中內容改變的時候，頁面上的msg 會自動更新<input type="text" v-model='msg'></div></div>

mvvm

MVC 是后端的分層開發概念； MVVM是前端視圖層的概念，主要關注于視圖層分離，也就是說：MVVM把前端的視圖層，分為了三部分 Model, View , VM ViewModel
m model
- 數據層 Vue 中數據層都放在 data 里面
v view 視圖
- Vue 中 view 即我們的HTML頁面
vm （view-model）控制器將數據和視圖層建立聯系
- vm 即 Vue 的實例就是 vm

v-on

用來綁定事件的
形式如：v-on:click 縮寫為 @click;

v-on事件函數中傳入參數

<body><div id="app"><div>{{num}}</div><div><button v-on:click='handle1'>點擊1</button><button v-on:click='handle2(123, 456, $event)'>點擊2</button></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0},methods: {handle1: function(event) {console.log(event.target.innerHTML)},handle2: function(p, p1, event) {console.log(p, p1)console.log(event.target.innerHTML)this.num++;}}});</script>

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。
Vue 不推薦我們操作DOM 為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符
修飾符是由點開頭的指令后綴來表示的

<a v-on:click.stop="doThis"></a> <form v-on:submit.prevent="onSubmit"></form> <a v-on:click.stop.prevent="doThat"></a>  <div v-on:click.self="doThat">...</div>使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

按鍵修飾符

在做項目中有時會用到鍵盤事件，在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符

<input v-on:keyup.13="submit"> <input v-on:keyup.enter="submit"> <input type="text" v-on:keyup.enter.space="alertMe" >常用的按鍵修飾符 .enter => enter鍵 .tab => tab鍵 .delete (捕獲“刪除”和“退格”按鍵) => 刪除鍵 .esc => 取消鍵 .space => 空格鍵 .up => 上 .down => 下 .left => 左 .right => 右<script>var vm = new Vue({el:"#app",methods: {submit:function(){},alertMe:function(){},}})</script>

自定義按鍵修飾符別名

在Vue中可以通過config.keyCodes自定義按鍵修飾符別名

<div id="app">預先定義了keycode 116（即F5）的別名為f5，因此在文字輸入框中按下F5，會觸發prompt方法<input type="text" v-on:keydown.f5="prompt()"> </div><script>Vue.config.keyCodes.f5 = 116;let app = new Vue({el: '#app',methods: {prompt: function() {alert('我是 F5！');}}}); </script>

小案例-簡單計算器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><h1>簡單計算器</h1><div><span>數值A:</span><span><input type="text" v-model='a'></span></div><div><span>數值B:</span><span><input type="text" v-model='b'></span></div><div><button v-on:click='handle'>計算</button></div><div><span>計算結果:</span><span v-text='result'></span></div></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*簡單計算器案例 */var vm = new Vue({el: '#app',data: {a: '',b: '',result: ''},methods: {handle: function(){// 實現計算邏輯this.result = parseInt(this.a) + parseInt(this.b);}}});</script> </body> </html>

v-bind

v-bind和v-model的區別

https://www.cnblogs.com/LFxanla/p/11601420.html

https://www.cnblogs.com/xuzhudong/p/8617487.html

v-bind 指令被用來響應地更新 HTML 屬性
v-bind:href 可以縮寫為 :href;

<img v-bind:src="imageSrc"> <img :src="imageSrc">

綁定對象

我們可以給v-bind:class 一個對象，以動態地切換class。
注意：v-bind:class指令可以與普通的class特性共存

1、 v-bind 中支持綁定一個對象如果綁定的是一個對象則鍵為對應的類名值為對應data中的數據 <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"><li>學習Vue</li><li>學習Node</li><li>學習React</li> </ul><div v-bind:style="{color:activeColor,fontSize:activeSize}">對象語法</div><sript> var vm= new Vue({el:'.box',data:{isColor:true,isSize:true，activeColor:"red",activeSize:"25px",} }) </sript> <style>.box{border:1px dashed #f0f;}.textColor{color:#f00;background-color:#eef;}.textSize{font-size:30px;font-weight:bold;} </style>

綁定class

2、 v-bind 中支持綁定一個數組數組中classA和 classB 對應為data中的數據這里的classA 對用data 中的 classA 這里的classB 對用data 中的 classB <ul class="box" :class="[classA, classB]"><li>學習Vue</li><li>學習Node</li><li>學習React</li> </ul> <script> var vm= new Vue({el:'.box',data:{classA:‘textColor‘,classB:‘textSize‘} }) </script> <style>.box{border:1px dashed #f0f;}.textColor{color:#f00;background-color:#eef;}.textSize{font-size:30px;font-weight:bold;} </style>

綁定對象和綁定數組的區別

綁定對象的時候對象的屬性即要渲染的類名對象的屬性值對應的是 data 中的數據
綁定數組的時候數組里面存的是data 中的數據

綁定style

<div v-bind:style="styleObject">綁定樣式對象</div>'<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">內聯樣式</div> <div v-bind:style="[styleObj1, styleObj2]"></div><script>new Vue({el: '#app',data: {styleObject: {color: 'green',fontSize: '30px',background:'red'}，activeColor: 'green',fontSize: "30px"},styleObj1: {color: 'red'},styleObj2: {fontSize: '30px'}</script>

分支結構

v-if 使用場景

1- 多個元素通過條件判斷展示或者隱藏某個元素。或者多個元素
2- 進行兩個視圖之間的切換

<div id="app"><span v-if="flag">如果flag為true則顯示,false不顯示!</span> </div><script>var vm = new Vue({el:"#app",data:{flag:true}}) </script>----------------------------------------------------------<div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div><script>new Vue({el: '#app',data: {type: 'C'}}) </script>

v-show 和 v-if的區別

v-show本質就是標簽display設置為none，控制隱藏
- v-show只編譯一次，后面其實就是控制css，而v-if不停的銷毀和創建，故v-show性能更好一點。
v-if是動態的向DOM樹內添加或者刪除DOM元素
- v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內部的事件監聽和子組件

循環結構

v-for

用于循環的數組里面的值可以是對象，也可以是普通元素

<ul id="example-1"><li v-for="item in items">{{ item.message }}</li> </ul> <script>new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]，} }) </script>

不推薦同時使用 v-if 和 v-for
當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。

<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div><script>new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]，obj: {uname: 'zhangsan',age: 13,gender: 'female'}} }) </script>

key 的作用
- key來給每個節點做一個唯一標識
- key的作用主要是為了高效的更新虛擬DOM

案例選項卡

1、 HTML 結構

`<div id="app"><div class="tab"><ul><li class="active">apple</li><li class="">orange</li><li class="">lemon</li></ul><div class="current"><img src="img/apple.png"></div><div class=""><img src="img/orange.png"></div><div class=""><img src="img/lemon.png"></div></div></div>`

2、提供的數據

list: [{id: 1,title: 'apple',path: 'img/apple.png'}, {id: 2,title: 'orange',path: 'img/orange.png'}, {id: 3,title: 'lemon',path: 'img/lemon.png'}]

3、把數據渲染到頁面

把tab欄中的數替換到頁面上
- 把 data 中 title 利用 v-for 循環渲染到頁面上
- 把 data 中 path利用 v-for 循環渲染到頁面上
<div id="app"><div class="tab"> <ul><li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li></ul><div :key='item.id' v-for='(item, index) in list'><img :src="item.path"></div></div></div> <script>new Vue({// 指定操作元素是 id 為app 的 el: '#app',data: {list: [{id: 1,title: 'apple',path: 'img/apple.png'}, {id: 2,title: 'orange',path: 'img/orange.png'}, {id: 3,title: 'lemon',path: 'img/lemon.png'}]}})</script>

4、給每一個tab欄添加事件,并讓選中的高亮

4.1 、讓默認的第一項tab欄高亮
- tab欄高亮通過添加類名active 來實現（CSS active 的樣式已經提前寫好）
  - 在data 中定義一個默認的索引 currentIndex 為 0
  - 給第一個li 添加 active 的類名
    - 通過動態綁定class 來實現第一個li 的索引為 0 和 currentIndex 的值剛好相等
    - currentIndex === index 如果相等則添加類名 active 否則添加空類名
4.2 、讓默認的第一項tab欄對應的div 顯示
- 實現思路和第一個 tab 實現思路一樣只不過這里控制第一個div 顯示的類名是 current
<ul><li :class='currentIndex==index?"active":""':key='item.id' v-for='(item,index) in list'>{{item.title}}</li></ul><div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'><img :src="item.path"></div><script>new Vue({el: '#app',data: {currentIndex: 0, // 選項卡當前的索引默認為 0 list: [{id: 1,title: 'apple',path: 'img/apple.png'}, {id: 2,title: 'orange',path: 'img/orange.png'}, {id: 3,title: 'lemon',path: 'img/lemon.png'}]}})</script>
4.3 、點擊每一個tab欄當前的高亮其他的取消高亮
- 給每一個li添加點擊事件
- 讓當前的索引 index 和當前 currentIndex 的值進項比較
- 如果相等則當前li 添加active 類名當前的 li 高亮當前對應索引的 div 添加 current 當前div 顯示其他隱藏
  <div id="app"><div class="tab"><ul><li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li></ul><div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'><img :src="item.path"></div></div></div><script>new Vue({el: '#app',data: {currentIndex: 0, // 選項卡當前的索引默認為 0 list: [{id: 1,title: 'apple',path: 'img/apple.png'}, {id: 2,title: 'orange',path: 'img/orange.png'}, {id: 3,title: 'lemon',path: 'img/lemon.png'}]},methods: {change: function(index) {// 通過傳入過來的索引來讓當前的 currentIndex 和點擊的index 值相等 // 從而實現控制類名 this.currentIndex = index;}}})</script>

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue-day01-vue模板语法的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：计算机网络学习笔记-目录（更新日期：20
下一篇：操作系统学习笔记-04-操作系统的运行机