/" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網(wǎng)站運營 > Vue-模板template

Vue-模板template

時間:2023-06-06 23:57:02 | 來源:網(wǎng)站運營

時間:2023-06-06 23:57:02 來源:網(wǎng)站運營

Vue-模板template:

Vue模板的主要特點

  1. 使用XML語法
  2. 使用{{}}插入表達式,只能包含單個表達式
  3. 使用v-html v-on v-bind 等指令操作DOM
  4. 使用v-if v-for等指令實現(xiàn)條件判斷和循環(huán)

模板template三種寫法

一、Vue完整版,寫在HTML里

// html文件<div id=xxx>{{n}}<button @click="add">+1</button></div>二、Vue完整版,寫在選項里

<div id="app"></div>

new Vue({ template: ` <div> {{n}} <button @click="add">+1</button> </div>`, data:{n:0}, // data methods:{add(){ this.n += 1 }}}).$mount('#app')注意:div#app 會被取代

三、Vue非完整版,配合xxx.vue文件

// xxx.vue<template> <div> {{n}} <button @click="add">+1</button> </div></template><script> export default { data(){ return {n:0} }, // data 必須為函數(shù) methods:{add(){ this.n += 1 }} }</script><style>這里寫 CSS </style>// js文件import Xxx from './xxx.vue'new Vue({ render: h => h(Xxx)}).$mount('#app')注意:這里的template里面的不是html語法,而是xml語法

html和xml的兩個區(qū)別:

  1. html:<input name="username">| <input name="username" />兩種寫法都可以,xml 只能寫 <input name="username" />
  2. html寫空的標簽:<div></div>,xml <div></div>、<div />兩種都可以

展示內容

1、v-text——表達式

{{object.a}} 表達式{{ n+1 }} 可以寫任何運算{{ fn(n) }} 可以調用函數(shù)如果值為undefined 或 null 就不顯示另一種寫法是 <div v-text="表達式"></div> 很少用

2、v-html——HTML內容

假設 data.x 值為 <strong>hi</strong><div v-html="x"></div> 就可以顯示粗體的hi使用v-html動態(tài)渲染的任意 HTML 可能會非常危險,因為它很容易導致XSS 攻擊。只對可信內容使用 HTML 插值,絕不要對用戶提供的內容使用插值。

3、v-pre——展示 {{ n }} ,兩對花括號都展示出來

<div v-pre>{{ n }}</div>// v-pre 不會對模板進行編譯

綁定屬性

v-bind

// 綁定src<img v-bind:src="x" />// 簡寫成<img :src="x" />// 綁定對象<div :style="{width: 100}"></div>// 注意這里100默認是100px,不寫px也可以,如果是em,就需要寫上'100em'

綁定事件

v-on

<button v-on:click="add">+1</button>// 點擊之后,Vue會運行 add()<button v-on:click="xxx(1)">xxx</button>// 點擊之后,Vue會運行 xxx(1)<button v-on:click="n+=1">xxx</button>// 點擊之后,Vue會運行 n+=1縮寫:<button @click="n+=1">xxx</button>,正常人都用縮寫

條件判斷

v-if、v-else-if、v-else

<div v-if="x > 0"> x 大于 0 </div><div v-else-if="x === 0"> x 等于 0 </div><div v-else="x < 0"> x 小于 0 </div>

循環(huán)

for(value, key) in 對象或數(shù)組

// 數(shù)組<ul> <li v-for="(u, index) in users" :key="index"> 索引: {{index}} 值:{{u.name}} </li></ul>// 對象<ul> <li v-for="(value, name) in obj" :key="name"> 屬性名: {{name}} 屬性值:{{value}} </li></ul>:key="index"有bug,后面補充

顯示、隱藏

v-show

<div v-show="n % 2 === 0">n是偶數(shù)</div>近似等于

<div :style="{display:n%2===0?'block':'none'}"> n是偶數(shù) </div>看得見的元素display不只有block,如table 的 display 為table,li 的 display 為list-item

v-once——優(yōu)化更新性能

只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節(jié)點將被視為靜態(tài)內容并跳過。不能濫用v-once,只有在一個組件包含大量靜態(tài)內容的情況下考慮使用

v-cloak

這個指令保持在元素上直到關聯(lián)實例結束編譯。和 CSS 規(guī)則一起用時,這個指令可以隱藏未編譯的 Mustache 標簽直到實例準備完畢。

[v-cloak] { display: none;}<div v-cloak> {{ message }} </div>不會顯示,直到編譯結束。

修飾符

@click.stop="x" 表示阻止事件傳播/冒泡

@click.prevent="x" 表示阻止默認動作

@click.stop.prevent="x" 同時表示兩種意思

其他:

1、v-on:

.{keycode|keyAlias }
.stop
.prevent
.capture .self .once .passive .native
快捷鍵:.ctrl .alt .shift .meta .exact
鼠標:.left .right .middle
2、v-bind:

.prop
.camel
.sync
3、v-model:

.lazy
.number
.trim
加粗的重點學習

.sync

當需要對一個 prop 進行“雙向綁定”的時候,如下示例

// App.vue<template> <div class="app"> App.vue 我現(xiàn)在有 {{total}} <hr> <Child :money="total" v-on:update:money="total = $event"/> // 監(jiān)聽并更新money </div></template><script>import Child from "./Child.vue";export default { data() { return { total: 10000 }; }, components: { Child: Child }};</script><style></style>// Child.vue<template> <div class="child"> {{money}} <button @click="$emit('update:money', money-100)"> // 對父組件的money賦新值 <span>花錢</span> </button> </div></template><script>export default { props: ["money"]};</script><style></style>代碼中 <Child :money="total" v-on:update:money="total = $event"/>

可以簡寫成 <Child :money.sync="total">

注意:v-bind帶有.sync修飾符時,不能和表達式一起使用

上面代碼中的Vue規(guī)則:

  1. 組件不能修改prop外部數(shù)據(jù)
  2. $emit可以觸發(fā)事件,并傳參
  3. $event可以獲取$emit的參數(shù)
  4. 使用update:xxx的模式




關鍵詞:模板

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉