Vue簡單的使用

上善若水的傻子發表於2020-10-09
Vue

Vue簡單的使用

1、概念

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

在建立的vue中，初始化一個npm管理的專案npm init -y 在安裝其他的包npm install vue

2、簡單使用（單向繫結）

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

3、插值表示式：

{{…}}寫在標籤體裡，動態顯示

  • 支援JS語法，可呼叫JS的內建函式（必須有返回值）

  • 可以直接獲取vue例項中定義的資料或函式

    <div>
	{{name}}
</div>

4、雙向繫結

v-model:雙向繫結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        學會了什麼：<br>
        <input type="checkbox" v-model='language' value="Java">java<br/>
        <input type="checkbox" v-model='language' value="Html">Html<br/>
        <input type="checkbox" v-model='language' value="Javascript">Javascript<br/>
        選中了{{language.join(',')}}
    </div>
    <script src="./vue/dist/vue.js"></script>

    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                language:[]
            }
        })

    </script>
</body>
</html>

5、事件繫結 v-on

v-on:click/keyup等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!--事件中直接寫js片段-->
        <button v-on:click="num++">點贊</button>
        <!--事件指定一個回撥函式，必須是Vue例項中定義的函式-->
        <button @click="cancle">取消</button>
        <!--  -->
        <h1>有{{num}}個贊</h1>

    <!-- 事件修飾符 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px;" @click.prevent="hello">
                小div <br />
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>

    <!-- 按鍵修飾符 -->
        <input type="text" v-model='num' v-on:keyup.up='num+=2' @keyup.down='num-=5' @keyup.ctrl=''>
    </div>

    <script src="./vue/dist/vue.js"></script>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods: {
                hello(){
                    alert("點選了這個div")
                }
            }
        });
    </script>
</body>
</html>

6、迴圈判斷，監聽器，區域性過濾器和全域性過濾器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(user,index) in users " :key='user.name'>
                當前索引：{{index}}---{{user.name}}---{{user.gender}}---{{user.age}}<br />
                物件的資訊：
                <span v-for="(k,v) in user">{{v}}:{{k}}---</span>
            </li>
        </ul>

        <button v-on:click="show=!show">點選我</button>
        <h2 v-if='show'>if顯示</h2>
        <h2 v-show='show'>show顯示</h2>

        <hr />
        <button v-on:click='random=Math.random()'>點選我顯示一個隨機數</button>
        <span>{{random}}</span>

        <h2 v-if='random>=0.7'>看到我了 &gt;=0.75</h2>
        <h2 v-if='random>0.5'>看到我了 &gt;=0.5</h2>
        <h2 v-else-if='random>=0.4'>看到我了 &gt;=0.4</h2>
        <h2 v-else-if='random>0.1'>看到我了 &gt;=0.1</h2>
        <hr />

        <ul>
            <li>math book: price：{{mathPrice}}，num：<input type="number" v-model="mathNum"></li>
            <li>yu book: price:{{yuPrice}},num:<input type="number" v-model="yuNum"></li>
            <li>TotalPrice:{{totalPrice}}</li>
            {{message}}
        </ul>

        <ul>
            <li v-for="user in userList">
                {{user.id}}----{{user.name}}----{{user.gender==1?'男':'女'}}----{{user.gender |genderFiletr}}----{{user.gender | gFilter}}
            </li>
        </ul>

    </div>

    <script src="./vue/dist/vue.js"></script>

    <script>

        // 全域性過濾器
        Vue.filter('gFilter', function (val) {
            if (val == 1) {
                return "男";
            } else {
                return "女";
            }
        })
        let app = new Vue({
            el: "#app",
            data: {
                show: true,
                random: '',
                mathPrice: 40,
                mathNum: 1,
                yuPrice: 20,
                yuNum: 2,
                message: '',
                users: [{ name: 'aaa', gender: 'male', age: 11 },
                { name: 'bbb', gender: 'male', age: 23 },
                { name: 'ccc', gender: 'famale', age: 45 },
                { name: 'ddd', gender: 'male', age: 13 },
                { name: 'eee', gender: 'male', age: 25 },],
                userList: [{ id: 1, name: 'aaa', gender: 1 },
                { id: 2, name: 'ccc', gender: 0 }]
            },
            // 計算
            computed: {
                totalPrice() {
                    return this.mathPrice * this.mathNum + this.yuPrice * this.yuNum
                }

            },
            // 監聽器
            watch: {
                mathNum(newVal, oldVal) {
                    // alert("newVal" + newVal + "---->oldVal" + oldVal);
                    if (newVal >= 3) {
                        this.message = "超過範圍";
                        this.mathNum = 3;
                    } else {
                        this.message = "";
                    }

                }
            },

            // 區域性過濾器
            filters: {
                genderFiletr(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>

</html>

7、元件化：區域性宣告和全域性宣告

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <div id="app">
        <button @click='count++'>我被點選了{{count}}次</button>

        <!-- <counter></counter>
        <counter></counter>
        <counter></counter>
        <counter2></counter2>
        <testCount></testCount>
        <count111></count111> -->
        <!-- <count111-p></count111-p> -->
        <!-- // 全域性宣告的 -->
        <count111P></count111P>

        <!-- //區域性宣告的 -->
        <button-count></button-count>
        
    </div>


    <script src="./vue/dist/vue.js"></script>

    <script>
        //全域性宣告註冊元件
        Vue.component("counter", {
            template: `<button v-on:click="count++">我被點選了 {{count}} 次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });

        Vue.component('count111P', {
            template: `<button v-on:click='count++'>我被點選了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });

        //區域性宣告註冊元件

        const buttonCount={
            template: `<button v-on:click="count++">我被點選了 {{count}} 次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        };
        new Vue({
            el: '#app',
            data: {
                count: 1
            },

            //區域性宣告的要把元件放到Vue例項中
            components:{
                'button-count':buttonCount
            }
        })
    </script>
</body>

</html>

相關文章