公告

vue初学第二天

Posted on 2020-10-13 09:02 lhc1994 阅读(31) 评论(0) 收藏举报

1.表单的使用

<div id="app">
        <h2>添加学员</h2>
        <span>姓名</span> <input type="text" v-model='user.name'>
        <br>
        <!-- 对于单选框来说，选中的时候，会把自己的value值赋值给变量 -->
        <span>性别</span> <input type="radio" v-model='user.sex' value="男">男<input type="radio" v-model='user.sex' value="女">女
        <br>
        <span>电话</span> <input type="text" v-model='user.tel'>
        <br>
        <span>密码</span> <input type="text" v-model='user.pwd'>
        <br>
        <span>确认密码</span> <input type="text" v-model='user.pass'>
        <br>
        <span>专业</span>
        <!-- 对于下拉菜单来说，option中间的内容是给用户看的，我们是通过value获取我们需要的值给变量 -->
        <select v-model='user.job'>          
            <option value="web工程师">web工程师</option>
            <option value="java工程师">java工程师</option>
            <option value="c++">c++</option>
        </select>
        <br>
        <span>爱好</span>
       <!-- 对于多选框来说,如果初始值是数组，则会把数据之间放到数组中，如果非数组类型，则会以布尔值展示结果 -->
       <input type="checkbox" value="唱歌" v-model='user.hobby'>唱歌
       <input type="checkbox" value="跳舞" v-model='user.hobby'>跳舞
       <input type="checkbox" value="打游戏" v-model='user.hobby'>打游戏
       <input type="checkbox" value="写代码" v-model='user.hobby'>写代码
       <br>
       <span>证书</span>
       <select v-model='user.zs' multiple>          
        <option value="计算机二级">计算机二级</option>
        <option value="英语四级">英语四级</option>
        <option value="英语六级">英语六级</option>
    </select>
    <br>
    <span>备注:</span>
    <textarea  cols="30" rows="10" v-model='user.text'></textarea>
    <br>
    <input type="checkbox" v-model='user.check'>我同意
    <br>
    <input type="submit" value="提交" @click = 'submit' :disabled='!user.check'>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            user:{
                name:'zs',
                sex:'女',
                tel:'1111',
                pwd:'123',
                pass:'',
                job:'web工程师',
                hobby:['唱歌','跳舞'],
                zs:'',
                text:'哈哈',
                check:true
            }
        },
        methods: {
            submit(){
                if(this.user.pwd!=this.user.pass){
                    alert('两次输入的密码不一致')
                    return
                }
                console.log('发请求')
            }
        },
    })
</script>
```

2.v-for中key的使用

<ul>
            <!-- 总结：1.:key的取值必须是number类型或者是string类型，不能是对象 
                      2.v-for循环中的唯一值，只要使用循环就必须添加
            -->
            <li v-for='(item,index) in arr' :key='item.id'><input type="checkbox">{{item.name}}----{{item.id}}-------{{index}}</li>
        </ul>
        <button @click='add'>添加</button>


<script>
    let vm = new Vue({
        el:'#app',
        data:{
            arr:[
                {
                    id:1,
                    name:'丁有欣',
                },
                {
                    id:2,
                    name:'韩梦琪',
                },
                {
                    id:3,
                    name:'刘思皓',
                },
                {
                    id:4,
                    name:'杨传强',
                }
            ]
        },
        methods: {
            add(){
                const newArr = { id:5,name:'高衍锋'}
                this.arr.splice(2,0,newArr)
            }
        },
    })
</script>

3.vue中的修饰符

1.事件修饰符

.stop .prevent .self .once .capture(给谁加谁先出来)

2.键盘修饰符

```vue

```

3.鼠标修饰符

```vue

```

### 4.生命周期

```vue

</div>

</body>

let vm = new Vue({

data:{

msg:'hello world!'

methods: {

add(){

console.log('我是vm方法');

}

// 创建之前什么都是undefined

beforeCreate() {

console.log('el:',this.$el);