自学vue

今天自学了前段矿建vue，它主要配合ajax进行使用，简化了ajax中代码的操作。

//1、vue的核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:""
            }
        }
    })

这是vue对象的创建。

他还有几个常用的指令

<div id="app">
<!--    v-bind设置超链接，使超链接灵活使用-->
    <a v-bind:href="url">百度一下</a><br>
<!--    v-on为html标签绑定事件-->
    <button v-on:click="show()">点这里</button>
    <button @click="show()">点这里</button><br>
<!--    v-if,对条件进行判断-->
    <div v-if="count == 1">div1</div>
    <div v-else-if="count == 2">div2</div>
    <div v-else>div3</div>
<br>
<!--    v-show，切换display属性-->
    <div v-show="count == 3">v-show</div>
    <input type="text" v-model="count">
    <br>
<!--    v-for,列表渲染，遍历元素或对象-->
    <div v-for="addr in addrs">
        {{addr}}
    </div>
    <div v-for="(addr,i) in addrs">
        {{i}}——{{addr}}
    </div>
    <br>
<!--    mounted生命周期，加载完成-->
</div>
<script src="JS/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                url:"https://www.baidu.com",
                count:3,
                addrs:["北京","上海","深圳","广州"]
            }
        },
        methods:{
            show(){
                alert("你被点名了...")
            }
        },
        mounted(){
            alert("加载完成")
        }
    })
</script>

这是vue的生命周期，其中最主要的是mounted,可以使用其进行数据的查询。

 

 明天将会使用vue进行增删改查案例的练习。