最簡單的vue入門：基礎語法學習
阿新 • • 發佈：2018-11-04
新建index.html，直接複製以下程式碼，雙擊瀏覽器執行即可。程式碼包含Vue的基礎語法，可對照練習。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門</title> <!--<script src="./vue.js"></script>--> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <h1>插值表示式</h1> <p>{{msg}}</p> <h1>v-text</h1> <p v-text="number"></p> <h1>v-html</h1> <p v-html="content"></p> <h1>事件繫結v-on:click</h1> <p><button v-on:click="handleClick">點我啊</button></p> <h1>v-on:click可簡寫為@click</h1> <p><button @click="handleClick">點我啊</button></p> <h1>面向資料程式設計，改變資料來改變DOM，不直接操作DOM</h1> <p> <div>{{oldContent}}</div><br/> <button v-on:click="handleChangeDom">點選改變DOM內容</button> </p> <h1>屬性繫結v-bind:</h1> <p title="我是一個P標籤">我是一個P標籤，使用原生title</p> <p v-bind:title="title">我是一個P標籤，使用v-bind:title</p> <p :title="title">我是一個P標籤，使用v-bind:title的簡寫:title</p> <p :title="'文字'+title">我是一個P標籤，使用v-bind:title的簡寫:title，title裡還加了文字</p> <h1>雙向資料繫結 v-model="inputValue"</h1> <input v-model="inputValue"/> <p>我跟上面的input輸入框進行了繫結，它變我也變。</p> <p><b>{{inputValue}}</b></p> <h1>計算屬性</h1> 輸入你的姓：<input v-model="firstName" placeholder="初始值姓"/><br/> 輸入你的名：<input v-model="lastName" placeholder="初始值名"/><br/> <p>你的姓名是：{{fullName}}</p> <h2>監聽器watch，監控資料變化</h2> <p>姓+名change次數總共是{{count}}</p> <h1>v-if 顯示隱藏</h1> <p v-if="isvifShow">顯示還是隱藏，這是個問題。</p> <button @click="changeStatusvif">顯示/隱藏</button> <h1>v-show 顯示隱藏</h1> <p v-show="isvshowShow">顯示還是隱藏，這是個問題。</p> <button @click="changeStatusvshow">顯示/隱藏</button> <h1>v-for 迴圈</h1> <ul> <li v-for="(item,index) of list" :key='index'>{{item}}</li> </ul> <p><br/>========================我是分割線========================<br/></p> </div> <script> new Vue({ el:"#root", //template:'<p>{{msg}}</p>', data:{ msg:"hello world", number:123, content:'<h2>我是h2標題</h2>', oldContent:'原來顯示的內容：123', title:"我是一個P標籤", inputValue:"我是初始值", firstName:'', lastName:'', count:0, isvifShow:true, isvshowShow:true, list:[111,222,333,444] }, methods:{ handleClick:function(){ alert("我被點選了！") }, handleChangeDom(){ this.oldContent='現在顯示的內容：456' }, changeStatusvif(){ this.isvifShow= !this.isvifShow }, changeStatusvshow(){ this.isvshowShow= !this.isvshowShow } }, computed:{ fullName:function(){ return this.firstName + ' '+ this.lastName } }, watch:{ firstName:function(){ this.count ++ }, lastName:function(){ this.count ++ } } }) </script> </body> </html>