Vue学习笔记整理(一)--基本指令--有代码实例

1.Vue基本指令
v-model:实现数据的双向绑定v-once: 记录第一次的值，不随改变而改变
v-if: 条件渲染指令 v-if="expression"expression返回的是bool值   dom树改变
v-else: 与v-if配套使用  必须紧跟在v-if后面
v-show: 条件渲染指令  v-show="expression"expression返回的是bool值  css样式的切换 display:none
v-else-if:条件渲染指令 多条件指令
v-for:基于数据渲染一个列表，类似js中的遍历，其数据类型可以是Array,object,number,string,优先级高于其他指令
v-text:注入的数据将静态数据覆盖
v-html:注入标签
v-bind:将属性动态的绑定到标签上面去  可以绑定属性  绑定类   简写 :
v-on: 用于触发事件  简写 @

下面举个栗子（有表单数据验证）：

html代码：

 <fieldset>
        <legend>学生成绩录入</legend>
        <div>
            <span>姓名：</span>
            <input type="text" placeholder="请输入姓名" v-model="newPerson.name" />
        </div>
        <div>
            <span>年龄：</span>
            <input type="text" placeholder="请输入年龄" v-model="newPerson.age" />
        </div>
        <div>
            <span>性别：</span>
            <select v-model="newPerson.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <span>手机号：</span>
            <input type="text" placeholder="请输入手机号" v-model="newPerson.phone" />
        </div>
        <button @click="createPerson()">创建新用户</button>
    </fieldset>

    <table>
        <thead>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>手机号</td>
            <td>删除</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in persons">
            <td >{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.sex}}</td>
            <td>{{item.phone}}</td>
            <td><button @click="deletePerson(index)">删除</button></td>
        </tr>
        </tbody>
    </table>

javaScript代码：

 new Vue({
        el:'#app',
        data:{
            persons:[
                {name:'张三',age:15,sex:'男',phone:456123},
                {name:'李四',age:14,sex:'女',phone:456123},
                {name:'张思德',age:42,sex:'男',phone:456123},
                {name:'玉林',age:25,sex:'男',phone:456123},
            ],
            newPerson:{name:'',age:0,sex:'男',phone:''}

        },
        methods:{//实例的所有函数实现
           
            //1.创建一条person记录
            createPerson(){
                //条件提交
                if(this.newPerson.name===''){
                    alert('name can not null');
                    return;
                }
                if(this.newPerson.age<0){
                    alert('age can not <0');
                    return;
                }
                if(this.newPerson.phone===''){
                    alert('phone can not null');
                    return;
                }
                //往数组中添加数据
                this.persons.unshift(this.newPerson);
                //添加完数据清空数据
               this.newPerson={name:'',age:0,sex:'男',phone:''}
            },
            //2.删除一条记录
            deletePerson(index){
                this.persons.splice(index,1);
            }
        }
    });

运行结果：

这是本人个人在学习的过程中总结的，大家有任何疑问，请及时留言讨论哦