Vuejs学习笔记

jiezi

6 年前

Vue.js 学习笔记

绑定属性，代码：

v-bind:href
v-bind:src
v-bind:class

var app3 = new Vue({
    el: '#app3',
    data: {
        target_location: 'https://baidu.com',
        target_name: '百度一下',
        img_location: '../img/bing-0615.jpeg',
        isActive: true
    }
});

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind 的使用 </title>
    <style>
        .active {background-color: #00b3ee;}
    </style>
</head>
<body>

<div id="app3">
    跳转到 <a v-bind:href="target_location" target="_blank">{{target_name}}</a><br>
    <a :class="{active: isActive}">Click me!</a>
    图片：<img alt="沙丘上的日落" v-bind:src="img_location"/>
</div>

<script src="../lib/vue.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

绑定动作：代码

v-on.prevent

var app4 = new Vue({
    el: '#app4',
    data: {},
    methods: {onEnter: function () {console.log("mouse enter");
        },
        onLeave: function () {console.log("mouse leave");
        },
        onSubmit: function () {console.log("已经提交！");
        }
    }
});

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on 的使用 </title>
</head>
<body>

<div id="app4">

    <form @keyup.enter="onEnter" v-on:submit.prevent="onSubmit">
        <!-- prevent：抑制默认行为 -->
        <input type="text"/>
        <button type="submit"> 提交 </button>
    </form>

    <button v-on="{mouseenter: onEnter, mouseleave: onLeave}"> 测试按钮 </button>
</div>

<script src="../lib/vue.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

绑定数据：

v-model.trim
v-model.number
v-model.lazy
input
select
textarea

var app5 = new Vue({
    el: '#app5',
    data: {
        name: 'wang',
        price: 22,
        sex: 'M',
        hobby: [],
        from:1
    }
});

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model 的使用 </title>
</head>
<body>

<div id="app5">
    <input type="text" v-model.trim="name"><br>
    <pre>{{name}}</pre>
    <span>{{name}}</span>

    <input type="text" v-model.number="price"><br>
    <span>{{price}}</span>

    男
    <input v-model="sex" value="F" type="radio">
    女
    <input v-model="sex" value="M" type="radio">\
    {{sex}}

    男
    <input v-model="hobby" value="F" type="checkbox">
    女
    <input v-model="hobby" value="M" type="checkbox">\
    {{hobby}}

    <br>

    <textarea></textarea>

    <select v-model="from" multiple>
        <option value="1"> 第一 </option>
        <option value="2"> 第二 </option>
    </select>
    {{from}}
</div>

<script src="../lib/vue.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

》》》Vue.js 表单输入绑定

v-if
v-else-if
v-else
computed

var app7 = new Vue({
    el: '#app7',
    data: {
        role: 'hr-min',
        math: 90,
        Chinese: 100,
        English: 80,
    },
    computed: {sum: function () {return this.math + this.Chinese + this.English;},
        average: function () {return Math.round(this.sum / 3);
        }
    }
});

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js 流程控制 </title>
</head>
<body>

<div id="app7">
    <div v-if="role =='admin'">
        管理员你好！</div>
    <div v-else-if="role =='hr'|| role =='hr-min'">
        人事你好！</div>
    <div v-else>
        当前角色没有访问权限！</div>

    <br>

    <table border="1">
        <thead>
        <tr>
            <td> 学科 </td>
            <td> 成绩 </td>
        </tr>
        </thead>
        <tbody>
        <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.numer="English"></td>
        </tr>
        <tr>
            <td> 总分 </td>
            <td>{{sum}}</td>
        </tr>
        <tr>
            <td> 平均分 </td>
            <td>{{average}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="../lib/vue.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

v-bind

v-on

v-model

流程控制和计算属性