vue--先決篇

時間 2019-11-07

標籤 vue 先決简体版

原文原文鏈接

1、vue介紹：

  vue是一個漸進式Javascript框架。

　漸進式：即有一個核心庫，在須要的時候，在逐漸添加插件的一種概念。

　　（1）MVVM和MVC模式：

MVVM是Model-View-ViewModel的簡寫。即模型-視圖-視圖模型。【模型】指的是後端傳遞的數據。【視圖】指的是所看到的頁面。【視圖模型】mvvm模式的核心，它是鏈接view和model的橋樑。
它有兩個方向：一是將【模型】轉化成【視圖】，即將後端傳遞的數據轉化成所看到的頁面。實現的方式是：數據綁定。
二是將【視圖】轉化成【模型】，即將所看到的頁面轉化成後端的數據。實現的方式是：DOM 事件監聽。這兩個方向都實現的，咱們稱之爲數據的雙向綁定。
總結：在MVVM的框架下視圖和模型是不能直接通訊的。它們經過ViewModel來通訊，ViewModel一般要實現一個observer觀察者，
當數據發生變化，ViewModel可以監聽到數據的這種變化，而後通知到對應的視圖作自動更新，
而當用戶操做視圖，ViewModel也能監聽到視圖的變化，而後通知數據作改動，這實際上就實現了數據的雙向綁定。而且MVVM中的View 和 ViewModel能夠互相通訊。

　　　　　　　　　　　　　　　　　　MVVM實現原理圖解html

 MVC是Model-View- Controller的簡寫。即模型-視圖-控制器。M和V指的意思和MVVM中的M和V意思同樣。C即Controller指的是頁面業務邏輯。使用MVC的目的就是將M和V的代碼分離。
‘MVC是單向通訊。也就是View跟Model，必須經過Controller來承上啓下。MVC和MVVM的區別並非VM徹底取代了C，ViewModel存在目的在於抽離Controller中展現的業務邏輯

2、特色：

    易用、

　　靈活--不斷繁榮的生態系統，能夠在一個庫和一套完整框架之間自如伸縮。

　　高效--20KB min+gzip運行大小，超快的虛擬DOM，最省心的優化。

3、使用：

　　a: 直接使用script標籤引入；vue將會被註冊成一個全局變量，在開發環境下不要使用壓縮版本，

　　　否則你就失去了全部常見錯誤相關的警告!

　　b: 文本的插入，使用差值表達式插入，Vue中差值表達式，既能夠插入任何數據，也能夠插入算數運算符；{{ }}

4、指令

　　a: v-for （循環）

固然還能夠遍歷下標： <li v-for="(item，index) in attr">{{item}}--{{index}}</li> vue

　　b: v-bind （綁定元素）

　　c: v-on （事件）

　　d:事件對象（$event）

　　（1）傳e後端

<body>
    <div id="app">
        <button @click='fn'>點擊</button>  //fn 不傳遞任何參數，
    </div>
    <script src="./vue.js"></script>
    <script>
    let app=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            fn(e){
                console.log(e)   //MouseEvent {isTrusted: true, screenX: 33, screenY: 124, clientX: 33, clientY: 22, …}  打印事件對象！
            }
        }
    })
    </script>

　　（2）實參傳入數值，形參傳入e瀏覽器

  <div id="app">
        <button @click='fn(12,13)'>點擊</button>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            fn(e,b){
                console.log(e,b)   //12,13
            }
        }
    })
    </script>

　　（3）實參爲數值和 $event ------$event 表明事件對象，多個參數；app

 <div id="app">
        <button @click='fn(12,13,$event)'>點擊</button>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            fn(a,b,e){
                console.log(a,b,e)   //12 13 MouseEvent {isTrusted: true, screenX: 36, screenY: 128, clientX: 36, clientY: 25, …}
            }
        }
    })
    </script>

　　e: v-if /v-else-if /v-else （判斷）

  <div id="app">
        <div v-if='onOff'>真的我是</div>
        <div v-if='onOff'>我是不真不假</div>  //等同於v-if-else；
        <div v-else>假的我是</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:'#app',
            data:{
                onOff:true,  //若是改爲false，顯示假的是我
            },
        })
    </script>

　　f: v-show / v-hide (顯示和隱藏) 相似於原生的display：block /none；

<div id="app">
        <div v-if='onOff'>真的我是</div>
        <div v-else>假的我是</div>

            <!-- v-show和v-hide -->
        <div v-show='onOff'>我是show</div>
        <div v-show='!onOff'>我隱藏了</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:'#app',
            data:{
                onOff:true,  //若是改爲false，顯示假的是我
            },
        })
    </script>

區別於v-if和v-else ；框架

能夠清晰的看出，v-show和v-hide只是隱藏了當前的元素顯示，而v-if和v-else直接否認了元素的加載！mvvm

　　g: v-model（雙向數據綁定）----MVVM的一種語法糖

<body>
    <div id="app">
        <input type="text" v-model='num'>
        <p>{{num}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
    let app=new Vue({
        el:'#app',
        data:{
            num:0,
        }
    })
    </script>

當input的value發生變化時，p裏面的值也會隨之發生變化。

　　h:事件冒泡

<body>
    <div id="app">
        <div @click='fn1'>
            <button @click='fn'>點你妹啊</button>   //是嵌套關係哦
        </div>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '你妹的',
            },
            methods: {
                fn() {
                    alert('你妹妹的')
                },
                fn1() {
                    alert('果真能夠冒泡')
                }
            }
        })
    </script>

　　i: 阻止事件冒泡------（.stop修飾符）

<body>
    <div id="app">
        <div @click='fn1'>
            <button @click.stop='fn'>點你妹啊</button>   //只需加  .stop  修飾符便可
        </div>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '你妹的',
            },
            methods: {
                fn() {
                    alert('你妹妹的')
                },
                fn1() {
                    alert('果真能夠冒泡')
                }
            }
        })
    </script>

　　g:阻止瀏覽器以及form表單的默認行爲（.prevent修飾符）

<body>
    <div id="app">
        <form action="./index.html" method="GET">
        <input @click.prevent='submit' type="submit" value="提交">  //只需加 .prevent 修飾符便可
        </form>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '你妹的',
            },
            methods: {
               submit(){
                   alert('要想過此路，留下買路財')
               }
            }
        })
    </script>