Vue.js学习

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,

}