Vue 2

1.表单的使用

对于单选框来说，选中的时候，会把自己的value值赋值给变量

对于下拉菜单来说，option中间的内容是给用户看的，我们是通过value获取我们需要的值给变量

对于多选框来说,如果初始值是数组，则会把数据之间放到数组中，如果非数组类型，则会以布尔值展示结果

<body>
    <div id="app">
        姓名<input type="text" v-model='name'><br>
        性别<input type="radio" value="男" v-model='sex'>男<input type="radio" value="女" v-model='sex'>女<br>
        电话<input type="text" v-model='tel'><br>
        密码<input type="text" v-model='pwd'><br>
        确认密码<input type="text" v-model='pass'><br>
        专业 <select v-model='job'>
            <option value="web工程师" selected>web工程师</option>
            <option value="Java工程师">Java工程师</option>
            <option value="c++">c++</option>
        </select>
        <br>
        爱好
        <input type="checkbox" value="唱" v-model='hobby'>唱
        <input type="checkbox" value="跳" v-model='hobby'>跳
        <input type="checkbox" value="rap" v-model='hobby'>rap
        <input type="checkbox" value="篮球" v-model='hobby'>篮球
        <br>
        证书
        <select v-model='zs' multiple>
            <option value="计算机二级证书">计算机二级证书</option>
            <option value="英语四级">英语四级</option>
            <option value="英语六级">英语六级</option>
            <option value="普通话二级">普通话二级</option>
        </select>
        <br>
        备注
        <textarea cols="30" rows="10" v-model='text'></textarea><br>
        <input type="checkbox" value="同意" v-model='yes'>我同意 {{yes}}
        <br>
        <input type="submit" value="提交" @click='sub' :disabled=!yes>
    </div>

    <script src="../vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: 'zs',
                sex: '女',
                tel: '111',
                pwd: '123',
                pass: '',
                job: 'web工程师',
                hobby: ['唱', '篮球'],
                zs: '',
                text: '哈哈哈',
                yes: true,
            },
            methods: {
                sub() {
                    if (this.pass !=this.pwd) {
                        alert('密码不对')
                        return
                    }
                    console.log('发请求');
                }
            }
        })
    </script>
</body>

网页效果

2.v-for中key的使用

1.:key的取值必须是number类型或者是string类型，不能是对象
2.v-for循环中的唯一值，只要使用循环就必须添加

3.vue中的修饰符

1.事件修饰符

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

1. .stop 阻止冒泡

2. .prevent 阻止事件默认行为

3. .self 触发自己的方法，但是本身一旦有点击操作依然会有冒泡此案例中，点击inner的时候会触发inner和box而不会触发outer

4. .once 只执行一次

5. .capture 事件捕获 -->

2.键盘修饰符

<input type="text" @keydown.up = 'up' placeholder="向上">
<input type="text" @keydown.down = 'down' placeholder="向下">
<input type="text" @keydown.left = 'left' placeholder="向左">
<input type="text" @keydown.right = 'right' placeholder="向右">
<input type="text" @keydown.enter = 'enter' placeholder="回车">

3.鼠标修饰符

 <input type="text" @click.left = 'left' placeholder="左键">
 <input type="text" @click.middle = 'middle'  placeholder="滚轮">
 <input type="text" @click.right = 'right'  placeholder="右键">

4.表单修饰符

<input type="text" v-model.lazy='str'>{{str}}

<input type="text" v-model.number='num' placeholder="请输入数字">
<br>

<input type="text" v-model.trim='content'>

4.生命周期

beforeCreate() 创建之前什么都是undefined
created() 创建完成， vue实例化初始化完成，但是el还是undefined
beforeMount() 挂载之前已经找到挂载点，但是数据还未渲染此时的el是div元素
mounted() /挂载完成数据加载完成
beforeUpdate() 更新之前和更新之后的数据都是最新数据

更新完成 updated() {

销毁之前 beforeDestroy() {

销毁完成 destroyed() {

posted @ 2020-10-10 21:00 子非我233 阅读(154) 评论(0) 收藏举报

刷新页面返回顶部

Vue 2

1.表单的使用

2.v-for中key的使用

3.vue中的修饰符

4.生命周期

公告