java-microservice-01-vue-02-introduction
阿新 • • 發佈：2021-12-30
java-microservice-01-vue-02-introduction
Vue常見用法
先來看個完整例子：<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>advance</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <!--繫結屬性--> <div id="d1" v-bind:title="title1"> <!--普通文字渲染--> message：{{message}}<br/> <!--條件判斷--> <span v-if="showAge">年齡：1</span><br/> <!--for迴圈--> name:<span v-for="name in names"><span>{{name}}</span></span><br/> <!--v-on事件監聽--> <button v-on:click="cli">點選改變時間</button> <br/> <!--雙向繫結--> <span>{{ inp }}</span><br/> <input type="text" v-model="inp"/> <!--元件化：注意自定義名和引數避免使用大寫特殊符--> <comp v-for="name in names" v-bind:param="name"/> </div> <script> <!--定義元件--> Vue.component("comp",{ <!--入參--> props:["param"], <!--模板--> template:"<li>{{param}}</li>" }) var vm = new Vue({ <!--元件--> el: "#d1", <!--資料--> data: { message: "普通文字", title1: "提示", showAge:true, names:["張三","李四"], inp:"" }, <!--方法--> methods:{ cli:function(){ this.message = Date(); } } }) </script> </body> </html>
- 繫結屬性：
- 普通文字渲染：
- 條件判斷：
- for迴圈：
- 事件監聽：
- 雙向繫結：
- 自定義元件： 參考上述
v-bind:[attribute]=[value]{{[value]}}
v-if=[bool/condition]
v-for=[item] in [items]
v-on:[event]=[methodName]
v-model=[value]
comp元件