環境搭建：

文件：https://www.jquery123.com/

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

直接上程式碼感受一下（注意methods）

<div id="app">
    <button v-on:click="say">click me</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm 
 
= new Vue({
        el: "#app",
        data: {
            message: "Hello World"
        },
        methods: {
            say: function (event) {
                alert(this.message);
            }
        }
    });
</script>

理解雙向繫結（單選框）

<div id="app">
    <input type="radio" name="sex"
 
 value="男" v-model="salaer" />男
    <input type="radio" name="sex" value="女" v-model="salaer" /> 女
    <p>
        選中了那個：{{salaer}}
    </p>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: 
 
"#app",
        data: {
            salaer:''
        }
    });
</script>

文字

<div id="app">
    <textarea v-model="message"></textarea>
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello World"
        }
    });
</script>

熟悉元件

<div id="app">
    <xian></xian>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    Vue.component("xian",{
        template:'<li>Hello!</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
        }
    });
</script>

繫結迴圈

Vue.component（引數名字）註冊一個元件

props 通過繫結對應的變數值，（接收的引數）需要引數傳輸到元件就需要props

template 模板

<div id="app">
    <xian v-for="item in items" v-bind:za="item"></xian>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    Vue.component("xian",{
        props:['za'],
        template:'<li>{{za}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items:["java","linux","web","html"]
        }
    });
</script>

瞭解一下七大屬性

el屬性
用來指示vue編譯器從什麼地方開始解析 vue的語法，可以說是一個佔位符。

data屬性
用來組織從view中抽象出來的屬性，可以說將檢視的資料抽象出來存放在data中。

template屬性
用來設定模板，會替換頁面元素，包括佔位符。

methods屬性
放置頁面中的業務邏輯，js方法一般都放置在methods中

render屬性
建立真正的Virtual Dom

computed屬性
用來計算

watch屬性
watch:function(new,old){}
監聽data中資料的變化
兩個引數，一個返回新值，一個返回舊值，

Axios非同步通訊（簡單體驗）

注意：request.data屬性沒有括號

<div id="app">
<div>{{info.msg}}</div>
<div>{{info.url}}

    <a v-bind:href="info.url">click me</a>

</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data(){
          return{
              info:{
                url:null,
                msg:null
              }
          }
        },
        mounted(){
            axios.get('test.json').then(response=>(this.info=response.data));
        }
    });
</script>

解決Vue載入過程中閃爍（處理為白屏，總比閃爍好）

<style>
    [v-clock]{
        display: none;
    }
</style>