【Vue】Vue初步學習

VUE 學習

<div id="app">{{ a }}</div>

<script>
    var data = {a:1}
    var vm = new Vue({
        el:'#app',
        data:data
    })
</script>


1、Object.freeze(obj); # 阻止修改obj的屬性
2、Vue暴露的實例屬性和方法，都有前綴$，以便與用戶定義的屬性區分開
例如： $data  $el  $watch
vm.$data == data
3、$watch可以觀察某個屬性變化之前和之後的值
vm.$watch('a',function(newVal,oldVal){
    
})

4、v-once指令，執行一次性插值，當數據改變時，插值處的內容不會更新。
<span v-once>這個值將不會改變：{{ msg }}</span>

5、v-html指令 ：{{}}大括號會把數據默認當成文本，如需輸出html，則需使用v-html標籤

<p v-html></p>

6、v-bind指令：綁定屬性
<div v-bind:id="qq"></div>
7、v-if v-if-else v-else
8.修飾符 .stop 當前執行完會停止
<span @click="click1">
    <span @click.stop = "click2"></span>
</span>
有.stop執行完click2就不會執行click1
沒有.stop執行完click2,繼續執行click1

9、class和style綁定

<div
    class="test"
    v-bind:class="{redBtn:isRed,greenBg:isGreen}"
    v-bind:class="['redBtn','greenBg']"
    v-bind:class="[isRed ? 'redBtn' : '',]"
    v-bind:style="{color:colorP,background:backgroundP}"
>

Hello VUE

</div>

<script>

    vm = new Vue({
        el:"#app",
        data:{
            isRed:true,
            isGreen:true,
            colorP:'#FFF',
            backgroundP:'#000ddd'
        }
    });

</script>

<style>
.test{}
.redBtn{}
.greenBg{}
</style>

10、v-show 的元素會一直渲染，只是通過簡單的控制顯示或不顯示
<div id="app">
    <h1 v-show="ok">Hello H1!</h1>
</div>

<script>

    vm = new Vue({
        el:"#app",
        data:{
            ok:true //如果是true就顯示，false則不顯示
        }
    });

</script>

11、v-for 列表渲染

<li v-for="item in items">
    {{ item.message }}
</li>
<li v-for="val in Object" >
    {{ val }}
</li>

<li v-for="item,index in items" :key="index">
    {{ index }}
    {{ item.message }}
</li>

<li v-for="val,key in Object" :key="key">
    {{ key }}
    {{ val }}
</li>

加了key值，列表就有了唯一性，會根據key自動排序

<script>

</script>

12、簡寫 v-bind:key 等同於 :key
v-on:click 等同於 @click


13、事件處理：v-on:click
<button v-on:click="counter += 1"></button>
<button v-on:click="greet"></button>

有時候需要在內聯語句中訪問原始DOM事件，可以用 $event 把它傳入方法

<button v-on:click="greet('str',$event)"></button>

<script >
    vm = new Vue({
        el:'#app',
        data:{
            counter:100
        },
        methods:{
            greet:function(str,event){
                console.log(str);
                console.log(event);
            }
        }
    });
</script>

14、事件修飾符 (多個修飾符可以串聯)
.stop //阻止事件繼續
.prevent //不在重載頁面
.capture //
.self
.once
.passive

15、表單輸入綁定
v-model 雙向綁定
16、組件
this.$emit('clicknow',this.count) //觸發函數
組件中，通過<slot></slot>插槽，方便組件動態插入HTML代碼
17、組件註冊
全局註冊
局部註冊