vue簡介，插值表達式，過濾器

時間 2020-02-12

標籤 vue 簡介插值表達式過濾器简体版

原文原文鏈接

目錄html

VUE框架介紹

VUE框架介紹

what?什麼是vue？

漸進式 javaScript框架前端

漸進式？：能夠經過vue控制某個標籤，那麼一個網頁能夠把因此內容寫進一個標籤，就能夠經過vue控制整個頁面。
漸進式：能夠控制一個頁面的一個標籤，也能夠控制一系列標籤，也能夠控制整個頁面，甚至能夠控制整個前臺項目

why?爲何要學習vue？

爲何：爲了先後端徹底分離開發vue

三大主流框架之一：Angular React Vue
先進的前端設計模式：MVVM
能夠徹底脫離服務器端，之前端代碼複用的方式渲染整個頁面：組件化開發


"""
1)Vue框架：前臺界面，頁面邏輯
    1）指令:（分支結構，循環結構...），複用頁面結構等
    2）實例成員:（過濾器，監聽），能夠對渲染的數據作二次格式化
    3）組件:（模塊的複用或組合），快速搭建頁面
    4）項目開發

2)DRF框架：數據（接口）
    1）基礎的模塊：請求、響應、解析、渲染
    2）序列化、三大認證
    3）過濾、搜索、排序、分頁
    4）異常、第三方jwt、restful接口規範
    
3）爲何學習vue：
    前臺框架：Angular（龐大）、React（精通移動端）、Vue（吸收前二者優點，輕量級）
    Vue一手文檔是中文
    實現先後臺分離開發，節約開發成本
"""

special特色？

單頁面web應用
數據驅動
數據的雙向綁定
虛擬DOM

how如何使用？

開發版本：vue.jsjava

生產版本：vue.min.jspython

<div id="app">
    {{ }}
</div>
<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>

下載安裝？

導入方式？

導入js文件同樣，用cdn或者本地導入web

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

掛在點el

el: 掛載點
* 1）一個掛載點只能控制一個頁面結構（優先匹配到的結構）
* 2）掛載點掛載的頁面標籤嚴格建議用id屬性進行匹配（id名字通常習慣用app），由於id惟一的特色
* 3）html標籤與body標籤不能做爲掛載點（html和body標籤不能夠被替換，組件中詳細介紹）
* 4）是否接受vue對象，是外界是否要只有vue對象的內容決定的

<div id="app">
    <div class="d1">
        {{ num }}
    </div>
    <div class="d1">
        {{ num }}
    </div>
</div>
<div id="main">
    {{ n }}
</div>

<script>
 var app = new Vue({
     el: '#app',
     data: {
         num: 100
     }
 });
 console.log(app.$data.num, app.num);
 new Vue({
     el: '#main',
     data: {
         n: app.num
     }
 });
</script>

插值表達式

插值表達式
     * 1）空插值表達式：{{ }}
     * 2）中渲染的變量在data中能夠初始化
     * 3）插值表達式能夠進行簡單運算與簡單邏輯
     * 4）插值表達式符合衝突解決，用delimiters自定義（瞭解）

delimiters自定義插值表達式括號

// 控制vue插值表達式符合
        delimiters: ['[{', '}]'],

<div id="app">
    <p>{{ info }}</p>
    <p>{{ msg }}</p>
    <p>{{ }}</p>
    <p>{{num}}</p>
    <p>{{num + 10 * 2}}</p>
    <p>{{ msg.length + num }}</p>
    <p>{{ msg[4] }}</p>
    <p>{{ msg.split('')[4] }}</p>
    <p>[{ num }]</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            info: '信息',
            msg: 'message',
            num: 10,
        },
        // 控制vue插值表達式符合
        delimiters: ['[{', '}]'],
    })
</script>

過濾器

過濾器
     * 1）用實例成員filters來定義過濾器
     * 2）在頁面結構中，用 | 來標識使用過濾器
     * 3）過濾方法的返回值就是過濾器過濾後的結果
     * 4）過濾器能夠對1~n個變量進行過濾，同時還能夠傳入輔助的變量，
     *      過濾器方法接受參數是安裝傳入的位置前後

<body>
    <div id="app">
        <!-- 簡單使用：過濾的對象會做爲參數傳給過濾器 -->
        <p>{{ num | add(20) }}</p>
        <!-- 串聯使用：將第一個過濾器結果做爲參數給第二個過濾器 -->
        <p>{{ num | add(100) | jump(2) }}</p>
        <!-- 究極使用 -->
        <p>{{ n1, n2 | fn(99, 77) }}</p>
        <!-- 你品，你細品 -->
        <p>{{ n1, n2 | fn(99, 77), n1, n2 | fn(100) }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            n1: 66,
            n2: 88
        },
        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>