表单控制、Vue生命周期

最新推荐文章于 2024-08-06 15:03:02 发布

GG_Bonin

最新推荐文章于 2024-08-06 15:03:02 发布

阅读量562

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52596593/article/details/127532766

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

表单控制

文本框的绑定需要使用 v-model指令。v-model 指令会根据控件类型自动选择正确的方法来更新元素。在表单中，文本框是最基本的表单控件类型，它分为单行文本框和多行文本框。

$\bullet$ checkbox单选与多选控制

$\circ$ 单个复选框，就是只有一个复选框，而在使用 v-model 绑定的是一个布尔值。当选中复选框时， v-model 指令绑定的 checked 属性值为 true，否则该属性值为 false

$\circ$ 多个复选框，就是可以选择多个复选框。如果有多个复选框，应用 v-model 指令绑定的便是一个数组。当选中某个复选框时，该复选框的 value 值会存入数组中。当取消某个复选框时，该复选框的值会从数组中移除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
        <h1>checkbox单选框</h1>
        <p>用户名：<input type="text" v-model="name"></p>
        <p>密码：<input type="text" v-model="password"></p>
        <p><input type="checkbox" v-model="isRemenber"></p>
        {{isRemenber}} 
        <h1>checkbox多选框</h1>
        <p>
            爱好：
            <input type="checkbox" value="篮球" v-model="happy"> 篮球
            <input type="checkbox" value="足球" v-model="happy"> 足球
            <input type="checkbox" value="桌球" v-model="happy"> 桌球
        </p>
        {{happy}}
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
            password:'',
            isRemenber:false, //checkbox单选，使用布尔类型
            happy:[],         //checkbox多选，使用数组
        }
    })
</script>
</html>
$\bullet$ radio表单的单选

存在多个按钮时，只可以选择一个常用于一个人性别的选择。当某个单选按钮被选中时，v-model 指令绑定的属性值会被赋值为该单选按钮的 value 值
!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>radio性别单选表单</h1>
    <p>
        <input type="radio" v-model="gender" value="nan"> 男
        <input type="radio" v-model="gender" value="nv"> 女
        <input type="radio" v-model="gender" value="unclear"> 未知
    </p>
    {{gender}}
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            gender: '',  // radio单选，使用字符串
        },
    })
</script>
</html>
$\bullet$ js中的五种for循环

- 基于索引的循环
for (var i = 0,i<userList.length; i++) {
    console.log(userList[i])
}
- 基于迭代的循环
for (i in userList){
    console.log(userList[i])
}
- ES6语法基于迭代的循环修改了for..in.的缺陷，只遍历属于对象本身的属性值
for (i of userList){
    console.log(i)
}
- 数组的循环方式
userList.forEach(item =>{
    console.log(item)
}
- 引入jquery，用jquery来做
$.each(userList，(i,v) => {
    console.log(v)
})

v-model进阶

$\bullet$ lazy：等待input框的数据绑定时区焦点之后再变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 class="text-center">lazy的使用</h1>
        <!--当输入框内输入完并失去焦点后触发-->
        <input type="text" v-model.lazy="name"> {{name}}
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'',
        }
    })
</script>
</html>

$\bullet$ number：数字开头只保留数字后面的字母不保留，字母开头则全部保留

<div id="app">
    <h1 class="text-center">lazy的使用</h1>
    <!--当输入框内输入数字开头则只保留数字，字母开头则都保留-->
    <input type="text" v-model.number="name"> {{name}}
</div>

$\bullet$ trim：去除首位的空格，可以用在输入密码等场景

<div id="app">
    <h1 class="text-center">lazy的使用</h1>
    <!--当输入框内首位有空格的时候会自动去掉-->
    <input type="text" v-model.trim="password"> {{password}}
</div>

vue生命周期

生命周期图

钩子函数

- beforeCreate :创建Vue实例之前调用

- created：创建Vue实例成功之后调用

- beforeMount：挂载开始前调用

- mounted：挂载开始之后调用

- beforeUpdate：数据更改DOM重新挂载之前调用

- updated：数据更改DOM重新挂载完之后调用

- beforeDestroy：销毁之前调用

- destroyed：销毁之后调用

ps：组件向后端发送请求获取数据，应该放在created写
<script>
    beforeCreate(){
        console.log('beforeCreate')
    },
    created(){
        console.log('created')
    },
    beforeMount(){
        console.log('beforeMount')
    },
    mounted(){
        console.log('mounted')
    },
    beforeUpdate(){
        console.log('beforeUpdate')
    },
    updated(){
        console.log('updated')
    },
    beforeDestroy(){
        console.log('当前状态：beforeDestroy')
    },
    destroyed(){
        console.log('当前状态：destroyed')
    },

</script>