vue.js快速上手笔记（一）

1，数据绑定

<div id="app">
        <input type="text" v-model="userInfo.name" />
        <span>{{ "your name is "+ userInfo.name }}</span>
        <br />
        <span>your sex is {{ userInfo.sex == 1 ? "男" : "女" }}</span>
    </div>

<script>

    var app = new Vue({
        el: "#app",
        data: {
            userInfo: {
                name: "小明",
                sex: 0
            } 
        } 
    })
</script>

1.1效果如下： 

 2 v-for 指令的使用

<div id="app">
    <ol>
        <li v-for="item in foodList">{{ item }}</li>
    </ol>
    <ul>
        <li v-for="item in fruit">{{ item.name }}￥:{{ item.price}}</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            foodList: ["萝卜", "白菜", "黄瓜"],
            fruit: [
                { "name": "苹果", "price": "6" },
                { "name": "梨子", "price": "4.5" },
                { "name": "香蕉", "price": "3.6" },
            ]
        }
    })
</script>

 2.1效果如下：

 3. v-bind指令，绑定元素属性  

<style>
    .aClass {
        color: red;
        font-size: 20pt;
    }

    .active {
        background-color: greenyellow;
    }
</style>

<div id="app">
    <a v-bind:href="href" v-bind:class="cls">普通</a>

    <!-- v-bind时刻省略的加上冒号就可以了  -->
    <a :href="href" :class="{ active:isActive }">动态条件</a>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            href: "http://wwww.baidu.com",
            cls: "aClass", 
            isActive: true //控制条件，false 则不执行这个 active 样式
        }
    })
</script>

 3.1效果如图

 4.v-on 用来绑定事件

<div id="app">
    <!--单个事件-->
    <input type="button" value="单个事件" v-on:click="click(1)" />
    <!--多个事件-->
    <input type="button" value="多个事件" v-on="{ mouseleave:onOut,mouseenter:onEnter  }" />
    <!--表单提交 submit.prevent 阻止页面刷新  submit.stop 停止冒泡  keyup.enter键盘回车事件   -->
    <form v-on:submit.prevent="onSubmit() v-on:keyup.enter="onSubmit()">
        <!-- <form v-on:submit.prevent="onSubmit($event)">-->
        <input type="text" />
        <input type="submit" value="提交" />
    </form>
    <!-- v-on 也可用@符号代替，表示事件的指令 -->
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {},
        methods: {
            click: function (e) {
                console.log(e);
            },
            onEnter: function () {
                console.log("onEnter");
            },
            onOut: function () {
                console.log("onOut");
            },
            onSubmit: function (e) {                 
                //e.preventDefault(); //阻止页面刷新
                console.log('提交');
            }
        }
    })
</script>

 5.v-model 指令以及修饰符（lazy tirm number）

<div id="app">
    <!-- v-model.lazy 懒加载  v-model.trim 去空格 v-model.number 限定为数值 -->
    <input type="text" v-model.trim="name" />
    <!-- lazy trim number 是对v-model的修饰,number时候是输入了非数字的 -->
    <input type="text" v-model.number="price" />
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "hhh",
            price: 3.4
        },
        methods: {
        }
    })
</script>

 6.流程控制语句，v-if ，v-else-if

<div id="app">
    <div v-if=" name == 'a' || name == 'c' ">
        hi, a or c
    </div>
    <div v-else-if=" name == 'b' ">
        hi, b
    </div>
    <div v-else>
        no body
    </div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            name: "a",
        }
    })
</script>

 7. 计算属性（computed）专门处理数值计算的，为啥不用方法处理，主要是没有这个性能高

<div id="app">
    <table border="1">
        <tr><td>学科</td><td>分数</td></tr>
        <tr><td>数学</td><td><input type="text" v-model.number="math" />  </td></tr>
        <tr><td>语文</td><td><input type="text" v-model.number="chinese" /> </td></tr>
        <tr><td>英语</td><td><input type="text" v-model.number="english" /></td></tr>
        <tr><td>总分</td><td>{{ totle }}</td></tr>
        <tr><td>平均分</td><td>{{ agv }}</td></tr>
    </table>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            math: 90,
            chinese: 80,
            english: 56,
        },
        computed: {
            totle: function () {
                return this.math + this.chinese + this.english;
            },
            agv: function () {
                return Math.round(this.totle / 3);
            }
        }
    })
</script>

 先记录到这里，欢迎交流