Vue.js的從入門到放棄進擊錄（一）

時間  2019-11-19
標籤 vue.js vue 入門 放棄 進擊 欄目 JavaScript 简体版
原文   原文鏈接

感謝咱們項目組給機會，讓我學了Vue.js，打開新世界大門。。。哈哈哈，也沒有那麼誇張，不過學下來確實以爲入門仍是蠻容易的。我大概前先後後學了有一個月的樣子，一開始只是比較急着能夠寫東西出來，後來由於分配到九月份的分享，項目組也買了vue相關的書籍，因此又進行了比較深刻的一個學習。html

====================================================嘀 哩哩 哩~========================================================vue

按照慣例，我學習過程用到的資料：node

1.vue官網：https://cn.vuejs.org/v2/guide/installation.html   （官網已經很友好了，頗有參考價值的）web

2.簡書vue的入坑教程：http://blog.csdn.net/sinat_17775997/article/details/77824878   （拉到下面，開始看 入坑系列就能夠了）vue-cli

3.智能社陳瀟冰老師的vue視頻：連接：http://pan.baidu.com/s/1sla6lkh 密碼：72ep  （老師講的很基礎，還不錯。我基本都聽完了，對vue有較好理解，不過老師是憑經驗講的，看完最好再看看書，就比較完美）json

4.曾經超火的60分鐘入門    http://www.cnblogs.com/keepfool/p/5625583.html   （裏面的內容很詳細，不夠完美的地方是這個教程是基於vue1.x版本的，基礎的部分基本2.0也適用，但到過濾器這些部分會有比較大出入，當時我也是學到這裏懵逼了棄了~有點惋惜）api

===================================================噠噠噠====分割=======================================================瀏覽器

學習Vue要準備的環境：app

1.我用的是Sublime Text3 作編輯器 :  連接：http://pan.baidu.com/s/1dFITZnb 密碼：bwfy框架

2.安裝node.js   (這個直接去官網下載安裝就能夠了，到後面安裝腳手架vue-cli要用到的）傳送門：http://nodejs.cn/download/

=======================================================嘀嘀嘀======分割==================================================

如今咱們開始正式一個坑一個坑學習vue

1.創建第一個vue頁面

準備：①下載vue.js   (進入官網https://cn.vuejs.org/v2/guide/installation.html）選擇「開發版本」，點擊便可下載到vue.js

②打開sublime text3，新建一個html頁面。快速創建一個html頁面的快捷鍵（同時按住shift+ctrl+p，而後看到頂部會彈出框，輸入   sshtml ，按回車鍵，這時候雖然沒有看到什麼變化，而後輸入感嘆號  ！ ，而後按 Tab  鍵。完成。若是沒出來，檢查輸入感嘆號 ！ 是否是英文輸入法）。

寫代碼：第一個vue頁面

效果圖：

代碼：(這是一個雙向數據綁定的案例）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue-Hello</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>   <!-- 數據顯示 -->
        <input v-model = "message">  <!-- 綁定數據 -->
    </div>

    <script src="vue.js"></script>    /*引入vue*/
    <script>
    // vue實例
        new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!'  /*message本體*/
            }
        })
    </script>
</body>
</html>
hello.html

 

2.在vue頁面上練習一下vue的經常使用指令吧。

vue的經常使用指令有：（簡書上截圖過來的，更多指令在官網有：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

下面咱們來挑幾個練練吧。

①v-bind（簡寫爲 ：）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>v-bind</title>
</head>
<style>
        .red{
            color: red;
        }
        .blue{
            background: blue;
        }
    </style>
<body>
    <div id="app" >
     <p :class="json">{{message}}</p>
    </div>

<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'bind',
            json:{
                        red:true,
                        blue:true
                    }
        }
    });
</script>
</body>
</html>
bind.html

②v-on（簡寫爲   @  ）  +  v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <input type="button" value="增長一個bb" v-on:click='add'></input>
        <ul>
        <li v-for='v in arr'>{{v}}</li>
        </ul>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:['a','b','c']
        },
        methods:{
            add:function(){
                this.arr.push('bb');
            }
        },
    });
</script>
</html>
on-for.html

③v-text、v-html這兩個都是渲染數據。這兩種方式跟咱們直接用{{msg}}又有什麼區別呢。

先來講說{{msg}}跟v-text

用法：

<div >{{msg}}</div>

<div v-text=」msg"></div>

 

data:{

  msg:'hello,Liz'

}

上面兩個寫法都能渲染出msg裏面的內容，當加載速度比較慢的時候，使用第一種寫法你在瀏覽器上可能會看到{{msg}},而後纔看到渲染出來的數據hello,Liz，可是v-text就沒這個問題，你直接看到渲染出來的數據hello,Liz。

 

v-text跟v-html相比，v-html能夠解析html標籤，舉個栗子

<div v-text="text"></div>

<div v-html="text"></div>

 

data:{

   text:'<div>hello,liz</div>'

}

這時候v-text渲染出來就是<div>hello,liz</div>，可是v-html渲染出來的是hello，liz

-----------------------------------------------認真看應該明白這三者了吧，下面給代碼跑跑看----------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>v-text,v-html</title>
</head>
<body>
    <div id="app">
<!--     這組對比{{msg}}和v-text用法 -->
        <div>{{msg}}</div>
        <div v-text="msg"></div>

<!--     這組對比v-html和v-text用法 -->
        <div v-text="text"></div>
        <div v-html="text"></div>
    </div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello,Liz',
                text:'<div>hello,liz</div>'
            }
        });
    </script>
</body>
</html>
v-text+v-html.html

 

3.vue的生命週期，鉤子函數。左邊是官方給的圖例（看不清建議去官網看看），右邊是對鉤子函數的解釋。生命週期是蠻重要的，在後面的開發中你要控制你的事件、數據何時進行，都要用到。如今先理解一下，之後用的時候比較清晰。

               

示例代碼理解(運行的時候打開瀏覽器調試查看它的週期。調試快捷鍵F12，筆記本按 Fn+F12)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>life-cycle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>

        window.onload=function(){
            new Vue({
                el:'#box',
                data:{
                    msg:'welcome vue2.0'
                },
                methods:{
                    update(){
                        this.msg='你們好';
                    },
                    destroy(){
                        this.$destroy();
                    }
                },
                beforeCreate(){
                    console.log('組件實例剛剛被建立');
                },
                created(){
                    console.log('實例已經建立完成');
                },
                beforeMount(){
                    console.log('模板編譯以前');
                },
                mounted(){
                    console.log('模板編譯完成');
                },
                beforeUpdate(){
                    console.log('組件更新以前');
                },
                updated(){
                    console.log('組件更新完畢');
                },
                beforeDestroy(){
                    console.log('組件銷燬以前');
                },
                destroyed(){
                    console.log('組件銷燬以後');
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <input type="button" value="更新數據" @click="update">
        <input type="button" value="銷燬組件" @click="destroy">
        {{msg}}
    </div>
</body>
</html>
lifeCycle.html

4.vue組件定義

核心部分，先要註冊組件。  Vue.component('組件名字',{內容}）;

而後在html中使用組件標籤。組件標籤就是你取的組件名字加上尖括號。    <組件名字></組件名字>

(這裏解釋一下，template其實就是我註冊組件的時候裏面的內容中的template，他們之間的關係經過 id="aaa"來維繫。）

看看代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
    // 註冊
        Vue.component('my-component', {   /*定義組件名稱和內容*/
          template:'#aaa'    /*調用id爲aaa的模板*/
        });

        window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{
                        msg:'welcome vue2.0'
                    }
                });
            };
    </script>
</head>
<body>
    <template id="aaa">
        <div>
            <h3>我是組件</h3>
        </div>
    </template>
    <div id="box">
        <my-component></my-component>  <!-- 在頁面上使用組件標籤 -->
        {{msg}}
    </div>
</body>
</html>
components.html

5.過濾器

原本在vue1.x的版本中，自帶了不少好用的過濾器的，可是尤大大爲了框架長久發展，決定刪除掉，所有交給開發者去自定義。這裏就給一個自定義時間過濾器的實例。

咱們在html中調用過濾器

而後在script中進行定義過濾器

代碼在這裏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>草稿</title>
</head>
<body>
    <div id="app">
        {{a | toDou}}   <!-- 使用過濾器 -->
    </div>
</body>
<script src="vue.js"></script>
<script>
    //自定義過濾- 時間過濾
   Vue.filter('toDou',function(input){
    var oDate = new Date(input);
    return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
   });

    new Vue({
        el:'#app',
        data:{
            a:Date.now()
        },
    });
</script>
</html>
filter.html

 

===這裏咱們定義了組件，過濾器，小結一下。======

其實在vue頁面中定義你要的組件也好，過濾器也好，都是要經過vue實例調用這個方法的。總的套路就是

①。在script中定義：Vue.xxx = ('自定義名字',內容）

②。在html代碼中使用它

 

=================================================滴滴  噠~========================

到這裏，基礎部分就暫告一段落了，是否是很簡單。下一篇咱們來介紹如何用vue-cli來搭建一個工程項目。會有一個比較大的跨度噢~加油啦~biu~

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