script標籤匯入vue

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

HTML部分程式碼：

    <!--{{}}文字插值  v-model指令實現資料雙向繫結-->
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
    
    <!-- v-if v-else 指令
 
-->
    <div id="app1">
        <ul>
            <li v-if="age>=25">{{age}}</li>
            <li v-else>Name:{{name}}</li>
            <h1>-----------------分割線----------------</h1>
            <li v-if="name.indexOf('keep') >= 0">Name:{{name}}</
 
li>
            <li v-else>Sex:{{sex}}</li>
        </ul>
    </div>

    <!-- v-for指令-->
    <div id="app2">
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Sex</
 
th>
            </tr>
            <tr v-for="person in people">
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
                <td>{{person.sex}}</td>
            </tr>
        </table>
    </div>

    <!-- v-bind:class 指令繫結html元素的屬性 v-bind:class可簡寫為:class-->
    <div id="app3">
        <ul class="pagination">
            <li v-for="n in pageCount">
                <a href="javascript:void(0)" v-bind:class="activeNumber === n+1?'active':''">{{n}}</a>
            </li>
        </ul>
    </div>

    <!-- v-on:click指令用於監聽DOM事件，它的用法與v-bind類似 v-on:click簡寫為@click -->
    <div id="app4">
        <h2>{{message}}</h2>
        <br>
        <input type="text" v-model="message">
        <br>
        <input type="button" value="Greet" v-on:click="greet">
        <br>
        <input type="button" value="Hi" v-on:click="say('say Hi')">
    </div>
    
    <!-- 基於以上知識製作的小Demo-->
    <div id="app5">
        <fieldset>
            <legend>Create New Person</legend>
            <div>
                <label>Name:</label>
                <input type="text" v-model="newPerson.name"> 
            </div>
            <div>
                <label>Age:</label>
                <input type="text" v-model="newPerson.age">
            </div>
            <div>
                <label>Sex:</label>
                <select v-model="newPerson.sex">
                    <option value="Male">Male</option>
                    <option value="FeMale">Female</option>
                </select>
            </div>
            <div>
                <label>Create Person：</label>
                <button @click="createPerson">Create</button>
            </div>
        </fieldset>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Sex</th>
                <th>Delete</th>
            </tr>
            <tr v-for="(person,index) in people">
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
                <td>{{person.sex}}</td>
                <td><button @click="deletePerson(index)">Delete</button></td>
            </tr>
        </table>
    </div>

JAVAScript部分程式碼：

<script> varvm=newVue({ el:'#app', data:{ message:"helloworld" } })
varvm1=newVue({ el:'#app1', data:{ age:29, name:"keepfool", sex:"male" } }) varvm2=newVue({ el:'#app2', data:{ people:[{ name:'Jack', age:20, sex:'Male' },{ name:'Pter', age:23, sex:'Male' },{ name:'Jane', age:24, sex:'Female' }] } }) varvm3=newVue({ el:'#app3', data:{ activeNumber:1, pageCount:10 } }) varvm4=newVue({ el:'#app4', data:{ message:"HelloVue!" }, methods:{ greet:function(){ alert(this.message) }, say:function(msg){ alert(msg) } } })
varvm5=newVue({ el:'#app5', data:{ newPerson:{ name:"", age:0, sex:"Male" }, people:[{ name:"Jack", age:20, sex:"Male" },{ name:"Pter", age:21, sex:"Male" },{ name:"Jane", age:22, sex:"Female" }] }, methods:{ createPerson:function(){ this.people.push(this.newPerson); this.newPerson={name:"",age:0,sex:'Male'} }, deletePerson:function(index){ this.people.splice(index,1) } } })
</script>

筆記：

{{}}：文字插值，

屬性：

v-model：資料雙向繫結，

v-if：判斷語句，

v-show：判斷語句，若為false，style屬性的diplay為none，

v-else：與v-if語句一起使用，

v-for：for迴圈，

v-bind:class：繫結屬性，

v-on:click：監聽事件

Script物件：

vm：viewmodel檢視模型，

Vue({})：建立Vue方法例項，

el：選擇Html屬性，

data：資料（集合或者屬性），

methods：方法