Vue 基礎篇一

Vue框架介紹

之前大家學過HTML，CSS，JS，JQuery，Bootstrap，現在我們要學一個新的框架Vue~

Vue是一個構建數據驅動的web界面的漸進式框架。

目標是通過盡可能簡單的API實現響應式的數據綁定和組合的視圖組件。

能夠構建復雜的單頁面應用。現在我們開始認識一下Vue~

// HTML 頁面
<div id="app">
    <span>你的名字是{{name}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>

// main.js 頁面
var app = new Vue({
    el: '#app',
    data: {
        name: "Gao_Xin"
    }
});

Vue指令

Vue的指令directives很像我們所說的自定義屬性，指令是Vue模板中最常用的功能，

它帶有v-前綴，功能是當表達式改變的時候，相應的行為作用在DOM上。

<template>
<div>
  <h2>head</h2>
  <p v-text="msg"></p>
  <p v-html="html"></p>
</div>
</template>

<script>
    export default {
        name: "head",
      data(){
          return {
            msg: "消息",
            html: `<h2>插入h2標題</h2>`

          }
      }

    }
</script>

<style scoped>

</style>

// HTML頁面
<div id="app">
        <label>
            男
            <input type="checkbox" v-model="sex" value="male">
            //  <input type="radio" v-model="sex" value="male">
        </label>
        <label>
            女 
            <input type="checkbox" v-model="sex" value="female">
        </label>
        {{sex}}
</div>  

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>  

// main.js 頁面

var app = new Vue({
    el: '#app',
    data: {
        // sex: "male",
        sex: [],
    }
});

// HTML 頁面
<div id="app">
<div>
        <texteare v-model="article">
        </texteare>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>
// main.js 頁面
var app = new Vue({
    el: '#app',
    data: {
        // sex: "male",
        sex: [],
        article: "這是一段文本。。這是一段文本。。這是一段文本。。這是一段文本。。這是一段文本。。"
    }
});

// HTML頁面
<div id="app">
        <!--<select v-model="from">-->
            <!--<option value="1">單選1</option>-->
            <!--<option value="2">單選2</option>-->
        <!--</select>-->
        <!--{{from}}-->
        <select v-model="where" multiple="">
            <option value="1">多選1</option>
            <option value="2">多選2</option>
            <option value="3">多選3</option>
        </select>
        {{where}}
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>
// main.js 頁面
var app = new Vue({
    el: '#app',
    data: {
        from: null,
        where: [],
    }
});

//  需求是展示一個人的所有愛好 以及喜歡吃的食物和價格
// HTML 頁面  
<div id="app">
<div> 
        <span>你的愛好是</span>
        <ul>
            <li v-for="hobby in hobby_list">{{hobby}}</li>
        </ul>
</div>
<div>
        <span>你喜歡的食物</span>
        <ul>
            <li v-for="food in food_list">{{food.name}}: 價格￥{{food.discount ? food.price*food.discount: food.price}}</li>
        </ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>
// main.js
var app = new Vue({
    el: '#app',
    data: {
        hobby_list: ["王者毒葯","LOL","吃雞"],
        food_list: [
            {
                name: "蔥",
                price: 5,
                discount: .8,
            },
            {
                name: "姜",
                price: 8,
                // discount: .5

            }
        ],
    }
});

// 我們常常見到博客中評論回復的時候 @某某某
// 我們點擊這個用戶是能夠跳轉的  那么這個應該是個動態的
// 我們就需要給標簽屬性進行動態綁定 v-bind
// HTML頁面
<style>
        .active {
            background: red;
        }
</style>
<div id="app">
   <div>
        <!--<a v-bind:href="my_link">點我</a>-->
        <a v-bind:href="my_link" :class="{active: isActive}">點我 
 </a>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="../js/main.js"></script>
// main.js
var app = new Vue({
    el: '#app',
    data: {
        my_link: "http://baidu.com",
        isActive: true,
    }
});

// 那我們以前的事件綁定在vue中是怎么做到的呢
// HTML頁面
<div>
        <span>事件</span>
        <button v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}" v-on:click="onClick(1)">點我</button>
    </div>
    <div>
        <input type="text" v-on="{keyup: onKeyup}">
</div>
// main.js
var app = new Vue({
    el: '#app',
    data: {
        my_link: "http://baidu.com",
        isActive: true,
    },
    methods: {
        onClick: function (a) {
            alert(a)
        },
        onMouseenter: function () {
            console.log("mouse enter")
        },
        onMouseleave: function () {
            console.log("mouse leave")
        },
        onKeyup: function () {
            console.log("key up")
        }
    },
});

// 我們之前寫過權限 我們現在模擬一個簡單的權限
// HTML頁面
<div>
        <div v-if="role == 'admin' || 'super_admin'">管理員你好</div>
        <div v-else-if="role == 'hr'">待查看簡歷列表</div>
        <div v-else> 沒有權限</div>
</div>
// main.js 頁面
var app = new Vue({
    el: '#app',
    data: {
        role: 'admin',
       // role: 'hr',
    },
});

// 現在我們要實現一個功能 點擊一個按鈕顯示文本 再點擊取消
// 這種顯示和隱藏的功能 vue也幫我們進行了封裝
// HTML頁面
<div id="app">
    <button @click="on_click()">
        點我
    </button>
    <p v-show="show">提示文本</p>
</div>
// main.js 頁面
var app = new Vue({
    el: '#app',
    data: {
        show: false,
    },
    methods: {
        on_click: function () {
            this.show = !this.show
        }
    }

});

//  我們現在要獲取用戶的注冊信息
//  用戶名以及手機號 用指令修飾符能夠讓我們更加便捷
// HTML 頁面
<div>
    用戶名: <input type="text" v-model.lazy.trim="username"><br>
    {{username}}
    手機號: <input type="text" v-model.number="phone"><br>
    {{phone}}
</div>
// main.js 頁面
var app = new Vue({
    el: '#app',
    data: {
        username: "",
        phone: "",
    },
});

// 我們現在有個需求 點擊元素 讓這個元素在瀏覽器窗口釘住
// 我們只需自定義一個指令，只要給元素綁定指令就可以
// HTML頁面
<style>
        .card {
            border: solid 3px red;
            width: 200px;
            height: 100px;
            background: #eeeeee;
            margin-bottom: 5px;
        }
</style>
<div id="app">
 <div class="card" v-pin:true.bottom.right="pinned">
        <button @click="pinned = !pinned">盯住/取消</button>
        這是一個盒子文本內容
    </div>
    <div class="card">
        這是一個盒子文本內容
    </div>
    <div class="card">
        這是一個盒子文本內容
    </div>
    <div class="card">
        這是一個盒子文本內容
    </div>
    <div class="card">
        這是一個盒子文本內容
    </div>
    <div class="card">
        這是一個盒子文本內容
    </div>
    <div class="card">
        這是一個盒子文本內容
    </div>
</div>
// main.js 頁面
Vue.directive('pin', function (el, binding) {
    var binded = binding.value;
    var position = binding.modifiers;
    var warning = binding.arg;
    console.log(position)
    if(binded){
        el.style.position = 'fixed';
        for(var key in position){
            if (position[key]){
                el.style[key] = '20px';
            }
        }
        if (warning === 'true'){
            el.style.background = '#666'
        }

    }
    else {
        el.style.position = 'static';
        el.style.background = "#eeeeee"
    }
});
new Vue({
    el: '#app',
    data: {
        pinned: false,
    }
});

Vue獲取DOM元素

    <style>
        .box {
            width: 200px;
            height: 200px;
            border: solid 1px red;
        }
    </style>

</head>
<body>
<div id="app">
    <div  class="box" ref="my_box">
        這是一個盒子
    </div>
</div>

<script>
    const app = new Vue({
        el: "#app",
        mounted(){
            this.$refs.my_box.style.color = "red";
        }
    })
</script>

</body>

Vue計算屬性

我們的模板表達式非常的便利，但是邏輯復雜的時候，模板會難以維護，vue提供了計算屬性。

我們用方法也能達到效果，那么我們為什么要用計算屬性呢~

其實在vue中方法和計算屬性達到的效果是一樣的，但是計算屬性是基於依賴進行緩存的，

只有依賴的數據發生改變的時候，才會重新執行計算屬性的函數，每次調用都會從緩存中拿之前算好的數據。

而方法是每調用一次，執行一次。

// 現在我們有一個成績的表格 來計算總分和平均分
// HTML頁面
<div id="app">
    <table border="1">
        <thead>
            <th>學科</th>
            <th>分數</th>
        </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="physics"></td>
            </tr>
            <tr>
                <td>英語</td>
               <td><input type="text" v-model.number="english"></td>
            </tr>
            <tr>
                <td>總分</td>
               <!--<td>{{math+physics+english}}</td>-->
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
               <!--<td>{{Math.round((math+physics+english)/3)}}</td>-->
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>
</div>
// js 頁面
var app = new Vue({
    el: '#app',
    data: {
        math: 90,
        physics:88,
        english: 78,
    },
    computed: {
        sum: function () {
            var total = this.math + this.physics + this.english
            return total
        },
        average: function () {
            var average_num = Math.round(this.sum/3)
            return average_num
        }
    }
});

 

Vue過濾器

過濾器是在數據到達用戶的最后一步進行簡單的過濾處理，復雜的還是要用計算屬性或者方法。

// 我們兩個需求 一個是價格展示后面自動加“元”
//  單位 毫米和米的轉換
// HTML頁面
<div>
        <p>價格展示</p>
        <input type="text" v-model="price">
        {{price | currency('USD')}}
</div>
<div>
        <p>換算</p>
        <input type="text" v-model="meters">
        {{meters | meter}}
 </div>
// js 代碼
Vue.filter('currency', function (val, unit) {
    val = val || 0;
    var ret = val+ unit
    return ret
});

Vue.filter('meter', function (val) {
    val = val || 0;
    return (val/1000).toFixed(2) + "米"
});
new Vue({
    el: '#app',
    data: {
        price: 10,
        meters: 10,
    }
});