VueJs學習

VueJs學習

1. vue是一個mvvm框架(類庫) 和angualar類似
2. 第一個實例
   
   • vue是一片html代碼 加上 一段json

    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <div id="app">{{message}}<div>  
    var vm=new vue({
        el:'#app',  <!--el:element 選擇器 class tagname id-->
        data:{
            message:'你好' <!--message放在這裏外面就可以用了-->
        }
    })

- message裏面可以放入 文本   html代碼

1. 常用指令 : 擴展html屬性
   
   • v-model 一般用於表單元素(input) 雙向數據綁定
   • v-for 用於循環

    <div id="box">
        <input type="text" v-model="msg">
        <ul>
            <li v-for="value in arr">
            {{value}} {{$index}}
            </li>
        <ul>
        <ul>
            <li v-for="item in json">
            {{item}} {{$key}}
            </li>
        <ul>
        <ul>
            <li v-for="(v,k) in json">
            {{v}} {{k}}
            </li>
        <ul>
    <div>
    var vm=new vue({
        el:'#app', 
        data:{
            msg:'你好'，
            msg2:'hello',
            arr:['apple','banana','orange'],
            json:{a:'apple',b:'banana',o:'orange'}
        }
    })

• v-on:click/dblclick/mouseover..=”函數” 事件綁定

    <input type="button" v-on:click="show()">
    var vm=new vue({   <!--vm就是對象 arr就是屬性 show就是方法-->
        el:'#app', 
        data:{
            arr:['apple','banana','orange'],
            json:{a:'apple',b:'banana',o:'orange'}
        },
        method:{
            show:function(){
                alert(this.arr);  <!--彈出arr數組-->
            }
        }
    })  

• v-show=”true/false”顯示與隱藏

    <div id="box">
        <input type="button" value="按鈕" v-show:click="IsShow=false">
        <div style="width:100px;height:100px;background:red;" v-show="IsShow">
    <div>
    var vm=new vue({
        el:'#box',
        data:{
            Isshow:true
        }
    })