前端框架之vue初步學習

本文轉載自查看原文 2019-10-02 18:24 669

Vue.js介紹：

Vue.js是一個構建數據驅動的web界面的漸進式框架。Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合。

MVVM模式

　　MVVM是Model-View-ViewModel的簡寫。它本質上就是Mvc的改進版。mvvm就是將其中的view的狀態和行為抽象化，讓我們將視圖ui和業務邏輯分開

　　mvvm模式和mvc模式一樣，主要目的是分開視圖和模型

　　vue.js是一個提供了mvvm風格的雙向數據綁定的javascript庫，專注於view層。它的核心是mvvm中vm。也就是viewmodel。viewmodel負責連接view和model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更高效、便捷。

插值表達式

數據綁定最常見的形式就是使用 “Mustache” 語法（雙大括號）的文本插值：

<span>Message: {{ msg }}</span>

Mustache 標簽將會被替代為對應數據對象上 msg 屬性的值。無論何時，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。

通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定：

<span v-once>This will never change: {{ msg }}</span>

這些表達式會在Vue實例的數據作用下作為javascript被解析。有個限制就是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

　　<!-這是語句，不是表達式->

　　 {{if(ok){return message} }}

插值表達式不能用於html標簽的屬性取值

v-on

可以用v-on指令監聽dom事件，並在觸發時運行一些javascript代碼

v-on:click

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
        <div id="app">
            {{message}}
            <button v-on:click="fun1()">vue的onclick</button>

        </div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"hello vue!"
        },
        methods:{
            fun1:function () {
                alert("hello");

            }
        }
    });
</script>
</html>

vue的v-on鼠標移動事件和阻止事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        #div{
            background-color: red ;
            width: 200px;
            height: 200px;
        }
    </style>
    <script src="js/vue.min.js"></script>

</head>
<body>
    <div id="app">
        //@事件名稱 就是 v-on:事件的簡寫方式。
        <div @mouseover="fun1" div="div">
             <textarea v-on:mouseover="fun2($event)">這是一個文本域</textarea>
        </div>
        <div onmouseover="divmouseover()" id="div">
            <textarea onmouseover="textareamouseover()">這是一個文件域</textarea>
        </div>
    </div>
</body>
    <script>
          //view  model
          new Vue({
              el:"#app",
              methods:{
                  fun1:function () {
                      alert("鼠標懸停在div上");
                  },
                  fun2:function (event) {
                      alert("鼠標懸停在textarea上");
                      event.stopPropagation();
                  }
              }
          })
        //傳統的js方式
        function divmouseover() {
            alert("鼠標移動到了div上");
        }

        function textareamouseover() {
             alert("鼠標移動到了textera上");
             event.stopPropagation();
        }
    </script>
</html>

View Code

vue中的事件修飾符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on:事件修飾符</title>
    <style>
        #div{
            background-color: red;
            height: 300px;
            width: 300px;
        }
    </style>
    <script src="js/vue.min.js"></script>
</head>
<body>
        <div id="app">
            <form  @subimit.prevent action="http://www.itheima.com" method="post" >
                <input type="submit" value="提交">
            </form>
            <hr>
            <form action="http://www.itheima.com" method="post" onsubmit="checkForm()">
                <input type="submit" value="提交">
            </form>
            <div @mouseover="fun1" id="div">
                <textarea @mouseover.stop="fun2($event)">這是一個文本域</textarea>
            </div>
        </div>
</body>
    <script >
        //Vue
        new Vue({
            el:"#app",
            methods:{
                fun1:function () {
                    alert("鼠標懸停在div上");
                },
                fun2:function (event) {
                    alert("鼠標懸停在textarea上");
                }
            }

        });
        //傳統的js范式
          function checkForm() {
              alert(1);
              //表單驗證必須有一個明確的boolean類型返回值
              //在應用驗證方法時必須加上return 方法名稱
              return false;
          }
    </script>
</html>

View Code

注：阻止表單提交

v-text和v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.min.js"></script>
    <title>v-text和v-html</title>
</head>
<body>
<div id="app">
        <div v-text="message"></div>
        <div v-html="message"></div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>

</body>
<script>
    //view model
    new Vue({
        el:"#app",
        data:{
            message:"<h1>hello</h1>"
        }
    })
    //傳統js的innertext和innerHtml
    window.onload=function () {
        document.getElementById("#div1").innerHTML="<h1>Hello</h1>";
        document.getElementById("#div2").innerText="<h1>hello</h1>";

    }
</script>

</html>

View Code

v-bind

要想給html標簽的屬性變量的值，需要使用v-bind

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <font size="5" v-bind:color="ys1" >上書房</font>
        <font size="5"  v-bind:color="ys2">南書房</font>
    </div>

</body>
    <script>
         //view model
         //插值表達式不能用於html標簽的屬性取值
         //要想給html標簽的屬性變量的值，需要使用v-bind
         //v-bind也可以簡化直接用：
        new Vue({
            el:"#app",
            data:{
                ys1:"red",
                ys2:"green",
            }
        })
    </script>
</html>

View Code

vue中的按鍵修飾符

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on:按鍵修飾符</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
         Vue:<input type="text" v-on:keydown.enter="fun1">
    </div>
</body>
    <script>
        //view model
        new Vue({
            el:"#app",
            methods: {
                fun1:function () {
                    alert("按下的是回車")
                }
            }
        })
    </script>
</html>

View Code

vue jar包地址：https://www.mvnjar.com/org.webjars.npm/vue/2.6.10/detail.html

v-for遍歷數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍歷數組</title>
    <script src="js/vue.js"></script>

</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(key,value) in product">{{key}}==={{value}}</li>
        </ul>
    </div>

</body>
        <script>

            new Vue({
                el:"#app",
                data:{
                  product:
                      {id:1,name:"筆記本電腦", price:5000  },
                }
            })
        </script>

</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for遍歷數組</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="app">
    <table border="1">
        <tr>
            <td>序號</td>
            <td>編號</td>
            <td>名稱</td>
            <td>價格</td>
        </tr>
        <tr v-for="(product,index)in products">
            <td>{{index}}</td>
            <td>{{product.id}}</td>
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
        </tr>
    </table>
</div>

</body>
<script>

    new Vue({
        el:"#app",
        data:{
            products:[
                {id:1,name:"筆記本電腦", price:5000  },
                {id:1,name:"手機", price:3000  },
                {id:1,name:"電視", price:2000  }
            ]


        }
    })
</script>

</html>

View Code

v-model的使用

從json中取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <form action="" method="post">
            用戶名：<input type="text" name="username" v-model="user.username"><br>
            密碼：<input type="text" name="password" v-model="user.password"><br>
        </form>
    </div>
</body>
    <script>
        //view model
        new Vue({
            el:"#app",
            data:{
                user:{
                    username:"test",
                    password:"123",
                }
            }
        })
    </script>
</html>

View Code

vue的生命周期

　　8個生命周期的執行點

　　4個基本的

　　4個特殊的

生命周期的解析和應用：

Vue 實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創建到銷毀的過程，就是生命周期。

beforecreate :
完成實例初始化，初始化非響應式變量
this指向創建的實例；
可以在這加個loading事件；
data computed watch methods上的方法和數據均不能訪問
created
實例創建完成
完成數據(data props computed)的初始化導入依賴項。
可訪問data computed watch methods上的方法和數據
未掛載DOM,不能訪問$el,$ref為空數組
可在這結束loading，還做一些初始化，實現函數自執行,
可以對data數據進行操作，可進行一些請求，請求不易過多，避免白屏時間太長。
若在此階段進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中
berofeMount
有了el,編譯了template|/outerHTML
能找到對應的template,並編譯成render函數
mounted
完成創建vm.$el，和雙向綁定，
完成掛載DOM 和渲染;可在mounted鈎子對掛載的dom進行操作
即有了DOM 且完成了雙向綁定可訪問DOM節點,$ref
可在這發起后端請求，拿回數據，配合路由鈎子做一些事情；
可對DOM 進行操作
beforeUpdate
數據更新之前
可在更新前訪問現有的DOM,如手動移除添加的事件監聽器；
updated :
完成虛擬DOM的重新渲染和打補丁；
組件DOM 已完成更新；
可執行依賴的dom 操作
注意：不要在此函數中操作數據，會陷入死循環的。
activated:
在使用vue-router時有時需要使用<keep-alive></keep-alive>來緩存組件狀態，這個時候created鈎子就不會被重復調用了，
如果我們的子組件需要在每次加載的時候進行某些操作，可以使用activated鈎子觸發
deactivated
for keep-alive 組件被移除時使用
beforeDestroy：
在執行app.$destroy()之前
可做一些刪除提示，如：你確認刪除XX嗎？
可用於銷毀定時器，解綁全局時間銷毀插件對象

destroyed ：

當前組件已被刪除，銷毀監聽事件 組件 事件 子實例也被銷毀
這時組件已經沒有了，你無法操作里面的任何東西了。

子父組件的生命周期
僅當子組件完成掛載后，父組件才會掛載
當子組件完成掛載后，父組件會主動執行一次beforeUpdate/updated鈎子函數（僅首次）
父子組件在data變化中是分別監控的，但是在更新props中的數據是關聯的（可實踐）
銷毀父組件時，先將子組件銷毀后才會銷毀父組件

兄弟組件的初始化（mounted之前）分開進行，掛載是從上到下依次進行
當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的

mixin中的生命周期與引入該組件的生命周期是僅僅關聯的，且mixin的生命周期優先執行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <keep-alive>
        <my-components msg="hello" v-if="show"></my-components>
    </keep-alive>
</div>
</body>
<script>
    var child = {
        template: '<div>from child: {{msg}}</div>',
        props: ['msg'],
        data: function () {
            return {
                childMsg: 'child1'
            };
        },
        deactivated: function () {
            console.log('component deactivated!');
        },
        activated: function () {
            console.log('component activated');
        }
    };
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'father',
                show: true
            };
        },
        beforeCreate: function () {
            console.group('beforeCreate 創建前狀態===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(state);
        },
        created: function () {
            console.group('created 創建完畢狀態===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(state);
        },
        beforeMount: function () {
            console.group('beforeMount 掛載前狀態===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        mounted: function () {
            console.group('mounted 掛載結束狀態===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            // this.message = 'change';
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前狀態===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
            // this.message = 'change2';
        },
        updated: function () {
            console.group('updated 更新完成狀態===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 銷毀前狀態===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        destroyed: function () {
            console.group('destroyed 銷毀完成狀態===============》');
            var state = {
                'el': this.$el,
                'data': this.$data,
                'message': this.message
            }
            console.log(this.$el);
            console.log(state);
        },
        components: {
            'my-components': child
        }
    });
</script>
</html>

View Code

vue的ajax

Vue.js 並沒有限制使用哪種方式進行 ajax 訪問，所以可以使用如下方式
1. 原生 ajax
2. JQuery
3. vue-resource
4. fetch.js
5. axios.js

axios.js

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

GET 實例
new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 請求失敗處理
        console.log(error);
      });
  }
})

View Code

菜鳥學習：

https://www.runoob.com/vue2/vue-tutorial.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端框架Vue的組件庫(UI框架)的初步認識學習前端框架【Vue.js】【Java】MyBatis框架初步學習總結前端框架Vue學習的心得記錄（基礎篇） Vue前端框架（JavaScript框架） VUE前端框架 Vue—前端框架基於vue的前端測試框架 vue前端UI框架 vue 前端框架