Vue.js學習筆記

時間  2019-11-09
標籤 vue.js vue 學習 筆記 欄目 JavaScript 简体版
原文   原文鏈接

Vue.js學習筆記javascript

v-bind

綁定屬性，代碼：html

  • 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

綁定動做：代碼vue

  • 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

綁定數據：java

  • 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表單輸入綁定app

流程控制和計算屬性

  • 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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程