VUE学习

写在前面：
node ===> npm ===>node package manager
webpack:打包机
babel: 能将es6的代码转换成为浏览器识别的代码

1.VUE 插值

<div id="app">
    <!--Vue中有它自己特殊的语法 插值{{}}  ===》  react{}  angular{{}}-->
    <h3>{{msg}}</h3>
</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
    var app = new Vue({
        // 参数对象中有几个重要的属性：el
        el:"#app",
        data:{
            msg:'今天我们学习Vue'
        }
    })

2. v-* 指令
   v-on v-if v-show

        <!--vue中核心语法：指令系统   ====》v-*     -->
        <div class="div1" v-if="isShow">1</div>
        <div class="div1" v-show="isShow">2</div>
        <button class="div2" v-on:click = "showHandler">按钮</button>

    </div>
    <script type="text/javascript" src="../vue.js"></script>
    <script>
        var app = new Vue({
            // 参数对象中有几个重要的属性：el
            el:"#app",
            data:{
                msg:'今天我们学习Vue',
                isShow:true
            },
            methods:{
                showHandler (){
            this.isShow = !this.isShow
        }
            }
        })

v-bind:

<div id="app">
    <div class="div2" v-bind:class="{div3:isYellow}"></div>
    <button v-on:click="changeHandler">ann</button>

</div>
<script type="text/javascript" src="../vue.js"></script>
<script>
    var app = new Vue({
        // 参数对象中有几个重要的属性：el
        el:"#app",
        data:{
            msg:'今天我们学习Vue',
            isShow:true,
            isYellow:false,
        },
        methods:{
            showHandler (){
        this.isShow = !this.isShow
    },
            changeHandler (){
        this.isYellow = !this.isYellow
    }
        }
    })

v-bind:href=“url”

<a v-bind:href="url">百度一下 你就知道</a>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                url:'https://www.baidu.com'
            },

            }
        })

循环：v-for

<!--当我们的数据量比较大的时候，比如用一个数组存储一个数据-->
        <img v-bind:src="imgSrc" alt=""/>
        <ul>
            <!--v-for-->
            <li v-for="(item,index) in imgArr" v-on:click="currentHandler(item)">{{index}}</li>
        </ul>
               var app = new Vue({
            // 参数对象中有几个重要的属性：el
            el:"#app",
            data:{
                imgSrc:'1.jpg',
                imgArr:[
                        '1.jpg',
                        '2.jpg',
                        '3.jpg',
                ],
            },
            methods:{
            currentHandler (item){
                this.imgSrc = item
        }
            }
        })

form表单中阻止默认事件submit

<form id="form">
    <button @click="sbHandler">提交</button>
</form>

<script>
	
    var form = new Vue({
        el:"#form",
        data:{

        },
        methods:{
            sbHandler(e){
        //阻止表单的默认事件
        e.preventDefault()
    }
        },
        computed:{}
    })
</script>


// vue中阻止表单的默认事件  @submit.prevent
    <form id="form" @submit.prevent>
        <button >提交</button>
    </form>

v-mode只能在form中，双向数据绑定