Vue 初級(jí)入門代碼示例（vue簡(jiǎn)單代碼）
基本表達(dá)式語(yǔ)法
<head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><div id="app"> <!--簡(jiǎn)單表達(dá)式 [類型一樣直接加]=25--> <h1>{{5 5}}</h1> <!-- :運(yùn)算，字符串連接 【類型不一樣就是拼接】=5v5,55--> <h1>{{5 "v5"}}</h1> <h1>{{5 "5"}}</h1> <!-- -：減法 "5"-"5" 兩個(gè)雙引號(hào) 自動(dòng)解析【類型一樣直接算】=0,25--> <h1>{{"5"-"5"}}</h1> <h1>{{5*5}}</h1> <!-- *:乘 【一樣類型一樣直接乘】=25--> <h1>{{"5"*"5"}}</h1> <!-- / 除 【不說(shuō)了一樣】=1,1--> <h1>{{5/5}}</h1> <h1>{{"5"/"5"}}</h1></div></body><script> var app = new Vue({ el:"#app"//掛載到id });</script>
三目操作
<script src="../node_modules/vue/dist/vue.min.js"></script><body> <div class="app"> {{show?"GG":"MM"}} </div></body><script> var app = new Vue({ el:".app", data:{ show:true//true就是MM，false就是GG } });</script></html>
字符串操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><body> <div id="app"> {{message}}<br> <!--長(zhǎng)度--> {{message.length}}<br> <!--截取根據(jù)下標(biāo)--> {{message.substring(0,3)}} <!--根據(jù)下標(biāo)從哪里開始 【3456】--> {{message.substring(2).toUpperCase()}}<br> <!--獲取到下標(biāo) 【3】--> {{message.charAt(2)}} </div></body><script> var app = new Vue({ el:"#app", data:{ message:"123456" } });</script></html>
對(duì)象操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><body> <div id="app"> <!--123456--> {{message}}<br> <!--{ "name": "華雄", "age": 69 }重寫toString，就變了--> {{user}}<br> <!--華雄--> {{user.name}}<br> <!--getName(){return this.name}--> {{user.getName}}<br> <!--toString(){return this.name}--> {{user.toString}}<br> <!--{"name":"華雄","age":69} --> {{JSON.stringify(user)}} <!--22 json轉(zhuǎn)成字符串了--> {{JSON.stringify(user).length}} </div></body><script> var sss={ name:"華雄", age:69, getName(){return this.name},//{ "name": "華雄", "age": 69 } //原toString---function toString() { [native code] } toString(){return this.name}//重寫toString，這樣獲取到就是華雄 } var app = new Vue({ el:"#app", data:{ message:"123456", user:sss } });</script></html>
數(shù)組操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><body> <div id="app"> {{woman}}<br> {{woman[0]}}<br> {{woman.length}}<br> {{woman.toString()}}<br> {{woman.join(" ")}} </div></body><script> var app = new Vue({ el:"#app", data:{ woman:["黃月英","蔡文姬","孫尚香","甄宓"] } });</script></html>
v-text 文本展示/ v-html 變大變粗
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><body><div id="app"> <!--純文本 是什么樣就展示什么--> <span v-text="msg"></span><br> <!--解析標(biāo)簽 會(huì)自動(dòng)解析標(biāo)簽--> <span v-html="msg"></span></div></body><script> new Vue({ el:"#app", data:{ msg:"<h3>你好！中國(guó)</h3>" } })</script>
v-for 循環(huán)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><body><div id="app"> <!--就是直接循環(huán)--> <ul> <li v-for="a in woman">{{a}}</li> </ul> <!--循環(huán)a和下標(biāo)index--> <ul> <li v-for="(a,index) in woman">{{a}}---{{index}}</li> </ul> <!--搞一個(gè)表--> <table border="1px black"> <!--表頭--> <tr> <th>名字</th> <th>年齡</th> </tr> <!--循環(huán)里面的東西--> <tr v-for="key in users"> <!-- aa in key aa：value值 aa,bb in key aa:value值 bb:屬性名 aa,bb,index,index aa:value值 bb:屬性名 index:下標(biāo) --> <td v-for="(aa,bb,index) in key"> {{aa}}----{{bb}}---{{index 1}} </td> </tr> </table></div></body><script> new Vue({ el:"#app", data:{ woman:["黃月英","蔡文姬","孫尚香","甄宓"], <!--List<user>--> users:[{ name:"張三", age:10 },{ name:"李四", age:20 }] } })</script>
v-bind 綁定圖片，圖片自己可以寫活
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><body> <div id="app"> <!--原版以前這么寫--> <img src="123456.JPG" title=""> <!--新版 可以實(shí)現(xiàn)綁定，這樣就能寫活了--> <img v-bind:src="src" v-bind:title="sss"> <!--title就是鼠標(biāo)提示--> <img :src="src" v-bind:title="sss"> </div></body><script> new Vue({ el:"#app", data:{ //下面的值現(xiàn)在是寫死，以后從后臺(tái)獲取。 src:"123456.JPG", sss:"手放哪呢？" } });</script></html>
v-model 綁定輸入框（雙向綁定）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><!--這個(gè)都是一些雙向綁定的案例，不好解釋，太麻煩了！需要的時(shí)候代碼考過(guò)去自己一看就明白了了--><body><div id="app"> <h3>綁定到type=text的input表單元素</h3> 姓名:<input type="text" v-model="inputValue"><br/> data中的值:{{inputValue}} <h3>綁定到type=checkbox的input表單元素</h3> <!--v-model="checkboxValue" checkboxValue數(shù)組包含了當(dāng)前value值 就會(huì)默認(rèn)選中--> 打籃球:<input type="checkbox" v-model="checkboxValue" value="打籃球"><br/> 踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/> data中的值:{{checkboxValue}} <h3>綁定到type=radio的input表單元素</h3> 男:<input type="radio" v-model="radioValue" value="男"><br/> 女:<input type="radio" v-model="radioValue" value="女"><br/> data中的值:{{radioValue}} <h3>綁定到textarea的元素</h3> 個(gè)人簡(jiǎn)介:<textarea v-model="textareaValue"></textarea><br/> data中的值:{{textareaValue}} <h3>綁定到單選的select的元素</h3> 技能:<select v-model="skills"> <option value="java">java</option> <option value="php">php</option> <option value=".net">.net</option></select><br/> data中的值:{{skills}}</div></body><script> var vue = new Vue({ el:"#app", data:{ inputValue:"輸入框的值", checkboxValue:["打籃球"], radioValue:"女", textareaValue:"文本域的值", skills:"php" } });</script></html>
v-show true 顯示 、false 不顯示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><body><div id="app"> <span v-show="show">顯示</span><br> <span v-show="hidden">不顯示</span><br> <span v-show="score<60">小于60分顯示</span><br> <span v-show="score>60">大于60分顯示</span></div></body><script> var app = new Vue({ el:"#app", data:{ show:true, hidden:false, score:59 } });</script></html>
v-if v-else v-else-if
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><body><div id="app"> <!--true--> <spen v-if="show">沙沙沙</spen> <spen v-else-if="show">啊啊啊</spen> <!--true--> <spen v-if="hidden">嘖嘖嘖</spen> <!--false--> <spen v-else="hidden">呦呦呦</spen> </div></body><script> new Vue({ el:"#app", data:{ show:true, hidden:true } });</script></html>
