1.引入vue的js，以下的3不操作都是在body里面

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.创建vue实例
 <script>
        var app = new Vue({
            el:"#app",
            data:{
               message:"你好！"
            },
        })    
</script>
3.数据交互
<div id="app">
　　{{message}}
</div>
 
4.定义多种数据类型，以及访问方式
var app = new Vue({
            el:'#app',
            data:{
                message:"黑马程序员！",
                school:{
                    name:"北京人民小学",
                    phone:10020003300
                },
                schooleArea:['北京小区','重庆小区','天津小区']
            }
        })
 
    <div id="app">
        <div>{{message}}</div>
        <div>{{school.name}}</div>
        <div>{{school.phone}}</div>
        <div>{{schooleArea[0]}}</div>
        <div>{{schooleArea[1]}}</div>
    </div>
 
5.基础指令:v-text
 
<div id="app">
        <div>{{message}}</div>
        <div v-text="message">深圳</div>
        <div >{{message}}深圳</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               message:"你好！"
            },
        })    
</script>
 
6.基础指令：v-html

 

 

7.基础指令：v-on:事件名称

 

 

 

8.基础指令:v-show

为true显示，为false不显示，实际操作的是display的属性

 

9.基础指令:v-if v-bind

为true显示，为false不显示，实际操作的是标签，对标签进行添加、删除

 

 

v-for指令

 

 

v-model双向绑定，页面值改变，变量的值也改变