前端vue.js简单入门

1.Vue.js基础语法

1.1.Vue.js入门：

    <!--引入vue.min.js-->
    <script src="vue.min.js"></script>
    <div id="app">
        <!-- 插值表达式 -->
        {{message}}
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
               message:'hello vue' 
            }
        })
    </script>

1.2.单向绑定：

    <div id="app">
        <div v-bind:style="msg">单向绑定1</div>
        <div :style="msg">单向绑定2</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'color:blue;'
            }
        })
    </script>

1.3.事件绑定：

    <div id="app">
        <button v-on:click="show()">事件绑定1</button>
        <button @click="show()">事件绑定2</button>
    </div>
    <script src="vue.min.js"></script>
    <script>4
        new Vue({
            el: '#app',
            data: {},
            methods: {
                show(){
                    console.log("show...");
                }    
            }    
        })
    </script>

1.4.条件指令：

    <div id="app">
        <input type="checkbox" v-model="ok"></input>
        <br/>
        <div v-if="ok">选中了</div>
        <div v-else>没有选中</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>

1.5.循环指令：

    <div id="app">
        <div v-for="user in userList">
            {{user.name}} -- {{user.age}}
        </div>
        <br/>
        <div v-for="(user,index) in userList">
           {{index}} -- {{user.name}} -- {{user.age}}
        </div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList:[
                    {"name":"lucy","age":20},
                    {"name":"mary","age":30}
                ]
            }
        })
    </script>

1.6.生命周期：

        <div id="app">
            {{msg}}
        </div>
        <script src="vue.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    msg:'hello'
                },
                create(){//在页面渲染之前执行
                    debugger
                    console.log('create()...')
                },
                mounted(){//在页面渲染之后执行
                    debugger
                    console.log('mounted()...')
                }
            })
        </script>

1.7.axios请求：

axios.min.js：

{
    "code":200,
    "message":"成功",
    "data":{
        "items":[
            {"name":"lucy","age":20},
            {"name":"mary","age":30},
            {"name":"jack","age":40}
        ]
    }
}

axios.html：

        <div id="app">
            <table>
                <tr v-for="user in userList">
                    <td>{{user.name}}</td>
                    <td>{{user.age}}</td>
                </tr>
            </table>
        </div>
        <script src="vue.min.js"></script>
        <script src="axios.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    userList:[]
                },
                created(){ //在渲染页面之前执行
                    //调用方法，得到返回json数据
                    this.getList()
                },
                methods: {
                    getList(){
                        //使用axios方式ajax请求
                        axios.get("user.json")
                        .then(response => {//请求成功
                            //console.log(response)
                            this.userList = response.data.data.items
                            console.log(this.userList);
                        })  
                        .catch(error => {//请求失败
                            console.log(error);
                        }) 
                    }
                }
            })
        </script>