day 71 Vue框架

時間  2019-11-21
標籤 day vue 框架 简体版
原文   原文鏈接

vue框架：漸進式JavaScript框架
vue一個環境：能夠只控制頁面中一個標籤、能夠控制一組標籤、能夠控制整個頁面、能夠控制整個項目
vue能夠根據實際需求，選擇控制前端項目的區域範圍css

 

 

爲何學習vue

一、html、css、js直接開發項目，項目雜亂，不方便管理，要纔有前端框架進行開發，規範項目
二、Angular、React、Vue三個前端框架，吸收前兩個框架的全部優勢，摒棄缺點，一手文檔是中文
三、Vue框架優勢：
輕量級
數據驅動
數據的雙向綁定
虛擬DOM（嵌套頁面架構的緩存）
組件化開發
由全球社區維護

單頁面應用、MVVM設計模式html

 

 

知識點總結

一、在html頁面中用script標籤導入vue環境
二、vue Vue({ el: "#app" })掛載頁面標籤，創建關聯後控制頁面標籤前端

<body>
    <div id="app">
        <hr>
        <p class="p1">{{ }}</p>
        <hr>
        <p class="p2">{{ }}</p>
        <hr>
        <p id="p">
            <b>{{ }}</b>
            <i>{{ }}</i>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    console.log(Vue);
    // new Vue({
    //    el: '.p1',
    // });
    // new Vue({
    //     el: '.p2'
    // });
    // new Vue({
    //     el: '#p'
    // })

    // el爲掛載點，纔有css3選擇器語法與頁面標籤進行綁定，決定該vue對象控制的頁面範圍
 // 1.掛載點只檢索頁面中第一個匹配到的結果，因此掛載點通常都纔有id選擇器
 // 2.html與body標籤不能夠做爲掛載點（組件中解釋）
    new Vue({
        el: '#app',
    })
</script>

 


三、插值表達式{{ }}能夠完成基礎運算vue

<!-- 一、插值表達式，能完成變量渲染，變量基礎運算，變量方法調用，不能完成複雜運算(一步解決不了的，不能出現；) -->
        <p>{{ msg }}</p>
        <p>{{ msg + '拼接內容' }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.slice(2, 4) }}</p>

 


四、插值表達式中的變量有實例成員 data 來提供css3

<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
        <h3>{{ msg }}</h3>
    </div>

    <div id="main">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>

    // 實例成員中的data是爲vue頁面模板經過數據變量的
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: 'vue變量信息'
        }
    });

    let main = new Vue({
        el: '#main',
        data: {
            msg: 'msg',
            info: 'info'
        }
    });

    console.log(app.info);
    console.log(main.info);

 // 建立vue實例（new Vue）傳進去的字典(對象)的key，稱之爲vue實例成員(變量)
 // 訪問實例成員，用 vue實例.$成員名, eg：app.$el
    console.log(app.$el);
    console.log(app.$data);

    console.log(app.$data.info);
</script>

 


五、v-on指令能夠給標籤綁定事件，事件函數由實例成員 methods 來提供設計模式

<body>
    <div id="app">
        <p class="p1" v-on:click="fn">這是一個段落，被點擊了{{ count }}下</p>
        <p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction" >該便籤被{{ action }}</p>

        <div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            count: 0,
            action: '渲染',
            // fn: function () {
            //     // console.log(app.count);
            //     // app.count ++
            //     console.log(this);  //在實例成員data下，this不是該vue實例對象，是頂級Window對象
 // }
        },
        // methods就是爲vue實例提供事件函數的
        methods: {
            fn: function () {
                // console.log(app.count);
                // app.count ++;
                // console.log(this);  // 在實例成員methods下，this表明當前該vue實例對象
                this.count ++
            },
            overAction: function () {
                this.action = '懸浮'
            },
            outAction: function () {
                this.action = '離開'
            }
        }
    });

</script>

 

 


六、插值表達式{{ 變量 | 過濾器 }}的過濾器由實例成員 filters 來提供緩存

<body>
    <div id="app">
       <!-- 默認將msg做爲參數傳給filterFn -->
        <p>{{ msg | filterFn }}</p>

        <!--過濾器串聯-->
        <p>{{ num | f1 | f2 }}</p>

        <!--能夠同時對多個變量進行過濾，變量用，分割，過濾器還能夠額外傳入參數輔助過濾-->
 <!--過濾器方法接收全部傳入的參數，按傳入的位置進行接收-->
        <p>{{ msg, num | f3(666, '好的') }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本內容',
            num: 1
        },
        filters: {
            filterFn(v1, v2) {
                // console.log(v1);
                // console.log(v2);
                return `<b>${v1}</b>`;
            },
            f1(v1) {
                return v1 * 100;
            },
            f2(v1) {
                return v1 * 100;
            },
            f3(v1, v2, v3, v4) {
                console.log(v1);
                console.log(v2);
                console.log(v3);
                console.log(v4);
            }
        }
    })
</script>

七、面向對象js： { 變量, } | function Fn(值){ this.屬性 = 值 } | obj = { 方法(){} }前端框架

<script src="js/vue.js"></script>
<script>
    // 1.js中沒有字典，只要對象類型，能夠把對象當作字典來使用
 // 2.key本質是屬性名，因此都是字符串類型（能夠出現1，true），其實都是省略引號的字符串

    let sex = '男';
    let dic = {
        'name': 'Owen',
        1: 100,
        true: 12345,
        age: 18,
        // sex: 'sex',
        sex,
    };
    console.log(dic['name']);
    console.log(dic['1']);
    console.log(dic['true']);
    console.log(dic['age']);
    console.log(dic.sex);

    dic.price = 3.5;
    console.log(dic.price);

    // 聲明類建立對象，類能夠實例化n個對象，哪一個對象調用，this就表明誰
    function People(name, age) {
 this.name = name;
 this.age = age;
 this.eat = function () {
 console.log(this.name + '在吃飯');
 return 123
 }
 }
    let p1 = new People('Owen', 17.5);
    console.log(p1.name);
    let res = p1.eat();
    console.log(res);

   // 直接聲明對象，{}內的key都屬於當前對象的
 // {}中的方法一般會簡寫
    let stu1 = {
 name: '張三',
 age: 18,
 // eat: function () {
 // console.log(this.name + '在吃飯');
 // }
 eat () {
 console.log(this.name + '在吃飯');
 }
 };
    stu1.eat()

    // 總結：
 // 1.{}中直接寫一個變量：key與value是同名，value有該名變量提供值
 // 2.es5下，全部的函數均可以做爲類，類能夠new聲明對象，在函數中用 this.資源 爲聲明的對象提供資源
 // 3.{}中出現的函數叫方法，方法能夠簡寫 { fn: function(){} } => { fn(){} }
</script>

 

八、文本指令：{{ }} | v-text="" | v-html=""架構

<body>
    <div id="app">
        <!--二、v-text：將全部內容作文本渲染 -->
        <p v-text="msg + '拼接內容'"></p>
        <!--三、v-html：能夠解析html語法標籤的文本 -->
        <p v-text="'<b>' + msg + '</b>'"></p>
 <p v-html="'<b>' + msg + '</b>'"></p>


        <p v-text="`<b>${msg}</b>`"></p>
 <p v-html="`<b>${msg}</b>`"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本信息'
        }
    })
</script>

九、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定義參數)"app

<body>
    <div id="app">
        <!--事件指令：v-on:事件名="事件函數" -->
 <!--簡寫：@事件名="事件函數" -->
        <p v-on:click="f1">被點擊了{{ count }}下</p>
        <hr>
        <p @click="f2">{{ p2 }}</p>
        <hr>
        <!--綁定的事件函數能夠添加()，添加括號就表明要傳遞參數-->
        <ul>
            <li @click="f3(100)">{{ arr[0] }}</li>
            <li @click="f3(200)">{{ arr[1] }}</li>
            <li @click="f3(300)">{{ arr[2] }}</li>
        </ul>
        <ul>
            <li @click="f4(0)">{{ arr[0] }}</li>
            <li @click="f4(1)">{{ arr[1] }}</li>
            <li @click="f4(2)">{{ arr[2] }}</li>
        </ul>
        <hr>
        <!--綁定的事件函數若是沒有傳遞參數，默認傳入 事件對象 -->
        <div class="box" @click="f5"></div>
        <hr>
        <!--事件函數一旦添加傳參()，系統就再也不傳遞任何參數，須要事件對象時，能夠手動傳入 $event -->
        <div class="box" @click="f6(10, $event)"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
            p2: '第二個p',
            arr: [1, 2, 3],
        },
        methods: {
            f1() {
                this.count ++
            },
            f2() {
                console.log(this.p2)
            },
            f3(num) {
                console.log(num);
            },
            f4(index) {
                console.log(this.arr[index]);
            },
            f5(ev, b) {
                console.log(ev);
                console.log(b);
            },
            f6(num, ev) {
                console.log(num);
                console.log(ev);
            }
        },
    })

</script>

 


十、屬性指令：v-bind:屬性名="" | :title="變量" | :style="字段變量" |
:class="變量" | :class="[變量1, 變量2]" | :class="{類1:真假, 類2:真假}"

<style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box1 {
            width: 150px;
            height: 150px;
            background-color: darkturquoise;
            transition: .3s;
        }
        .box2 {
            width: 300px;
            height: 100px;
            background-color: darkgoldenrod;
            transition: .3s;
        }

        .circle {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1.下方的class、id、title、abc等是div標籤的屬性，屬性指令就是控制它們的-->
        <div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
       <!--2.屬性指令：v-bind:屬性名="變量"，簡寫方式 :屬性名="變量" -->

      <!--3.屬性指令操做 style 屬性-->
        <div style="width: 200px;height: 200px;background-color: greenyellow"></div>
        <!-- 一般：變量值爲字典 -->
        <div :style="mys1"></div>
      <!-- 瞭解：{中能夠用多個變量控制多個屬性細節} -->
        <div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>


        <!--重點：通常vue都是結合原生css來完成樣式控制 -->
        <!--<div :class="c1"></div>-->

        <!--class能夠寫兩份，一份寫死，一份有vue控制-->
        <div class="box1" :class="c2"></div>

        <!--{}控制類名，key爲類名，key對應的值爲bool類型，決定該類名是否起做用-->
        <div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>


        <!--[]控制多個類名-->
        <div :class="[c3, c4]"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            title: '12345',
            xyz: 'opq',
            mys1: {
                width: '200px',
                height: '200px',
                // 'background-color': 'greenyellow'
                backgroundColor: 'pink',
            },
            w: '200px',
            c1: 'box1',
            c2: 'circle',
            cable: false,
            c3: 'box1',
            c4: 'circle'
        },
        methods: {
            changeCable(n) {
                this.cable = n;
            }
        }
    });

    setInterval(function () {
        // app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
        if (app.c1 === 'box1') {
            app.c1 = 'box2';
        } else {
            app.c1 = 'box1';
        }
    }, 300)


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