1.Vue.js基本使用
<script src="~/Scripts/vue.min.js"></script>
<div id="app"> </div>
<script> new Vue({ el: "#app", data: { }, filters:{ }, mounted: function () { }, methods:{ }, computed: { }, components: { } })
</script>
2.事件
<script src="~/Scripts/vue.min.js"></script> <div id="app"> <form v-on:keyup.enter="onEnter" v-on:submit.prevent="onSubmit"> <input /> <button type="submit">submit</button> </form> </div> <script> var app = new Vue({ el:"#app", methods: { onEnter: function () { alert("回车了"); }, onSubmit: function () { alert("不会自动提交"); } } }) </script>
3。 model
v-model.number
v-model.trim
v-model.lazy
4.计算属性
<script src="~/Scripts/vue.min.js"></script> <div id="app"> <table> <tr> <td> 课程 </td> <td>成绩</td> </tr> <tr v-for="it in student"> <td> {{it.item}} </td> <td> <input v-model.number="it.grade" /> </td> </tr> <tr> <td>合计</td> <td>{{sum}}</td> </tr> <tr> <td>平均</td> <td>{{averge}}</td> </tr> </table> </div> <script> var app = new Vue({ el:"#app", data: { student: [ { item: "语文", grade: 44 }, { item: "英语", grade: 88 }, { item: "数学", grade: 99 }, ] }, computed: { sum: function () { return this.student[0].grade + this.student[1].grade + this.student[2].grade; }, averge: function () { return Math.round( this.sum/3) } } }) </script>
当然也可以用方法(methods),但计算属性在数据不变时缓存数据,大大减少了重新计算。推荐使用。
上面计算属性的使用了默认的 getter,其实还有 setter方法:
<div id="app"> <input v-model.number="a" /> + <input v-model.number="b" /> = <input v-model.number="sum" /> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data:{ a:3,b:4 }, computed:{ sum: { get:function(){ return this.a + this.b; }, set:function(value){ a = Math.round(value / 2); b = value - a; this.a = a; this.b = b; } } } }); </script>
5.组件
<script src="~/Scripts/vue.min.js"></script> <div id="app"> <alert></alert> </div> <script> var Alert = { template: "<button v-on:click='onclick'>alert</button>", methods: { onclick: function () { alert("alert"); } } } var app = new Vue({ el: "#app", components: { alert: Alert } }) </script>
上面是组件写在内部,如果写在外部就是全局组件,每个vue都可见。
6.组件配置
<style> .liked { background:red; } </style> <script src="~/Scripts/vue.min.js"></script> <div id="app"> <like></like> </div> <template id="mylike"> <button v-on:click="onclick" :class="{liked:!liked}">{{likenum}}</button> </template> <script> Vue.component("like", { template: "#mylike", data: function () { return { likenum: 3, liked:true } }, methods: { onclick: function () { if (this.liked) this.likenum++; else this.likenum--; this.liked = !this.liked; } } }); var app = new Vue({ el: "#app", }) </script>
7.插槽
<style> .box { 200px; border:1px solid #000; } .content { border-top: 1px solid #000; border-bottom: 1px solid #000; } .box > * { padding: 15px; } </style> <script src="~/Scripts/vue.min.js"></script> <div id="app"> <divbox> <div slot="content">内容.......</div> <div slot="title">标题</div> <div slot="footer">结尾</div> </divbox> </div> <template id="divbox"> <div class="box"> <div class="title"> <slot name="title"></slot> </div> <div class="content"> <slot name="content"></slot> </div> <div class="footer"> <slot name="footer"></slot> </div> </div> </template> <script> Vue.component("divbox", { template:"#divbox" }) new Vue({ el: "#app", }) </script>
8.filter
<script src="~/Scripts/vue.min.js"></script> <div id="app"> <input v-model.number="n" /> {{n|currency("美元")}} </div> <script> Vue.filter("currency", function (v, u) { v = v || 0; u = u || "元人民币"; return v + u; }); new Vue({ el: "#app", data: { n:10 } }) </script>
<div id="app"> <input v-model.number="n" />mm <br /> {{n|meter}} </div> <script> Vue.filter("meter", function (v) { v = v || 0; return (v / 1000).toFixed(2) + "m"; }); new Vue({ el: "#app", data: { n:10 } }) </script>
如果过滤很复杂,可以考虑写
9、右键
<div class="container" id="app"> <button v-on:contextmenu.prevent="click($event)">click</button> </div> <script> new Vue({ el: "#app", methods: { click: function (ev) { alert(ev.clientX); } } }) </script>
10、事件
阻止冒泡:v-on:click.stop
阻止默认行为:v-on:click.prevent
键盘事件:keydown,keyup,取按下那个键,可能用ev.keyCode
function(ev){
if(ev.keyCode=13){
alert("你按下回车了");
}}
简单写 v-on:keyup.enter ="show" 或 v-on:keyup.enter ="show",还有上下左右键 up down left right .
11、属性
添加样式,方法1
<style> .red{ color:red } <p :class="{red:true}">jsl</p>
方法2
<style> .red{ color:red } <p :class="[red]">jsl</p> <script> new Vue({ el:"#app", data:{ red:'red' } }) </script>
方法3json
:class="json" data:{ json:{ red:true, blue:falsle, }