例1 el使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script src="vue.js"></script> </head> <body> <div id="app"> <h1>当前计数器：{{counter}}</h1> <button v-on:click='add'>+</button> <button @click='sub'>-</button> </div> </body> <script> const app = new Vue({ el:'#app', data:{ counter:0 }, methods:{ add:function(){ this.counter = this.counter+3 }, sub:function(){ this.counter-- } } }) </script> </html>
例2 template使用
<body> <div id="app"> <p> 被替代 </p> </div> <script id="tpl" type="x-template"> <div class='tpl'> <p> 我来了 </p> </div> </script> <script type="text/javascript"> var vm = new Vue({ el : '#app', template : '#tpl' }); </script> </body>
例3 data使用
<body> <div id="app"> <p> {{a}} </p> <p> {{b}} </p> </div> </script> <script type="text/javascript"> var vm = new Vue({ el : '#app', data : { a : 1, b:3 } }); vm.$data.b = 2; </script> </body>
在初始化的时候，把所有的变量都设定好，如果没有值，也可以用undefined 或 null 占位。否则会报错
例4 props使用
<body> <div id="app"> <my-component title='myTitle' content='myContent'></my-component> </div> <script type="text/javascript"> var MyComponent = Vue.component('my-component', { props : ['title', 'content'], data : function() { return { desc : '123' } }, template : '<div><h1>{{title}}</h1> <p>{{content}}</p> <p>{{desc}}</p> </div>' }) var vm = new Vue({ el: '#app', data: { } }) </script> </body>
例5 过滤器
<body > <div id='app'> {{message | uppercase }} </div> </body> <script type="text/javascript"> var myVue = new Vue({ el: "#app", data: { message: "Vue" }, // 过滤器 filters:{ uppercase :function(value){ return value.toUpperCase() } } }) </script>
转化为大写
例6 Setter （价格显示）
<body > <div id='app'> ¥{{price }} </div> </body> <script type="text/javascript"> var myVue = new Vue({ el: "#app", data: { cents: 100 }, computed:{ price:{ set:function(newValue){ this.cents = newValue *100 }, get:function(){ return (this.cents/100).toFixed(2) } } } }) </script>
后台一般会保存整数，比如￥1会保存为100
此时更改 price = 2，.cents 会被更新为 200，在传递给后端时无需再手动转化一遍
例7 表单的双向数据绑定
<body > <div id='app'> <div>text： <input type='text' v-model='message'> <span>you input is:{{message}}</span> </div> <div>radio： <label><input type="radio" value="male" v-model="gender "> 男 </lable> <label><input type="radio" value="female" v-model="gender "> 女 </lable> <span>{{ gender }}</span> </div> <div> checkbox： <input type="checkbox" v-model="checked_1" /> <span>{{ checked_1 }} </span> 单个勾选框，value为布尔值，此时 input 的 value 并不影响 v-model 的值 </div> <div> checkbox多选： <label><input type="checkbox" value="1" v-model=" checked_2">1</lable> <label><input type="checkbox" value="2" v-model=" checked_2">2</lable> <label><input type="checkbox" value="3" v-model=" checked_2">3</lable> <span>{{ checked_2.join('|') }}</span> </div> <div> select： <select v-model="selected" > <option v-for='city in cities'>{{ city.text }}</option> </select> <br> <span> {{ selected }}</span> </div> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el: "#app", data: { message: '', gender : '', checked_1 : '', checked_2 : [], selected : '', cities: [ {text: '西安', value: '西安'}, {text: '洛阳', value: '洛阳'}, {text: '南京', value: '南京'}, {text: '北京', value: '北京'} ], } }) </script>
例8 样式绑定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script src="vue.js"> </script> <style> .active { width: 100px; height: 100px; background: green; } .unactive{ width: 100px; height: 100px; background: red; } </style> </head> <body > <div id='app'> <div class="tab" v-bind:class="{'active' : active , 'unactive' : !active}"> </div> </div> </body> <script type="text/javascript"> var myVue = new Vue({ el: "#app", data: { active:false } }) </script> </html>
例9 Vue-给对象新增属性
<body > <div id='app'> <div v-for="item in items"> {{item.title}} </div> </div> </body> <script type="text/javascript"> var vm = new Vue({ el: "#app", data: { items : [ { title : 'title-1', description : 'description-1'}, { title : 'title-2', description : 'description-2'}, { title : 'title-3', description : 'description-3'}, { title : 'title-4', description : 'description-4'} ] } }) </script>
Vue.set(vm.items[0], 'title', 'aa');
例10 样式的修改
v-bind:class="{active:isActive,line:isLine}"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<script src="vue.js">
</script>
<style>
.active {
100px;
height: 100px;
background: green;
}
.line{
100px;
height: 100px;
background: red;
}
</style>
</head>
<body >
<div id="app">
<h1 v-bind:class="{active:isActive,line:isLine}">{{message}}</h1>
<button v-on:click="btnClick">按钮</button>
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊',
isActive:true,
isLine:false
},
methods:{
btnClick:function(){
this.isActive=!this.isActive
}
}
})
</script>
</html>
点击按钮后
例11 样式的修改（methods形式）
<h1 v-bind:class="{active:isActive,line:isLine}">{{message}}</h1>
<h1 v-bind:class="getClasses()">{{message}}</h1>
methods:{ btnClick:function(){ this.isActive=!this.isActive }, getClasses:function(){ return {active:this.isActive,line:this.isLine} } }
效果与上面例子一致
例12 li点击选中样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script src="vue.js"> </script> <style> .active { background: #febeee; } </style> </head> <body > <div id="app"> <ul> <li v-for="(m,index) in movies" v-on:click='liClick(index)' v-bind:class="{active:currentIndex === index}"> {{m}} </li> </ul> </div> </body> <script> const app = new Vue({ el:'#app', data:{ movies:['海王','海尔兄弟','火影忍者','进击的巨人'], currentIndex :0 }, methods:{ liClick:function(index){ this.currentIndex=index }, } }) </script> </html>
