vue簡單基礎

引入vue 建立vue對象綁定作用範圍 {{}} 取值

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <asd></asd>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/aaa.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html

單向綁定v-bind：（放在标簽屬性代碼塊的值綁定vue的值 vue動代碼塊動）

<body>
    <div id="app">
            <h1 v-bind:title="message">{{cont}}</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                cont:"我是标題",
                message:"頁面加載于"
            }
        })
    </script>
</body>

2雙向綁定 v-model="vue值 "（放在标簽内相當于一個屬性雙向都動）

!--v-bind:單項綁定，從data》》》》bind   使用在标簽中 bind加在标簽屬性前 <input type="text" v-bind:value="context1.aaa" ></input>
    v-model雙向綁定，data《》《》《》bind   使用在标簽中  v-model="data屬性" <input type="text" v-model="context1.aaa" ></input>
-->
<body>
    <div id="app">
            <input type="text" v-model="context1.aaa" ></input>
            <input type="text" v-bind:value="context1.aaa" ></input>
            {{context1.aaa}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                context1:{
                    aaa:"bbb"
                }
            }
        })
    </script>
</body>

條件指令 v-if=" " v-else （相當于标簽後跟值）

<body>
    <div id="app">
            <input type="checkbox" v-model="ok">是否同意</input>
            <h1 v-if="ok">正</h1>
            <h1 v-else="ok">負</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

循環指令v-for="(變量名，索引) in vue值 " （）user相當去集合 ul無序清單 ol有序清單

li 行

<table>表格 <tr>行 <td> 每個單元格

<body>
    <div id="app">
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>

        <ol>
            <li v-for="(n,index) in 10">{{n}}========{{index}}</li>
        </ol>

        <table >
            <tr v-for="e in user">
                <td>{{e.id}}</td>,
                <td>{{e.name}}</td>

            </tr>
        </table>


    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:[
                    {id:1,name:"張三"},
                    {id:2,name:"張三"},
                    {id:3,name:"張三"}
                ]
            }
        })
    </script>
</body>

事件的綁定 v-on：事件="vue方法名" （代碼段中的事件綁定vue中的方法）

<body>
    <div id="app">
        <button v-on:click="surch">查詢</button>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            methods:{
                surch(){
                    console.log("asd")
                }
            }
        })
    </script>
</body>

元件（元件名必須字元）

<body>
    <div id="app">
<aa></aa>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            components:{
                    'aa':{
                     template:"<ul><li>首頁</li><li>管理</li></ul>"
                    }
                }
        })
    </script>
</body>

自定義元件

建立js檔案将元件代碼用js代碼寫入

Vue.component("asd",
{template:"<ul><li>首頁</li><li>管理</li></ul>"

})

使用時先引入js檔案使用對應标簽即可

<body>
    <div id="app">
        <asd></asd>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/aaa.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

生命周期

created（）頁面渲染之前完成（并列于data el）

<body>
    <div id="app">
        <table>
            <tr v-for="user in getUser">
                <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: {
                getUser:[]
            },
            created(){//在頁面加載前提前渲染（調用）
                this.getUserlist()
            },
            methods:{//具體的方法
                //建立一個查詢全部的方法
                getUserlist(){
                     //定義axios。請求方式（路徑名稱）。then(箭頭函數)。catch(箭頭函數)
                   axios.get("date.json")
                      .then(response =>//請求成功，response 任意一個變量(四級目錄網絡/date/屬性/數組)
                        
                        this.getUser=response.data.cros.itme,
                        //console.log(response)
                        )                         
                      .catch(error =>{})
                }
            }
        })
    </script>
</body>

mounted（）面渲染之後完成