- Hello World 实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>helloworld</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js" ></script> </head> <body> <h1>HelloWorld</h1> <hr /> <div class="app"> {{message}} </div> <script type="text/javascript"> var app=new Vue({ el:'.app', data:{ message:'hello world!' } }) </script> </body> </html> - v-if&v-else&v-show指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-if&v-else&v-show</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>v-if&v-else&v-show</h1>
<hr />
<div class="app">
<div v-if="isLogin">
你好，您已经登录
</div>
<div v-else-if="haveName">
您好，huangxiaoguo！
</div>
<div v-else>
请登录
</div>
<div v-show="isShow">
<h3>v-if 和v-show的区别：</h3>
<p>v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。</p>
<p>v-show：调整css dispaly属性，可以使客户端操作更加流畅。</p>
</div>
</div>
<script type="text/javascript"> var app = new Vue({ el: '.app', data: { isLogin: false, haveName: false, isShow: true } }) </script>
</body>
</html>- isLogin 为true ，显示：你好，您已经登录
- isLogin: false,haveName: true, 显示：您好，huangxiaoguo！
- isLogin: false,haveName: false, 显示：请登录
-
v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。 v-show：调整css dispaly属性，可以使客户端操作更加流畅。
- v-for&排序
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-for&排序</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <h1>v-for&排序</h1> <hr /> <div class="app"> <ul> <!--让那个标签循环，写在那个标签上面--> <li v-for="item in sortItems"> {{item}} </li> </ul> <hr /> <ul> <li v-for="student in sortStudents"> {{student.name}}-{{student.age}}</li> </ul> <ul> <li v-for="(student,index) in sortStudents"> {{index}}-{{student.name}}-{{student.age}}</li> </ul> </div> <script type="text/javascript"> var app = new Vue({ el: '.app', data: { items: [45, 58, 4565, 45, 51, 5, 45, 98, 558, 47, 88], students: [{ name: 'Jsp', age: 33 }, { name: 'Pande', age: 38 }, { name: 'Panpan', age: 23 }, { name: 'King', age: 13 }, { name: 'Huang', age: 12 }, { name: 'Huangxiaoguo', age: 30 } ] }, //计算 computed: { //The computed property "items" is already defined in data. //这里是vue的保护机制，如果不重新声明会污染原来的数据源 //同时上面也要适应下面的变量 sortItems: function() { return this.items.sort(sortNumber); }, sortStudents:function(){ return sortByKey(this.students,'age'); } }, }); function sortNumber(a, b) { return a - b; }; //数组对象方法排序: function sortByKey(array, key) { return array.sort(function(a, b) { var x = a[key]; var y = b[key]; return((x < y) ? -1 : ((x > y) ? 1 : 0)); }); } </script> </body> </html>- v-text&v-html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-text&v-html</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <h1>v-text&v-html</h1> <hr /> <div class="app"> <!-- 一般项目中多使用v-text="message"， 防止js出错或者网速慢的时候出现不友好的页面 例如直接显示：{{message}} --> <span>{{message}}</span>=<span v-text="message"></span> <span>{{dodo}}</span> <!-- 这个方式一般不要使用，容易引起xss黑客攻击 --> <span v-html="dodo"></span> </div> <script type="text/javascript"> var app = new Vue({ el: '.app', data: { message: 'hello world!', dodo: '<h2>hello world</h2>' } }) </script> </body> </html>- v-on
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-on</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <h1>v-on</h1> <hr /> <div class="app"> 本场比赛得分:{{fenshu}} <p> <button v-on:click="jiafen">加分</button> <!--简写--> <button @click="jianfen">减分</button> <br /> <!-- v-model:绑定数据源 @keyup.enter:绑定键盘(@keyup.13) --> <input type="text" @keyup.enter="onEnter" v-model="fenshu2" /> </p> </div> <script type="text/javascript"> var app = new Vue({ el: '.app', data: { fenshu: 0, fenshu2: 1 }, methods: { jiafen: function() { this.fenshu++; }, jianfen: function() { this.fenshu--; }, onEnter: function() { if(this.fenshu2==''){ this.fenshu2=0; } this.fenshu = this.fenshu + parseInt(this.fenshu2); } } }) </script> </body> </html>- v-model双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-model双向数据绑定</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <h1>v-model双向数据绑定</h1> <hr /> <div class="app"> <p>元素数据：{{message}}</p> <h3>文本框</h3> <br /> <p>v-model ：<input type="text" v-model="message" /></p> <!-- 鼠标离开才有效果 --> <p>v-model.lazy：<input type="text" v-model.lazy='message' /></p> <!-- 先输入数字，后输入其他的时候，默认只能输入数字，其他的无效 --> <p>v-model.number：<input type="text" v-model.number='message' /></p> <!-- 去空格 --> <p>v-model.trim：<input type="text" v-model.trim='message' /></p> <hr /> <h3>文本域</h3> <textarea rows="2" cols="50" v-model="message"></textarea> <hr /> <h3>多选框绑定一个值</h3> <input type="checkbox" id="isTrue" v-model="isTrue" /> <label for="isTrue">{{isTrue}}</label> <hr /> <h3>多选框绑定数组</h3> <p> <input type="checkbox" id="huang" value="huang" v-model="web_names" /> <label for="huang">huang</label> <input type="checkbox" id="xiao" value="xiao" v-model="web_names" /> <label for="xiao">xiao</label> <input type="checkbox" id="guo" value="guo" v-model="web_names" /> <label for="guo">guo</label> </p> <p>{{web_names}}</p> <h3>单选框绑定</h3> <p> <input type="radio" id="one" value="男" v-model="sex" /> <label for="one">男</label> <input type="radio" id="two" value="女" v-model="sex" /> <label for="two">女</label> </p> <p>你选择的性别是：{{sex}}</p> </div> <script type="text/javascript"> var app = new Vue({ el: '.app', data: { message: 'hello world!', isTrue: true, web_names: [], sex: '男' } }) </script> </body> </html>- v-bind
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-bind</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js"></script> <style type="text/css"> .classA { color: red; } .classB { font-size: 150%; } </style> </head> <body> <h1>v-bind</h1> <hr /> <div class="app"> <p><img v-bind:src="imgSrc" width="200px" /></p> <!-- 完整语法 <a v-bind:href="url"></a> 缩写 <a :href="url"></a> --> <p> <a :href="webUrl" target="_blank">晓果博客</a> </p> <hr /> <div :class="className">1、绑定Class</div> <div :class="{classA:isOK}">2、绑定Class中的判断</div> <div :class="[classA,classB]">3、绑定Class中的数组</div> <div :class="isOK?classA:classB">4、绑定Class中的三元运算符</div> <hr /> <div> <input type="checkbox" id="isOK" v-model="isOK" /> <label for="isOK">isOK={{isOK}}</label> </div> <hr /> <div :style="{color: red , fontSize:font}">5、绑定Style</div> <div :style="styleObject">6、绑定Style 对象</div> </div> <script type="text/javascript"> var app = new Vue({ el: '.app', data: { imgSrc: 'http://jspang.com/wp-content/uploads/2017/02/vue01-2.jpg', webUrl: 'https://blog.csdn.net/huangxiaoguo1', className: 'classA', isOK: true, classA: 'classA', classB: 'classB', red: 'red', font: '20px', styleObject:{ color:'green', fontSize:'24px' } } }) </script> </body> </html>- v-pre&v-cloak&v-once
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-pre&v-cloak&v-once </title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script type="text/javascript" src="../js/vue.js" ></script> </head> <body> <h1>v-pre&v-cloak&v-once </h1> <hr /> <div class="app"> <!-- v-pre 原样输出 --> <div v-pre>{{message}}</div> <hr /> <div v-cloak>页面渲染完成后，才显示</div> <hr /> <!-- v-once:只在第一次进行渲染，之后DOM在进行变化，不渲染了 --> <div v-once>{{message}}</div> <div><input type="text" v-model="message" /></div> <div>{{message}}</div> </div> <script type="text/javascript"> var app=new Vue({ el:'.app', data:{ message:'hello world!' } }) </script> </body> </html>