我的第一篇vuejs

阿新 • • 發佈：2020-08-21

我的第一篇vuejs

一.邂逅vuejs

1.什麼是vuejs

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。

2.vuejs的特點

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

3.vuejs的安裝

官網地址

下載後引入

開發版下載地址：https://cn.vuejs.org/js/vue.js

生產版下載地址：https://cn.vuejs.org/js/vue.min.js
cdn引入
nmp安裝

$ npm install vue

二.體驗vuejs

1.我的第一個hello Vuejs

2.建立vue例項傳入的常見options

2.1.選項/資料

data

型別：Object | Function
作用：Vue例項對應的資料物件

methods

型別：{ [key: string]: Function }
作用：定義屬於Vue的一些方法，可以在其他地方呼叫，也可以在指令中使用

2.2.選項 / DOM

el

型別：string | Element
作用：決定之後Vue例項會管理哪個DOM

3.Vue的MVVM

View層:
檢視層
在我們前端開發中，通常就是DOM層。
主要的作用是給使用者展示各種資訊。

Model層:
資料層.
資料可能是我們固定的死資料，更多的是來自我們伺服器，從網路上請求下來的資料。
VueModel層 ;
檢視模型層
檢視模型層是View和Model溝通的橋樑。
一方面它實現了Data Binding, 也就是資料繫結，將Model的改變實時的反應到View中
另一方面它實現了DOM Listener，也就是DOM監聽，當DOM發生一些事件(點選、滾動、touch等)時，可以監聽到，並在需要的情況下改變對應的Data。

三.插值語法

mustache語法：通過{{}}將資料渲染到介面上
v-once：該指令後面不需要跟任何表示式，表示元素只渲染一次，不會跟資料的改變而改變
```
<div id="app" v-once>
    {{message}}
</div>
```
v-pre：用於跳過這個元素和它子元素的編譯過程，用於顯示原本的mustache語法
```
<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
```

v-cloak：有些情況下，我們瀏覽器可能會直接顯示出為編譯的mustache標籤，可以使用v-cloak進行“遮擋”

<div id="app">
    <h2 v-cloak>{{message}}</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    setTimeout(() => {
        let app = new Vue({
            el: "#app",
            data: {
                message: "hello",
            },
        });
    }, 1000);
</script>

v-html：會將string中的html解析出來並且進行渲染

<div id="app">
    <h2 v-html="message"></h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "<a href='www.baidu.com'>百度一下</a>",
        },
    });
</script>

v-text：接收一個string，顯示在介面上，但是會將後面的資料覆蓋，例如h2包含的那個“吧”就會被覆蓋

<div id="app">
    <h2 v-text="message">吧</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "百度一下",
        },
    });
</script>

四.v-bind

1.v-bind繫結基本屬性

v-bind:src

v-bind:href

可以根據需要改變連結或者圖片地址

<div id="app">
    <a :href="link">百度一下吧</a>
    <img :src="imgsrc" />
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            link: "www.baidu.com",
            imgsrc: "https://www.veer.com/topic/1160/",
        },
    });
</script>

2.v-bind動態繫結class

物件語法：:class = '{類名：boolean}'

陣列語法：:class = ’[類名1 , 類名2]‘

<style>
    .view {
        color: blue;
        font-size: 20px;
    }
    .view2 {
        background-color: beige;
    }
</style>

<body>
    <div id="app">
      <p :class="{view:isactive,view2:isactive}">hh</p>
      <!--物件語法，view是否起作用，取決於isactive的值-->
      <p :class="[isactive?'view2':'view']">hh</p>
      <p :class="[form1,form2]">hh</p>
      <p :class="[{view:isactive},'view2']">hh</p>
      <!-- 陣列語法，多個樣式，可以用，隔開 -->
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isactive: true,
                form1: "view",
                form2: "view2",
            },
        });
    </script>
</body>

3.v-bind動態繫結style

物件語法：
陣列語法：

<body>
    <div id="app">
        <p :style="{color:activecolor,fontSize:activefont}">hhh</p>
        <!--  物件語法，'類名 : 屬性'  -->
        <p :style="styleObject">hhh</p>
        <p :style="[styleObject]">hhh</p>
        <!--  陣列語法，多個樣式，可以用，隔開  -->
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                activecolor: "red",
                activefont: "50px",
                styleObject: {
                    color: "red",
                    fontSize: "13px",
                },
            },
        });
    </script>

五.作業

實現無序列表第一個元素固定樣式，剩下元素根據點選改變顏色

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .c {
                color: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <ul>
                <li
                    v-for="(item,index) in arr"
                    @click="changeColor(index)"
                    :class="[index==0?'c':judge(index)]"
                    >
                    <!--第一個元素固定顯示為藍色，其他元素點選會變成藍色-->
                    {{item}}
                </li>
            </ul>
        </div>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    isactive: -1,
                    arr: ["沃爾瑪", "新華都", "華潤", "大潤發", "永輝"],
                },
                methods: {
                    changeColor: function (index) {
                        this.isactive=index;//得到點選的元素的下標，為所點選的元素啟用樣式
                    },
                    judge:function(index){
                        return [this.isactive==index?'c':'']
                    }
                },
            });
        </script>
    </body>
</html>