Vue.js学习记录0

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>
        var vm = new Vue({
            el:'#app',
            data:{
                message:"hello world"
            }
        })


        var vm1 = new Vue({
            el:'#app1',
            data:{
                age:29,
                name:"keepfool",
                sex:"male"
            }
        })
        
        var vm2 = new Vue({
            el:'#app2',
            data:{
                people:[{
                    name:'Jack',
                    age:20,
                    sex:'Male'
                },{
                    name:'Pter',
                    age:23,
                    sex:'Male'
                },{
                    name:'Jane',
                    age:24,
                    sex:'Female'
                }]
            }
        })
    
        var vm3 = new Vue({
            el:'#app3',
            data:{
                activeNumber:1,
                pageCount:10
            }
        })
    
        var vm4 = new Vue({
            el:'#app4',
            data:{
                message:"Hello Vue!"
            },
            methods:{
                greet:function(){
                    alert(this.message)
                },
                say:function(msg){
                    alert(msg)
                }
            }
        })



        var vm5 = new Vue({
            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：方法