VUE 基本操作

阿新 • • 發佈：2020-11-25

1、基本資料渲染和指令
1> 除了使用插值表示式{{}}進行資料渲染，也可以使用 v-bind指令，它的簡寫的形式就是一個冒號（:）

data: {
    content: '我是標題',
    message: '頁面加載於 ' + new Date().toLocaleString()
}

//方式1
<!-- v-bind指令 單向資料繫結
     這個指令一般用在標籤屬性裡面，獲取值
-->
<h1 v-bind:title="message">
    {{content}}
</h1>

//方式2
<!--簡寫方式--> 推薦使用
<h2 :title="message">
    {{content}}
</h2>

2、雙向資料繫結
雙向資料繫結和單向資料繫結：使用 v-model 進行雙向資料繫結

<body>
    <div id="app">
        <input type="text" v-bind:value="searchMap.keyWord"/>

        <!--雙向繫結-->
        <input type="text" v-model="searchMap.keyWord"/>

        <p>{{searchMap.keyWord}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: 'LeavesCai7'
                }
            }
        })
    </script>
</body>

3、事件操作
data節點中增加 result，增加 methods節點並定義 search方法
使用 v-on 進行數件處理，v-on:click 表示處理滑鼠點選事件，事件呼叫的方法定義在 vue 物件宣告的 methods 節點中

<body>
    <div id="app">
        <!--vue繫結事件-->
        <button v-on:click="search()">查詢</button>

        <!--vue繫結事件簡寫--> 推薦使用
        <button @click="search()">查詢1</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap:{
                    keyWord: 'LeavesCai7'
                },
                //查詢結果
                result: {}
            },
            methods:{//定義多個方法
                search() {
                    console.log('search....')
                },
                f1() {
                    console.log('f1...')
                }
            }
        })
    </script>
</body>

4、修飾符
修飾符 (Modifiers) 是以半形句號（.）指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。
阻止事件原本的預設行為

<!-- 修飾符用於指出一個指令應該以特殊方式繫結。
     這裡的 .prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫js的 event.preventDefault()：
     即阻止表單提交的預設行為 -->
<body>
    <div id="app">
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.username"/>
            <button type="submit">儲存</button>
        </form>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:{}
            },
            methods:{
                onSubmit() {
                    if (this.user.username) {
                        console.log('提交表單')
                    } else {
                        alert('請輸入使用者名稱')
                    }
                }
            }
        })
    </script>
</body>

5、條件渲染重點

<body>
    <div id="app">
        <input type="checkbox" v-model="ok"/>是否同意
        <!--條件指令 v-if  v-else -->
        <h1 v-if="ok">LeavesCai7</h1>
        <h1 v-else>CaiLeaves7</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

6、列表渲染重點最常用

<body>
    <div id="app">
        <ul>
            <li v-for="n in 10"> {{n}} </li>
        </ul>
        <ol>
            <li v-for="(n,index) in 10">{{n}} -- {{index}}</li>
        </ol>

        <hr/>
        <table border="1">
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [
                        { id: 1, username: 'helen', age: 18 },
                        { id: 2, username: 'peter', age: 28 },
                        { id: 3, username: 'andy', age: 38 }
                    ]
            }
        })
    </script>
</body>

全域性元件
定義全域性元件：components/Navbar.js

// 定義全域性元件
Vue.component('Navbar', {
    template: '<ul><li>首頁</li><li>學員管理</li><li>講師管理</li></ul>'
})

<script src="components/Navbar.js"></script>

生命週期

<body>
    <div id="app">
           hello
           
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
            },
            created() {
                debugger
                //在頁面渲染之前執行
                console.log('created....')
            },
            mounted() {
                debugger
                //在頁面渲染之後執行
                console.log('mounted....')
            }
        })
    </script>
</body>

路由

<!-- 必須順序引入 -->
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<body>
    <div id="app">
            <h1>Hello App!</h1>
            <p>
                <!-- 使用 router-link 元件來導航. -->
                <!-- 通過傳入 `to` 屬性指定連結. -->
                <!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
                <router-link to="/">首頁</router-link>
                <router-link to="/student">會員管理</router-link>
                <router-link to="/teacher">講師管理</router-link>
            </p>
            <!-- 路由出口 -->
            <!-- 路由匹配到的元件將渲染在這裡 -->
            <router-view></router-view>
    </div>

    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>

    <script>
            // 1. 定義（路由）元件。
    // 可以從其他檔案 import 進來
    const Welcome = { template: '<div>歡迎</div>' }
    const Student = { template: '<div>student list</div>' }
    const Teacher = { template: '<div>teacher list</div>' }

    // 2. 定義路由
    // 每個路由應該對映一個元件。
    const routes = [
        { path: '/', redirect: '/welcome' }, //設定預設指向的路徑
        { path: '/welcome', component: Welcome },
        { path: '/student', component: Student },
        { path: '/teacher', component: Teacher }
    ]

    // 3. 建立 router 例項，然後傳 `routes` 配置
    const router = new VueRouter({
        routes // （縮寫）相當於 routes: routes
    })

    // 4. 建立和掛載根例項。
    // 從而讓整個應用都有路由功能
    const app = new Vue({
        el: '#app',
        router
    })
    </script>
</body>