VUE之指令

時間  2019-11-17
標籤 vue 指令 简体版
原文   原文鏈接

VUE之指令

漸進式JavaScript框架javascript

  • 經過對框架的瞭解與運用程度，來決定其在整個項目中的應用範圍，最終能夠獨立以框架方式完成整個web前端項目css

  • VUE能夠徹底脫離服務器端，之前端代碼複用的方式渲染整個頁面：組件化開發html

VUE特色

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

VUE導入—掛載點

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

  • el爲掛載點，css3選擇器語法與頁面標籤進行綁定，決定該vue對象控制的頁面範圍
  • 掛載點只檢索頁面中第一個匹配到的結果，因此掛載點通常都纔有id選擇器(惟一)
  • html與body標籤不能夠做爲掛載點，因此咱們要用div標籤包裹一下

VUE變量

<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
        <h3>{{ msg }}</h3>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 實例成員中的data是爲vue頁面模板經過數據變量的
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: 'vue變量信息'
        }
    });
    console.log(app.info);
    // 建立vue實例（new Vue）傳進去的字典(對象)的key，稱之爲vue實例成員(變量)
    // 訪問實例成員，用 vue實例.$成員名, eg：app.$el
    console.log(app.$el);
    console.log(app.$data);
    console.log(app.$data.info);
</script>

面向對象js：

  • js中沒有字典，只要對象類型，能夠把對象當作字典來使用
  • key本質是屬性名，因此都是字符串類型（能夠出現1，true），其實都是省略引號的字符串
  • {}中直接寫一個變量：key與value是同名，value有該名變量提供值
  • es5下，全部的函數均可以做爲類，類能夠new聲明對象，在函數中用 this.資源 爲聲明的對象提供資源
  • {}中出現的函數叫方法，方法能夠簡寫 { fn: function(){} } => { fn(){} }
<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()

</script>

VUE事件

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        body {
            /*頁面內容不容許被選中*/
            user-select: none;
        }
        .p1:hover {
            cursor: pointer;
            color: green;
        }
    </style>
</head>
<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);  // this不是該vue實例對象，是頂級Window對象
            // }
        },
        // methods就是爲vue實例提供事件函數的
        methods: {
            fn: function () {
                // console.log(app.count);
                // app.count ++;
                // console.log(this);  // this表明當前該vue實例對象
                this.count ++
            },
            overAction: function () {
                this.action = '懸浮'
            },
            outAction: function () {
                this.action = '離開'
            }
        }
    });

</script>
</html>

VUE指令

VUE文本指令

<body>
<div id="app">
    <!--插值表達式-->
    <p>{{ msg }}</p>
    <!--eg:原文本會被msg替代-->
    <p v-text="msg">原文本</p>
    <!--解析帶html的標籤的文本信息-->
    <p v-html="msg"></p>
    <!-- v-once 控制的標籤只能被賦值一次-->
    <p v-once>{{ msg }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
    //指令：出如今html標籤中，能夠被vue解析處理的全局屬性
    new Vue({
        el:"#app",
        data:{
            msg:'message'
        }
    })
</script>

VUE事件指令

<body>
    <div id="app">
        <!--事件指令：v-on:事件名="事件函數"  -->
        <!--簡寫：@事件名="事件函數"  -->
        <p v-on:click="f1">被點擊了{{ count }}下</p>
        <p @click="f2">{{ p2 }}</p>
        <!--綁定的事件函數能夠添加()，添加括號就表明要傳遞參數-->
        <ul>
            <li @click="f3(100)">{{ arr[0] }}</li>
        </ul>
        <!--綁定的事件函數若是沒有傳遞參數，默認傳入 事件對象 -->
        <div class="box" @click="f5"></div
        <!--事件函數一旦添加傳參()，系統就再也不傳遞任何參數，須要事件對象時，能夠手動傳入 $event -->
        <div class="box" @click="f6(10, $event)"></div>
    </div>
</body>

VUE屬性指令

<body>
<div id="app">
    <!--給自定義全局屬性綁定變量-->
    <p v-bind:abc="abc"></p>
    <!--以原形字符串綁定全局屬性-->
    <p v-bind:title="'abc'"></p>
    <!--單類名綁定-->
    <p v-bind:class="c1"></p>
    <!--多類名綁定-->
    <p v-bind:class="[c2,c3]"></p>
    <!--類名狀態綁定-->
    <p v-bind:class="[{c5:true},{c6:false}]"></p>

    <!--樣式綁定-->
    <div :style="div_style"></div>
    <div :style="{width:'100px',height:'100px',backgroundColor:'blue'"></div>

</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data:{
            abc:"abc",
            c1:'p1',
            c2:'p2',
            c3:'p3',
            div_style:{
                width:"200px",
                height:"200px",
                backgroundColor:"cyan"
            }
        }
    })
</script>
<!-- v-bind:指令能夠簡寫爲 ： -->
</body>

VUE過濾器

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

VUE模板

<style>
        .box {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
        }
        .b1 {
            width: 100px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .b2 {
            width: 100px;
            height: 200px;
            background-color: green;
            float: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="box">
            <div class="b1"></div>
            <div class="b2"></div>
        </div>
    </div>
</body>

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