Vue框架基礎

時間  2020-07-30
標籤 vue 框架 基礎 简体版
原文   原文鏈接

Vue框架基礎

一、什麼是vue框架

漸進式的JavaScript框架html

漸進式：能夠控制一個頁面的標籤，也能夠控制一系列標籤，也能夠控制整個頁面，甚至能夠控制整個前端項目前端

二、vue有什麼優點

做用：開發先後臺分離項目vue

通俗來說：python

  1. 有指令（分支結構，循環結構...），複用頁面結構等後端

  2. 有實例成員（過濾器，監聽），能夠對渲染的數據作二次格式化前端框架

  3. 有組件（模塊的複用與組合），快速搭建頁面app

特色：框架

  1. 虛擬DOM，直接加載的到內存中，加載速度更快前後端分離

  2. 數據的雙向綁定，監聽機制函數

  3. 單頁面應用，適配移動端項目

  4. 數據驅動

三、爲何要學vue

前端框架主要有三種：Angular（龐大），React（精通移動端），vue（吸收前二者的優點，輕量級的）

還有vue是中國人開發的，一手文檔是中文的

通常如今不少都實現先後端分離開發，爲了節約開發成本

四、若是使用vue

vue環境簡單搭建

通常將導入和寫vue代碼都寫在HTML中的/body>與</html 中間

兩種方式：一、CDN導入，二、本地導入

<!-- 一、cdn導入 -->
<script src="https://cn.vuejs.org/js/vue.js"></script>
<!--  二、本地導入-->
<script src="js/vue.js"></script>

五、基礎實例成員

一、掛載點el

  1. 一個掛載點el只能控制一個頁面結構（優先匹配到的結構）

  2. 掛載點掛載的頁面標籤嚴格建議用 id 屬性進行匹配（通常習慣用app），由於id惟一

  3. html標籤與body標籤不能做爲掛載點

  4. 是否接受vue對象，是根據外界是否有vue對象內容決定的

    <body>
<div id="app">
    <div class="d1">
<!--        插值表達式-->
        {{ num }}
    </div>
    <div class="d1">
        {{ num }}
    </div>
</div>
<div id="main">{{ n }}</div>
</body>
<!--cdn導入-->
<!--<script src="https://cn.vuejs.org/js/vue.js"></script>-->
<!--本地導入-->
<script src="js/vue.js"></script>
<script>
    // 聲明變量app = vue對象
    var app = new Vue({
        // 掛載點el，只能控制一個頁面結構,顧用id
        el: '#app',
        // 在body中寫的插值表達式中的變量在data中初始化
        data: {
            num: 100
        }
    });
    // 是否接受vue對象，是根據外界是否有vue對象的內容決定
    new Vue({
        el: '#main',
        data:{
            n:app.num
        }
    });
    
    // 打印掛載點中全部的內容，即div>app全部渲染過的代碼
    console.log(app.$el);
    console.log(app.num); // 100
    console.log(app.$data.num) // 100
​
</script>

二、插值表達式

  1. 空插值表達式：{{  }}

  2. 插值表達式中渲染的變量在data中能夠初始化

  3. 插值表達式中能夠進行簡單的運算與邏輯

  4. 當插值表達式與Django模板語法衝突時，可使用delimiters自定義

<body>
<div id="app">
​
<p>{{ msg }}</p>
<p>{{  }}</p>
<p>{{ num }}</p>
<p>{{ num + 10 }}</p>
<!--    可使用字符串的方法-->
<p>{{ msg.length + num }}</p>
<!--    索引4的值-->
<p>{{ msg[4] }}</p>
<!--    按照空格切分後是列表-->
<p>{{ msg.split('') }}</p>
<!--    更換插值表達式標識符-->
<p>[{ msg }]</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message',
            num: 10
        },
        // 更換插值表達式標識符
        delimiters: ['[{ ', ' }]']
    })
</script>

三、過濾器

  1. 用實例成員filters來定義過濾器

  2. 在頁面結構中，用 | 來標識使用過濾器

  3. 必需要有一個返回值，過濾方法的返回值就是過濾器過濾後的結果

  4. 過濾器能夠對1~n個變量進行過濾，同時能夠傳入輔助的變量，過濾器接收參數是按照傳入的位置前後

<body>
<div id="app">
<!--    簡單使用: 過濾器對象做爲第一個參數傳給過濾器，過濾器能夠傳入輔助的參數-->
    <p>{{ num|add(20) }}</p>
<!--    串聯使用：將第一個過濾器結果當作第一個參數傳入第二個過濾器中-->
    <p>{{num|add(10) | jump(2) }}</p>
<!--    過濾器方法接收的參數按照傳入的位置前後傳入-->
    <p>{{ n1, n2 | fn(100, 200) }}</p>
    <p>{{n1, n2 | fn(10, 20), n1, n2 | fn(100) }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            num: 10,
            n1: 20,
            n2: 30
        },
        filters: {
            add: function (a, b) {
                console.log(a, b);
                return a + b
            },
            jump: function (a, b) {
                return a*b
            },
            fn: function (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d
            }
        }
​
    })
</script>

六、基礎指令

一、文本指令

  1. v-* 是vue指令，會被vue解析，v-text="num"中的num是變量

  2. v-text是原樣輸出渲染內容，渲染控制的標籤自身內容會被替換掉（<p v-text="num">123</p>中的123會被num替換）

  3. v-html能夠解析渲染HTML語法的內容

  4. js基本數據類型：字符串，數字，布爾，undefined

    <body>
<div id="app">
    <p>{{ num | add(300) }}</p>
    <!--    相似{{ num }}-->
    <p v-text="num"></p>
<!--    渲染控制的標籤自身內容123會被替換-->
    <p v-text="num">123</p>
<!--    v-text原樣渲染，v-html會解析HTML語法-->
    <p v-text="info"></p>
    <p v-html="info"></p>
<!--    js基本數據類型：字符串，布爾，數字，undefined-->
<!--    插值表達式中引號是字符串，不寫表明變量-->
    <p>{{ 'abc' + 10 + num }}</p>
<!--    文本指令中字符串須要寫在引號中再加引號-->
    <p v-text=" 'abc' + 10 + num "></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100,
            info: '<i style="color: red">info</i>',
        },
        filter:{
            add: function (a, b) {
                return a+b;
            }
        }
​
    })
</script>

二、事件指令

一、DOM驅動

  1. js選擇器獲取目標標籤

  2. 爲目標標籤綁定事件

  3. 在事件中完成相應的邏輯

        var btn = document.getElementsByTagName('button')[0];
    btn.onclick = function () {
        console.log(111111111111);
     };

二、數據驅動

  1. 操做一個功能，使用須要一個方法來看控制

  2. 方法名是變量，因此控制變量就能夠控制方法

三、事件指令

  1. 在實例成員methods中聲明事件方法

  2. 標籤經過事件指令綁定聲明的辦法：v-on：事件名="事件方法名"

    <button v-on:click="btnClick">按鈕</button>

  3. 標籤經過事件指令綁定聲明的方法，且能夠自定義傳參數：v-on：事件名="事件方法名( )"

    <button v-on:click="btnClick()">按鈕</button>  不傳任何參數
<button v-on:click="btnClick($event)">按鈕</button>  傳入事件對象,跟不寫括號相同
<button v-on:click="btnClick(10)">按鈕</button>  只傳入自定義參數，固然也能夠傳入事件對象加自定義參數
<body>
<div id="app">
<!--    標籤中聲明綁定的方法，不加括號-->
    <button v-on:click="btnClick">{{ btn1 }}</button>
    <hr>
<!--    直接綁定事件名：系統會觸發事件時調用事件方法，傳給事件方法的一個參數（事件對象）-->
    <button v-on:click="fn1">{{ btn3 }}</button>
<!--    綁定的事件後跟着(），不是主動調用事件方法，而是表示在觸發事件調用時，傳入的參數全由用戶本身決定-->
    <button v-on:click="fn2($event, 10, 20)">{{ btn4 }}</button>
    <hr>
    <button v-on:click="fn(btn1)">{{ btn1 }}</button>
    <button v-on:click="fn(btn2)">{{ btn2 }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
​
    new Vue({
        el: '#app',
        data:{
            btn1: '按鈕1',
            btn2: '按鈕2',
            btn3: '按鈕3',
            btn4: '按鈕4',
        },
        methods: {
            btnClick() {
                console.log(666)
            },
            fn1(ev) {
                console.log(ev.clientX, ev.clientY)
            },
            fn2(ev, n1 ,n2) {
                console.log(ev.clientX, ev.clientY)
            },
            fn(msg) {
                console.log(msg)
            }
        }
​
    })
</script>

七、js對象補充

一、普通對象與對象簡寫

  1. js沒有字典類型，只有對象類型，對象能夠徹底替代字典來使用

     // 對象屬性替代python中字典類型
    var dic_obj = {
        'name': 'Bob',
        'eat': function () {
            console.log('在吃飯')
        }
    };
    // 能夠直接利用對象.的方式取值或者字典取值方式取值
    console.log(dic_obj.name, dic_obj['name']);
    dic_obj.eat();
    // 獲得函數地址加括號調用
    dic_obj['eat']()

  2. js中對象的屬性名，都採用字符串類型，因此能夠省略字符串的引號標識

        
     // 屬性能夠省略引號
    var dic_obj2 = {
        name: 'Tom',
        'eat': function () {
            console.log('在吃飯...')
        }
    };
    // 能夠直接利用對象.的方式取值或者字典取值方式取值
    console.log(dic_obj.name, dic_obj['name']);
    dic_obj.eat();
    // 獲得函數地址加括號調用
    dic_obj['eat']()

  3. 對象中屬性值爲函數時，稱之爲方法，方法建議簡寫：方法名(){ }

  4. 若是對象中的屬性值是一個變量，且變量名與屬性名相同，還能夠簡寫：{屬性，}

     var height = 180;
    var p={
        // 上面定義了就直接簡寫
        height,
        // 省略引號
        name: 'Tank',
        // 對象中屬性爲函數時，方法簡寫
        eat(){}
    };
    console.log(p.height, p.name)

二、第一種類（瞭解）

 // js中的類
    // 第一種聲明類的方法
    class People {
        constructor (name) {
            this.name = name
        }
        eat () {
            console.log(this.name + '在吃飯')
        }
    }
    let p1 = new People('Bob');
    let p2 = new People('Tom');
    console.log(p1.name, p2.name);
    p1.eat();

三、第二種類（瞭解）

在函數內部出現了this語法，這個函數就是類，不然就是普通函數

// 第二種聲明類的方法(難點)：在函數內部出現了this語法，該函數就是類，不然就是普通函數
function Teacher(name) {
    this.name = name;
    this.eat =function () {
        console.log(this.name + '在吃飯')
    }
}
let t1 = new Teacher('Owen');
t1.eat();

四、類屬性

// 類屬性：給類屬性賦值，全部對象都能訪問
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();
​
// 賦值類屬性
Fn.prototype.num = 100;
​
console.log(f1.num);
console.log(f2.num);
​
// 相似於單例（給類Vue加屬性num)
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);

八、js函數補充

一、函數的形參與調用時傳入的實參關係

  1. 傳入和接收的參數個數不須要一致

  2. 可是要按照位置順序賦值，沒有關鍵字參數

  3. 沒有賦值的形參會被賦值undefined，沒有傳入的實參會被遺棄

  function fn1(a,b) {
     console.log(a, b); // 1 2
     return a+b;
    }
    // 傳多了3會被遺棄
    let res = fn1(1, 2, 3);
    console.log(res); // 3
    // 傳少了形參未被傳的被賦值undefined
    let p = fn1(1);
    console.log(p) // NaN 由於a=1, b=undefind相加不是數字

二、函數定義的演變

    // 定義函數(相似於匿名函數，起名字）
    let fn2 = function (a, b) {
        return a+b;
    };
    // 省略關鍵字的箭頭函數
    let fn3 = (a, b) => {
        return a+b;
    };
    // 沒有函數體，只有返回值的函數能夠省略做用域{},return也能夠省略
    let fn4 = (a, b) => a+b;
    
    // 若是形參只有一個時，（）也能夠省略
    let fn5 = num => num*num  

三、js是弱語言

    // 加法變字符串
    console.log(10 + '5'); // 105
    // 減法變數字
    console.log(10 - '5'); // 5
    // 將存數字字符串變數字前面加一個+
    console.log(+'55555'); // 55555
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程