前端框架之vue初步學習

時間  2019-11-13
標籤 前端 框架 vue 初步 學習 简体版
原文   原文鏈接

 

Vue.js介紹：

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

 

MVVM模式

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

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

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

 

 

插值表達式

 

數據綁定最多見的形式就是使用 「Mustache」 語法（雙大括號）的文本插值：java

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

Mustache 標籤將會被替代爲對應數據對象上 msg 屬性的值。不管什麼時候，綁定的數據對象上 msg 屬性發生了改變，插值處的內容都會更新。ios

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

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

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

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

　　{{var a=1}}npm

　　<!---流控制也不會生效，請使用三元表達式-->

　　 {{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 實例從建立到銷燬的過程，就是生命週期。

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

  10. 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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程