Vue 初级入门代码示例（vue简单代码）
基本表达式语法
<head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.min.js"></script></head><div id="app"> <!--简单表达式 [类型一样直接加]=25--> <h1>{{5 5}}</h1> <!-- :运算，字符串连接 【类型不一样就是拼接】=5v5,55--> <h1>{{5 "v5"}}</h1> <h1>{{5 "5"}}</h1> <!-- -：减法 "5"-"5" 两个双引号 自动解析【类型一样直接算】=0,25--> <h1>{{"5"-"5"}}</h1> <h1>{{5*5}}</h1> <!-- *:乘 【一样类型一样直接乘】=25--> <h1>{{"5"*"5"}}</h1> <!-- / 除 【不说了一样】=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> <!--长度--> {{message.length}}<br> <!--截取根据下标--> {{message.substring(0,3)}} <!--根据下标从哪里开始 【3456】--> {{message.substring(2).toUpperCase()}}<br> <!--获取到下标 【3】--> {{message.charAt(2)}} </div></body><script> var app = new Vue({ el:"#app", data:{ message:"123456" } });</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"> <!--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转成字符串了--> {{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>
数组操作
<!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> <!--解析标签 会自动解析标签--> <span v-html="msg"></span></div></body><script> new Vue({ el:"#app", data:{ msg:"<h3>你好！中国</h3>" } })</script>
v-for 循环
<!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"> <!--就是直接循环--> <ul> <li v-for="a in woman">{{a}}</li> </ul> <!--循环a和下标index--> <ul> <li v-for="(a,index) in woman">{{a}}---{{index}}</li> </ul> <!--搞一个表--> <table border="1px black"> <!--表头--> <tr> <th>名字</th> <th>年龄</th> </tr> <!--循环里面的东西--> <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:下标 --> <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=""> <!--新版 可以实现绑定，这样就能写活了--> <img v-bind:src="src" v-bind:title="sss"> <!--title就是鼠标提示--> <img :src="src" v-bind:title="sss"> </div></body><script> new Vue({ el:"#app", data:{ //下面的值现在是写死，以后从后台获取。 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><!--这个都是一些双向绑定的案例，不好解释，太麻烦了！需要的时候代码考过去自己一看就明白了了--><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数组包含了当前value值 就会默认选中--> 打篮球:<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> 个人简介:<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>
