當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue-day01-vue模板语法

發(fā)布時間：2024/7/19 vue 46 豆豆

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

文章目錄

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

Vue 是什么？

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

使用Vue將helloworld 渲染到頁面上

指令

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

v-cloak

防止頁面加載時出現(xiàn)閃爍問題
<style type="text/css">/* 1、通過屬性選擇器選擇到帶有屬性 v-cloak的標(biāo)簽讓他隱藏*/[v-cloak]{/* 元素隱藏 */display: none;}</style> <body><div id="app"><!-- 2、讓帶有插值語法的添加 v-cloak 屬性在數(shù)據(jù)渲染完場之后，v-cloak 屬性會被自動去除，v-cloak一旦移除也就是沒有這個屬性了屬性選擇器就選擇不到該標(biāo)簽也就是對應(yīng)的標(biāo)簽會變?yōu)榭梢?-><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 里面存儲的是數(shù)據(jù)data: {msg: 'Hello Vue'}}); </script> </body> </html>

v-text

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

<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片段填充到標(biāo)簽中
可能有安全問題, 一般只在可信任內(nèi)容上使用 v-html，永不用在用戶提交的內(nèi)容上
它與v-text區(qū)別在于v-text輸出的是純文本，瀏覽器不會對其再進(jìn)行html解析，但v-html會將其當(dāng)html標(biāo)簽解析后輸出。
<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標(biāo)簽在渲染的時候被解析</span>",text: "<span>html標(biāo)簽在渲染的時候被源碼輸出</span>",}}); </script>

v-pre

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

<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

執(zhí)行一次性的插值【當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會繼續(xù)更新】

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

雙向數(shù)據(jù)綁定

當(dāng)數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化
當(dāng)視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化

v-model

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

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

mvvm

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

v-on

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

v-on事件函數(shù)中傳入?yún)?shù)

<body><div id="app"><div>{{num}}</div><div><button v-on:click='handle1'>點(diǎn)擊1</button><button v-on:click='handle2(123, 456, $event)'>點(diǎn)擊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>

事件修飾符

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

<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>使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會阻止所有的點(diǎn)擊，而 v-on:click.self.prevent 只會阻止對元素自身的點(diǎn)擊。

按鍵修飾符

在做項(xiàng)目中有時會用到鍵盤事件，在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符

<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">預(yù)先定義了keycode 116（即F5）的別名為f5，因此在文字輸入框中按下F5，會觸發(fā)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>數(shù)值A(chǔ):</span><span><input type="text" v-model='a'></span></div><div><span>數(shù)值B:</span><span><input type="text" v-model='b'></span></div><div><button v-on:click='handle'>計算</button></div><div><span>計算結(jié)果:</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(){// 實(shí)現(xiàn)計算邏輯this.result = parseInt(this.a) + parseInt(this.b);}}});</script> </body> </html>

v-bind

v-bind和v-model的區(qū)別

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

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

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

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

綁定對象

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

1、 v-bind 中支持綁定一個對象如果綁定的是一個對象則鍵為對應(yīng)的類名值為對應(yīng)data中的數(shù)據(jù) <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"><li>學(xué)習(xí)Vue</li><li>學(xué)習(xí)Node</li><li>學(xué)習(xí)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 中支持綁定一個數(shù)組數(shù)組中classA和 classB 對應(yīng)為data中的數(shù)據(jù)這里的classA 對用data 中的 classA 這里的classB 對用data 中的 classB <ul class="box" :class="[classA, classB]"><li>學(xué)習(xí)Vue</li><li>學(xué)習(xí)Node</li><li>學(xué)習(xí)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>

綁定對象和綁定數(shù)組的區(qū)別

綁定對象的時候對象的屬性即要渲染的類名對象的屬性值對應(yīng)的是 data 中的數(shù)據(jù)
綁定數(shù)組的時候數(shù)組里面存的是data 中的數(shù)據(jù)

綁定style

<div v-bind:style="styleObject">綁定樣式對象</div>'<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">內(nèi)聯(lián)樣式</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>

分支結(jié)構(gòu)

v-if 使用場景

1- 多個元素通過條件判斷展示或者隱藏某個元素?；蛘叨鄠€元素
2- 進(jìn)行兩個視圖之間的切換

<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的區(qū)別

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

循環(huán)結(jié)構(gòu)

v-for

用于循環(huán)的數(shù)組里面的值可以是對象，也可以是普通元素

<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
當(dāng) v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級。

<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來給每個節(jié)點(diǎn)做一個唯一標(biāo)識
- key的作用主要是為了高效的更新虛擬DOM

案例選項(xiàng)卡

1、 HTML 結(jié)構(gòu)

`<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、提供的數(shù)據(jù)

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、把數(shù)據(jù)渲染到頁面

把tab欄中的數(shù)替換到頁面上
- 把 data 中 title 利用 v-for 循環(huán)渲染到頁面上
- 把 data 中 path利用 v-for 循環(huán)渲染到頁面上
<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 、讓默認(rèn)的第一項(xiàng)tab欄高亮
- tab欄高亮通過添加類名active 來實(shí)現(xiàn) （CSS active 的樣式已經(jīng)提前寫好）
  - 在data 中定義一個默認(rèn)的索引 currentIndex 為 0
  - 給第一個li 添加 active 的類名
    - 通過動態(tài)綁定class 來實(shí)現(xiàn) 第一個li 的索引為 0 和 currentIndex 的值剛好相等
    - currentIndex === index 如果相等則添加類名 active 否則添加空類名
4.2 、讓默認(rèn)的第一項(xiàng)tab欄對應(yīng)的div 顯示
- 實(shí)現(xiàn)思路和第一個 tab 實(shí)現(xiàn)思路一樣只不過這里控制第一個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, // 選項(xiàng)卡當(dāng)前的索引默認(rèn)為 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 、點(diǎn)擊每一個tab欄當(dāng)前的高亮其他的取消高亮
- 給每一個li添加點(diǎn)擊事件
- 讓當(dāng)前的索引 index 和當(dāng)前 currentIndex 的值進(jìn)項(xiàng)比較
- 如果相等則當(dāng)前l(fā)i 添加active 類名當(dāng)前的 li 高亮當(dāng)前對應(yīng)索引的 div 添加 current 當(dāng)前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, // 選項(xiàng)卡當(dāng)前的索引默認(rèn)為 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) {// 通過傳入過來的索引來讓當(dāng)前的 currentIndex 和點(diǎn)擊的index 值相等 // 從而實(shí)現(xiàn) 控制類名 this.currentIndex = index;}}})</script>

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：计算机网络学习笔记-目录（更新日期：20
下一篇： vue-day04-vue前端交互