vue.js 01 模板语法
生活随笔
收集整理的這篇文章主要介紹了
vue.js 01 模板语法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- vue插值
- vue指令
vue插值
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body><div id="app" ><h3>插值</h3><p>{{ message }}</p>v-model 指令實現表單輸入和應用狀態之間的雙向綁定：<input v-model="message"><br/>用 v-on 指令添加一個事件監聽器：<button v-on:click="reverseMessage">反轉消息</button><hr/>文本：<span v-once>使用了v-noce指令，將不會改變: {{ msg }}</span><hr/>原始HTML：<p>Using mustaches: {{ rawHtml }}</p><p>Using v-html directive: <span v-html="rawHtml"></span></p><hr/>Attribute：<div v-bind:id="dynamicId"></div><button v-bind:disabled="isButtonDisabled">Button</button><hr/>使用JavaScript表達式：{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}</div><script>var vm = new Vue({el: '#app',data: {message: 'Hello Vue2!',msg: "hi vue",rawHtml: '<span style="color:red">This should be red.</span>',dynamicId: 'dId',isButtonDisabled: true, number: 5,ok: true,},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')}}});vm.msg = "hi......";</script></body> </html>效果：
vue指令
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body><div id="app" ><h3>指令</h3><p v-if="seen">現在看到我了</p><a v-bind:href="url">...</a><hr/><a :href="url">v-bind縮寫</a><hr/><a v-on:click="doSomething">{{message}}</a><hr/><a @click="doSomething">{{message}}v-on縮寫</a></div><script>var vm = new Vue({el: '#app',data: {message: 'hello Vue',seen: true,url: 'https://www.baidu.com',},methods: {doSomething: function(){this.message = this.message.split('').reverse().join('')}} });</script></body> </html>效果：
總結
以上是生活随笔為你收集整理的vue.js 01 模板语法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 消息称微软将于下个月推出其首款人工智能芯
- 下一篇： Vue.js基础体验（一）