時間:2023-06-06 23:57:02 | 來源:網(wǎng)站運營
時間:2023-06-06 23:57:02 來源:網(wǎng)站運營
Vue-模板template:// html文件<div id=xxx>{{n}}<button @click="add">+1</button></div>
二、Vue完整版,寫在選項里new Vue({ template: ` <div> {{n}} <button @click="add">+1</button> </div>`, data:{n:0}, // data methods:{add(){ this.n += 1 }}}).$mount('#app')
注意:div#app 會被取代// 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語法{{object.a}} 表達式{{ n+1 }} 可以寫任何運算{{ fn(n) }} 可以調用函數(shù)如果值為undefined 或 null 就不顯示另一種寫法是 <div v-text="表達式"></div> 很少用
假設 data.x 值為 <strong>hi</strong><div v-html="x"></div> 就可以顯示粗體的hi
使用v-html動態(tài)渲染的任意 HTML 可能會非常危險,因為它很容易導致XSS 攻擊。只對可信內容使用 HTML 插值,絕不要對用戶提供的內容使用插值。<div v-pre>{{ n }}</div>// v-pre 不會對模板進行編譯
// 綁定src<img v-bind:src="x" />// 簡寫成<img :src="x" />// 綁定對象<div :style="{width: 100}"></div>// 注意這里100默認是100px,不寫px也可以,如果是em,就需要寫上'100em'
<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>,正常人都用縮寫<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>
// 數(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,后面補充<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-cloak] { display: none;}<div v-cloak> {{ message }} </div>
不會顯示,直到編譯結束。.{keycode|keyAlias }2、v-bind:
.stop
.prevent
.capture .self .once .passive .native
快捷鍵:.ctrl .alt .shift .meta .exact
鼠標:.left .right .middle
.prop3、v-model:
.camel
.sync
.lazy加粗的重點學習
.number
.trim
// 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"/>關鍵詞:模板
微信公眾號
版權所有? 億企邦 1997-2025 保留一切法律許可權利。