1.快速入门:
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueTest1</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    {{message}}
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            message: "hello vue"
        }
    })
</script>
</html>

注意:<script src="../js/vue.js"></script>这里加../是因为我的html文件和js文件在两个不同包下; new Vue时V要大写
----------------------
2.v-bind,v-model,v-on:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueTest2</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">

    <a v-bind:href="url">xiangxiang的博客</a>  <br>
    <a :href="url">xiangxiang的博客</a>  <!--简化形式,可以直接把v-bind删掉-->

    <input type="text" v-model="url"> <br> <!--如果修改表单中的url地址,上面的超链接也会相应改变-->

    <input type="button" value="点击" v-on:click="handler()">
    <input type="button" value="点击" @click="handler()"> <!--简化写法-->
</div>
</body>
<script>
    new Vue({
        el: "#app", /*vue接管的区域*/
        data: {
            url: "https://www.xianghaha.site/"
        },
        methods: {
            handler (){
                alert("感谢点击")
            }
        }
    })
</script>
</html>
-------------------------------
3.渲染判断标签,v-if,v-else-if,v-else    v-show    v-for:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueTest3</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="age"> 年龄判定为:
    <span v-if="age<=35">年轻人</span>
    <span v-else-if="age>35 && age<60">中年人</span>
    <span v-else="age>60">老年人</span> <br>

    <input type="text" v-model="age"> 年龄判定为:
    <span v-show="age<=35">年轻人</span>
    <span v-show="age>35 && age<60">中年人</span>
    <span v-show="age>60">老年人</span>  <br><br>

    <span v-for="addr in addrs">{{addr}}</span>  <br><br>

    <span v-for="(addr,index) in addrs">{{index+1}}:{{addr}} </span> <!--一行展示完-->
    <hr>
    <div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>   <!--一列一列的展示-->
</div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 20,
            addrs: ['北京','上海','广州','深圳']
        }
    })
</script>
</html>
-------------------------------------
4.vue的生命周期:
这里举例mounted():
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vueTest4</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
<script>
  new Vue({
    el: "#app",
    data: {

    },
    method: {

    },
    mounted(){
      alert("vue挂载完成,发送请求数据")
    }
  })
</script>
</html>
--------------------------------