Vue的使用

時間 2019-11-07

標籤 vue 使用简体版

原文原文鏈接

08.27自我總結

Vue的使用

一.掛載點

<!--導入vue-->
<script src="js/vue.js"></script>

<script>
    new Vue({
        el:'ccs選擇器'
    })
</script>

這樣設置好了後這個vue中的內容會與對應的css選擇器進行關聯css

注意點:html

掛載點只遍歷第一個匹配的結果
html與body標籤不能夠做爲掛載點
掛載點的只通常就採用id選擇器(惟一性)

二.插值表達式

html差值部分頁面vue

<h1>{{msg}}</h1>

Vue部分代碼python

<script>
    new Vue({
        el:'h1'
        data:{
        msg:'插入的信息'
    }
    })
</script>

注意點:Vue中的msg變量發生變化的再沒其餘約數條件下msg也會發送變化數組

裏面值進行函數過濾

<h2>{{msg|函數名}}</h2> h2標籤內值爲msg進過函數處理後的返回值

三.約束變量渲染一次渲染

仍是基於上述的html頁面瀏覽器

<!--原html頁面-->
<h1>{{msg}}</h1>

<!--進行約束設置,設置後一次性渲染,後面msg發送變化后里面內容不會發送改變-->
<h1 v-once="msg">{{msg}}</h1>
<h1 v-once="msg" v-text='msg'></h1>
<h1 v-once="msg" v-html='msg'></h1>

<h1 v-once="msg">{{msg+msg2}}</h1>
<!--一次性渲染，插值表達式中的任何一個變量被限制，整個結果就不可變-->

改變值咱們能夠經過input框,輸入值改變msg變量的值
<input type="text"  v-model="msg">
注意咱們不能使用
<input type="text"  :value="msg">
這個只能顯示msg,input輸入的值不會使得msg的值發送變化

四.文本指令

1.v-text

<h2 v-text="msg"></h2>

h2內的標籤中test就是由vue中傳的msg變量的值,可是其中html標籤不會被解析緩存

裏面傳的值還能進行四則運算字符串等等的相關操做session

2.v-html

<h2 v-html="html"></h2>
<--假設html變量爲<a>ss<a>-->

h2標籤會顯示ssapp

html標籤可被解析函數

五.屬性指令

重點

屬性指令：v-bind:屬性名="屬性值" => v-bind: 能夠簡寫爲 :

關於style的不一樣寫法

寫法一:

<!--1）變量：變量的值爲字典-->
<div :style="my_style" class='test'></div>
<script>
    new Vue({
        el:'.test'
        data:{
        my_style: {
                width: '100px',
                height: '100px',
                'background-color': 'cyan',
                borderRadius: '50%'
            },
    }
    })
</script>

寫法二:

<!--2）字典中的多個變量-->
<div :style="{width: w, height: h, background: b}"></div>
<script>
    new Vue({
        el:'.test'
        data:{
            w: '50px',
            h: '50px',
            b: 'red',
    }
    })
</script>

關於class的寫法

<!--class屬性-->
<!--<div class="box blue"></div>-->
<div :class="c"></div>
<div :class="[c1, c2]"></div>
<div :class="[c1, 'blue']"></div>
<!--x爲類名，是否生效有變量y(true|false)值決定-->
<div :class="{x: y}"></div>
<div :class="[{'box': true}, c2]"></div>


<script>
    new Vue({
        el: '#app',
        data: {
            c: 'box blue',
            c1: 'box',
            c2: 'green',
            y: true,
        }
    })
</script>

六.事件指令

事件指令 v-on:事件名="函數" => v-on: 能夠簡寫爲 @

七.函數的建立

方法一

<script>
    new Vue({
        el:'h1'
        data:{
        msg:'插入的信息'
    }
       methods: {
            函數名 () {
                函數體
            },
    })
</script>

方法二

<script>
    new Vue({
        el:'h1'
        data:{
        msg:'插入的信息'
    }
       methods: {
            函數名:function () {
                函數體
            },
    })
</script>

方法三

<script>
    new Vue({
        el:'h1'
        data:{
        msg:'插入的信息'
    }
       methods: {
            函數名:() => {
                函數體
            },
    })
</script>

注意點:這種寫法，內部拿不到this(這裏的this是指window)

八.事件指令傳參和不傳參的區別

<!--沒有傳值默認傳 函數會接收到事件對象 -->
<div @click="btnClick1">{{ msg }}</div>

<!--方法()不會直接調用方法，而是在點擊觸發後進行傳參，接收到的參數就是傳入的參數-->
<div @click="btnClick2(1, msg)">{{ msg }}</div>

<!--一旦書寫 方法() 就再也不傳入事件對象，經過 $event 手動傳入事件對象-->
<div @click="btnClick3(msg, $event, $event)">{{ msg }}</div>

九.表單指令

<form action="">
    <!--表單指令：v-model="變量"-->

    <!--雙向綁定：一個地方修改值，全部地方的數據都會被更新-->
    <div>
        <input type="text" v-model="info" name="usr">
        <input type="password" v-model="info" name="pwd">
        <p>{{ info | infoFilter }}</p>
    </div>

    <div>
        <!--單選框：v-model="變量存放的是某個單選框的value值，表明該選框選中"-->
        男<input type="radio" name="sex" value="male" v-model="sex_val">
        女<input type="radio" name="sex" value="female" v-model="sex_val">
    </div>


    <div>
        <!--單獨的複選框：v-model="true|false表明該選框是否選中"-->
        是否贊成<input v-model="cb_val" value="yes" type="checkbox" name="agree">
    </div>

    <div>
        <!--羣複選框：v-model="存放選中選框value的數組"-->
        <!--cbs_valrug若是傳空數組會一個都不選,若是數組對應裏面的value會勾選-->
        <!--cbs_valrug若是傳true|false,裏面的能容就表示要麼全選要麼都不選->
        男<input v-model="cbs_val"  value="male" type="checkbox" name="hobby">
        女<input v-model="cbs_val"  value="female" type="checkbox" name="hobby">
        不能說<input v-model="cbs_val"  value="others" type="checkbox" name="hobby">
        <p>{{ cbs_val }}</p>
    </div>

    <div>
        <input type="submit">
    </div>
</form>


<script>
    new Vue({
        el: '#app',
        data: {
            info: '',
            sex_val: 'female',
            cb_val: 0,
            cbs_val: ["others"]  
        }
    })
</script>

十.條件指令

v-if:隱藏時不渲染,隱藏時在內存中創建緩存，能夠經過key屬性設置緩存的鍵
v-show:隱藏時用display:none渲染

使用:

<div class="box red" v-if="ture|flase" key="box_red"></div>  
<div class="box blue" v-show="ture|flase"></div>

接收的值只能是ture|flase,若是是0則是flase,若是是1則是ture
key屬性能夠對於在內存中名字進行設置,且f12你看不到key這個屬性

關於內存的存儲