VUE初体验

VUE！

第一个Vue程序

Hello_Vue

<!--定义盒子-->
<div id="Vue1">
    {{message}}
</div>

<!--导入Vue组件-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>

<!--创建Vue对象-->
<script>
    var vm = new Vue({
    	<!--绑定ID值-->
        el:"#Vue1",
        <!--定义数据message-->
        data:{
            message:"Hello_Vue"
        }
    });
</script>

Vue的基本语法

流程控制

v-if

<!--定义盒子-->
<div id="vif">
    <h2 v-if="message==='A'">A</h2>
    <h2 v-if="message==='B'">B</h2>
    <h2 v-if="message==='C'">C</h2>
    <h2 v-if="message==='D'">D</h2>
</div>
<!--导入组件-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<!--创建Vue对象-->
<script>
    var vm = new Vue({
            el:"#vif",
            data:{
                message:"A"
            }
        });
</script>

v-else-if

<!--定义盒子-->
<div id="velseif">
    <h2 v-if="message==='A'">A</h2>
    <h2 v-else-if="message==='B'">B</h2>
    <h2 v-else-if="message==='C'">C</h2>
</div>
<!--导入组件-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<!--创建Vue对象-->
<script>
    var vm = new Vue({
            el:"#velseif",
            data:{
                message:"B"
            }
        });
</script>

v-for

<!--定义盒子-->
<div id="vfor">
    <ol>
        <li v-for="item in itemss">
            {{item.message}}
            {{item.flag}}
            <hr>
        </li>
    </ol>
</div>
<!--导入组件-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<!--创建Vue对象-->
<script>
    var vm = new Vue({
        el:"#vfor",
        data:{
            itemss:[
                {message:'你好',flag:'1'},
                {message:'zhangsan',flag:'2'},
                {message:'hahah',flag:'3'}
            ]
        }
    });
</script>

数据绑定

v-bind

<!--定义盒子-->
<div id="span">
    <span v-bind:title="message">
        鼠标悬停
    </span>
</div>
<!--导入组件-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<!--创建Vue对象-->
<script>
    var vm = new Vue({
        el:"#span",
        data:{
            message:"nihao"
        }
    });
</script>

v-model（双向绑定）

<!--input双向绑定-->
<div id="vmodel">
    <input type="text" v-model:value="message">
    <p>{{message}}</p>
</div>
<!--导入VUE-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>

<!--创建VUE对象-->
<script>
    var vm = new Vue({
        el:"#vmodel",
        data:{
            message:""
        }
    });
</script>


select 双向绑定
<div id="app">
    <select style="height:20px" v-model="message">
        <option value="" disabled>---请选择---</option>  <!--设置默认选中，且使该项禁用不可选中-->
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>{{message}}</p>
</div>
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:''
        }
    });
</script>

ok！