本篇文章對Vue所有的內建指令進行回顧總結,前面先說明一些常用指令,不常用的放在後面。
說明:插值表達式也叫Mustache語法(即雙大括號),雙大括號標籤會被替換為對應元件實例中 msg
屬性的值。同時每次 msg
屬性變更時它也會同步更新。 【相關推薦:vuejs影片教學】
b2afd68918e546cb374a1c24691a872e 9ef6101249767d81d4698769b8f602fb c1a436a314ed609750bd7c7d319db4da{{message}} - {{message}}2e9b454fa8428549ca2e64dfac4625cd 2606cfc876c4f7b95f34dead360db33a c1a436a314ed609750bd7c7d319db4da{{counter * 10}}2e9b454fa8428549ca2e64dfac4625cd c1a436a314ed609750bd7c7d319db4da{{ message.split(" ").reverse().join(" ") }}2e9b454fa8428549ca2e64dfac4625cd ed385a16220899853edae7594c73287b 872d9b32c8da191b77f57bee34da1d47 c1a436a314ed609750bd7c7d319db4da{{getReverseMessage()}}2e9b454fa8428549ca2e64dfac4625cd a9eef1710a66a568c2ef3239283949bc c1a436a314ed609750bd7c7d319db4da{{ isShow ? "哈哈哈": "" }}2e9b454fa8428549ca2e64dfac4625cd 6159835a68da9af36b165079f357645e切换65281c5ac262bf6d81768915a4a77ac0 67ac0dbf43588ec2e5eb6f29e5b49789 4904c3e070de047a8967787da241ac97 赋值语句 --> <!-- c1a436a314ed609750bd7c7d319db4da{{var name = "abc"}}2e9b454fa8428549ca2e64dfac4625cd c1a436a314ed609750bd7c7d319db4da{{ if(isShow) { return "哈哈哈" } }}2e9b454fa8428549ca2e64dfac4625cd --> 21c97d3a051048b8e55e3c8f199a54b2
說明: 給元素綁定事件監聽器。
縮寫:@
參數: event
(使用物件語法則為可選項)
修飾符:
.stop
-呼叫 event.stopPropagation()
。 .prevent
-呼叫 event.preventDefault()
。 .capture
-在擷取模式新增事件監聽器。 .self
-只有事件從元素本身發出才會觸發處理函數。 .{keyAlias}
-只在某些按鍵下觸發處理函數。 .once
-觸發最多一次處理函數。 .left
-只在滑鼠左鍵事件觸發處理函數。 .right
-只在滑鼠右鍵事件觸發處理函數。 .middle
-只在滑鼠中鍵事件觸發處理函數。 .passive
-透過 { passive: true }
附加一個 DOM 事件。 詳細描述:事件類型由參數來指定。表達式可以是一個方法名,一個內聯聲明,如果有修飾符則可省略。
$event
變數:v-on:click="handle('ok', $event)"
。 v-on
也支援綁定不含參數的事件/監聽器對的物件。請注意,當使用物件語法時,不支援任何修飾符。 <!-- 方法处理函数 --> <button v-on:click="doThis"></button> <!-- 动态事件 --> <button v-on:[event]="doThis"></button> <!-- 内联声明 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 使用缩写的动态事件 --> <button @[event]="doThis"></button> <!-- 停止传播 --> <button @click.stop="doThis"></button> <!-- 阻止默认事件 --> <button @click.prevent="doThis"></button> <!-- 不带表达式地阻止默认事件 --> <form @submit.prevent></form> <!-- 链式调用修饰符 --> <button @click.stop.prevent="doThis"></button> <!-- 按键用于 keyAlias 修饰符--> <input @keyup.enter="onEnter" /> <!-- 点击事件将最多触发一次 --> <button v-on:click.once="doThis"></button> <!-- 对象语法 --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
說明: 動態的綁定一個或多個 attribute,也可以是元件的 prop。
縮寫: :
或 .
(當使用 .prop
修飾符)
#修飾符:
.camel
-將短橫線命名的attribute 轉換為駝峰式命名。 .prop
-強制綁定為 DOM property。 3.2 .attr
-強制綁定為 DOM attribute。 3.2 使用:
class
或 style
attribute,v-bind
支援額外的值類型如陣列或物件。詳見下方的指南連結。 in
運算子來檢查該元素上是否定義了且綁定的 key 同名的 DOM property。如果存在同名的 property,則 Vue 會把作為 DOM property 賦值,而不是作為 attribute 設定。這個行為在大多數情況都符合期望的綁定值類型,但是你也可以明確地用 .prop
和 .attr
修飾符來強制綁定方式。有時這是必要的,特別是在和自訂元素打交道時。 495f993a7d574e3467199ea0fc65255f 6c49807b5e41afd08b07f879d5b3611f ca2c8067e1037374e5d78c5e839ba8e7 ac4c10b12de52ff39d6dd1a86ea133be65281c5ac262bf6d81768915a4a77ac0 ce4ac11d070d78d3bf4200f56a5282e9 8bc35230c7bba922cce56c732e3b851b 685da3d7c8f7965d80f9edf48daa5f56 32faf3341289b94749af0bf1be652bc865281c5ac262bf6d81768915a4a77ac0 cf92cd4e87509defaf5abc7296f4c6d6 37ccd9321590410723880d35c8a63426 5eabc6319d1f89da1681a3a69d9817aa df1db8db6c6a1bd001a2d325e0dcbba716b28748ea4df4d9c2150843fecfba68 78caffbd9efd2e28142928d3ff73cef716b28748ea4df4d9c2150843fecfba68 e063a6e4f78702bfc30f136daf6fca6016b28748ea4df4d9c2150843fecfba68 c27aa09baa6799cfd4a33ee9cd28ce53 c58a2ee2da6d1a27c74c9b091d80feb516b28748ea4df4d9c2150843fecfba68 d149abd42d3366e14b12501b1112e70216b28748ea4df4d9c2150843fecfba68 8073364419f41ce130335513bf5e1951 d939ca9ed5cd14734c4ddb20e4e79c0f16b28748ea4df4d9c2150843fecfba68 a862b17c74470a288351156b8c4d7f77 9610c342ea57239201ca91be6e4e7501 ea6794c82904aa952ca98ddabb0de838 e69d9b4290fd4fb4a432945fea6a38d6 75b29cbcaccc9c02662e62bd527990c3 486d7a50595533609bc98d44595dc670f56d2e7f23d45ed220101d81457245f15db79b134e9f6b82c0b36e0489ee08edde28f444098d408d960da4dccff3a948
#說明: 基於表達式值的真假性,來條件性地渲染元素或模板片段。
4b13269c58155b4d3c3f0e2b713f7a9f哈哈哈哈2e9b454fa8428549ca2e64dfac4625cd
说明: 表示 v-if
或 v-if
/ v-else-if
链式调用的“else 块”。
4b13269c58155b4d3c3f0e2b713f7a9fCoder2e9b454fa8428549ca2e64dfac4625cd 6fa679bc7272d905ca47e65714e593c4Bin2e9b454fa8428549ca2e64dfac4625cd
ishow 为 true 显示 Coder,反之显示 Bin
说明: 表示 v-if
的“else if 块”。可以进行链式调用。
b2afd68918e546cb374a1c24691a872e 244106ce26f735bc74200a8a7b3280ca 049165843462199f7ad2c1a089cd32aa 90">优秀2e9b454fa8428549ca2e64dfac4625cd 941a9c098be4f0040efec28ed48f877b 60">良好2e9b454fa8428549ca2e64dfac4625cd 6fa679bc7272d905ca47e65714e593c4不及格2e9b454fa8428549ca2e64dfac4625cd 21c97d3a051048b8e55e3c8f199a54b2
v-model 后面会说明
说明:基于表达式值的真假性,来改变元素的可见性。
详细描述:v-show
通过设置内联样式的 display
CSS 属性来工作,当元素可见时将使用初始 display
值。当条件改变时,也会触发过渡效果。
b2afd68918e546cb374a1c24691a872e 385ed23b4d02fc77ee7ebd14c8b72ca1哈哈哈哈2e9b454fa8428549ca2e64dfac4625cd 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a const App = { template: '#my-app', data() { return { isShow: true } } } Vue.createApp(App).mount('#app'); 2cacc6d41bbb37262a98f745aa00fbf0
v-show
不支持在 d477f9ce7bf77f53fbcf36bec1b69b7a
元素上使用,也不能和 v-else
搭配使用。
说明: 在表单输入元素或组件上创建双向绑定。
仅限: d5fd7aea971a85678ba271703566ebfd
、221f08282418e2996498697df914ce4e
、 4750256ae76b6b9d804861d8f69e79d3
、components
修饰符:
基本使用:
b2afd68918e546cb374a1c24691a872e 35b2b4783ceb9a54ba9d906c4a31606c 990bd7c4ac2d231cd95d0071b68efb48 --> a19c7450e380302446c011b94704f128 c1a436a314ed609750bd7c7d319db4da{{message}}2e9b454fa8428549ca2e64dfac4625cd 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a const App = { template: '#my-app', data() { return { message: "Hello World" } }, methods: { inputChange(event) { this.message = event.target.value; } } } Vue.createApp(App).mount('#app');
绑定其他表单:
b2afd68918e546cb374a1c24691a872e 4640aafc9f665e8e0861ae4feac02a8f 6f6f0d71120cc4719f1ed49d3bea4e3e 自我介绍 b6bfc2c3df4413e12fb29e24bddd088540587128eee8df8f03d0b607fe983014 8c1ecd4bb896b2264e0711597d40766c c1a436a314ed609750bd7c7d319db4daintro: {{intro}}2e9b454fa8428549ca2e64dfac4625cd ada606ccd251c31e94c3d016eadc7e56 c6a5bebce3c117fdffd863b9251e3393 38fa2ed20090c8ee9c63580128fe7e49 f01f21f30e21ae6d8146c11bad293515 同意协议 8c1ecd4bb896b2264e0711597d40766c c1a436a314ed609750bd7c7d319db4daisAgree: {{isAgree}}2e9b454fa8428549ca2e64dfac4625cd 820b72f7228d77b617dd5fcb1f6b4904 45a2772a6b6107b401db3c9b82c049c2你的爱好: 54bdf357c58b8a65c66d7c19c8e4d114 da039dcce21c416b4ffd9c47728b7146 402e750d8af1b63b81eeec1332c33741 篮球 8c1ecd4bb896b2264e0711597d40766c a7766bdb1fc22a2b0cce202b7fb94330 3c2178265636ba16c83c1a7b917a0a09 足球 8c1ecd4bb896b2264e0711597d40766c fb8859e3c9d4ddf7dfbf06c809df1e45 38966e396fb5e52eadebf3356d27200b 网球 8c1ecd4bb896b2264e0711597d40766c c1a436a314ed609750bd7c7d319db4dahobbies: {{hobbies}}2e9b454fa8428549ca2e64dfac4625cd 2e7579bec9159d1fc6990ceb22eaa5c9 45a2772a6b6107b401db3c9b82c049c2你的爱好: 54bdf357c58b8a65c66d7c19c8e4d114 d2976ba1ac997526f88ca4e8bb4de440 324f1eadb8049e4556029b2df5569ab8男 8c1ecd4bb896b2264e0711597d40766c 38c2d0814907870c5477634d311cab34 06d4777128dbae66d7c8374e8209e12c女 8c1ecd4bb896b2264e0711597d40766c c1a436a314ed609750bd7c7d319db4dagender: {{gender}}2e9b454fa8428549ca2e64dfac4625cd c0feb29bddb0804b1ad0c220ac78d6cb 45a2772a6b6107b401db3c9b82c049c2喜欢的水果: 54bdf357c58b8a65c66d7c19c8e4d114 5fd9cad7608ad243b072348dcee2c27a 54ecce23d4044a0a00d42c566ab225fc苹果4afa15d3069109ac30911f04c56f3338 f1f360e761fd66cc9146e16d2dba497d橘子4afa15d3069109ac30911f04c56f3338 9541c26b2f7167e51c5d3255ce884852香蕉4afa15d3069109ac30911f04c56f3338 18bb6ffaf0152bbe49cd8a3620346341 c1a436a314ed609750bd7c7d319db4dafruit: {{fruit}}2e9b454fa8428549ca2e64dfac4625cd 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a const App = { template: '#my-app', data() { return { intro: "Hello World", isAgree: false, hobbies: ["basketball"], gender: "", fruit: "orange" } }, methods: { commitForm() { axios } } } Vue.createApp(App).mount('#app'); 2cacc6d41bbb37262a98f745aa00fbf0
v-model修饰符的使用
b2afd68918e546cb374a1c24691a872e 7e5b3c60f3664e2ee2a2a24a62fece7f 717719c49b690bb8eece2adabbfc0874 --> 6faceceeebaa105666e801ff935b2463 4888658be233bad65a521f436889bd53 c1a436a314ed609750bd7c7d319db4da{{message}}2e9b454fa8428549ca2e64dfac4625cd 350b7f834ee29bdbd49965c582390625查看类型65281c5ac262bf6d81768915a4a77ac0 --> bd573358cd5fb5aafd63b7aab8099bbb fc0814da98ce60da4c3d680dda8e296c 990bd121baec33b5e8d85431a647259e查看结果65281c5ac262bf6d81768915a4a77ac0 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a const App = { template: '#my-app', data() { return { message: "Hello World" } }, methods: { showType() { console.log(this.message, typeof this.message); }, showResult() { console.log(this.message); } } } Vue.createApp(App).mount('#app'); 2cacc6d41bbb37262a98f745aa00fbf0
说明: 基于原始数据多次渲染元素或模板块。
详细描述:
指令值必须使用特殊语法 alias in expression
为正在迭代的元素提供一个别名:
f4ef030d0839de37c4e1ef433c4b6394 {{ item.text }} 16b28748ea4df4d9c2150843fecfba68
或者,你也可以为索引指定别名 (如果用在对象,则是键值):
b28e4f7e2b4fedfa35a2eaa3176d8cd316b28748ea4df4d9c2150843fecfba68 598c7327e4dc26847bb4509c91af0aa416b28748ea4df4d9c2150843fecfba68 260bea15910fd895025eea6060c2eab716b28748ea4df4d9c2150843fecfba68
v-for
的默认方式是尝试就地更新元素而不移动它们。要强制其重新排序元素,你需要用特殊 attribute key
来提供一个排序提示:
eabb038d2c6348808dc15a73bdd3a89d {{ item.text }} 16b28748ea4df4d9c2150843fecfba68
说明: 用于声明具名插槽或是期望接收 props 的作用域插槽。
缩写: #
参数:插槽名 (可选,默认是 default
)
仅限:
d477f9ce7bf77f53fbcf36bec1b69b7a
示例
ce4ce005a24c94d9b4e4a39d8a2161ed 71322b3c7af6c94f1e1c4e5773dff577 f7c768329f9d5fe8ef837b28f9460d0e Header content 21c97d3a051048b8e55e3c8f199a54b2 81369fca6737871db11e27c64116e975 Default slot content 21c97d3a051048b8e55e3c8f199a54b2 1e7c531a57ab34112c70be1a88387e8c Footer content 21c97d3a051048b8e55e3c8f199a54b2 a7404faa8989ab176c7e812b70808e66 95dbf192020177187dadd953add4f076 d47f14ce98f36419e01ddc5846584a21 d2d61fc03a199e5255b5f1fb9f3f316d 3756e8adbda7e9b943a61c26f2df1b54 {{ slotProps.item.text }} 16b28748ea4df4d9c2150843fecfba68 21c97d3a051048b8e55e3c8f199a54b2 837cb83ad017825a5f5808eec3f248e2 2e3cf59cf3584e31af52dd69e5425d1d 0990bbde804d14766ed5eb832feb391f Mouse position: {{ x }}, {{ y }} 757fecbcf4645dae34ff02ec40f70f05
说明: 更新元素的文本内容。
详细描述: v-text
通过设置元素的 textContent 属性来工作,因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent
的部分,应该使用 mustache interpolations 代替。
0190816bd21822f3607e1482b4d1fa3b54bdf357c58b8a65c66d7c19c8e4d114 00f8dc646c4be2c5217d920298ae1cb1 45a2772a6b6107b401db3c9b82c049c2{{msg}}54bdf357c58b8a65c66d7c19c8e4d114
说明: 更新元素的 innerHTML。
详细描述: v-html
的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 v-html
来编写模板,不如重新想想怎么使用组件来代替。
安全说明: 在你的站点上动态渲染任意的 HTML 是非常危险的,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要将用户提供的内容作为插值
820ce39ab3aad7aa68f07baa11715ad416b28748ea4df4d9c2150843fecfba68
说明: 跳过该元素及其所有子元素的编译。
详细描述:元素内具有 v-pre
,所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。
2e24149472e5bc58f1ceee49a8c9a583{{ this will not be compiled }}54bdf357c58b8a65c66d7c19c8e4d114
说明: 跳过该元素及其所有子元素的编译。
详细描述: 在随后的重新渲染,元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。
7e8efa3dbcf3fdb345a6412f8702406a 3f25dda40764ecd0ef903ae07954a188This will never change: {{msg}}54bdf357c58b8a65c66d7c19c8e4d114 e2653ecc49c1e70eebe3f42f2ed64d40 8e8069d201fc869e0b021ec4eee7a32c 4a249f0d628e2318394fd9b75b4636b1comment473f0a7621bec819994bb5020d29372a e388a4556c0f65e1904146cc1a846bee{{msg}}94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 dfe8352334aba3b8aa96d56356ef33cf bd44626675a18da8612637c251a4c1b0 5035b2b6fe29a3799ffa1054970076c4 ff6d136ddc5fdfeffaf53ff6ee95f185 9c24683ccaed9ee5bcef68d7e04aa4f4{{i}}bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
说明: 用于隐藏尚未完成编译的 DOM 模板。
详细描述:该指令只在没有构建步骤的环境下需要使用。
v-cloak
会保留在所绑定的元素上,直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none }
这样的 CSS 规则,它可以在组件编译完毕前隐藏原始模板。[v-cloak] { display: none; }
611840a88c56f105f2b2c201defa5862 {{ message }} 16b28748ea4df4d9c2150843fecfba68
更多编程相关知识,请访问:编程入门!!
以上是一文聊聊Vue中常用的內建指令【大全】的詳細內容。更多資訊請關注PHP中文網其他相關文章!