vue列表渲染-v-for指令，vue事件处理，数据双向绑定，表单控制

2024-01-09 21:51:37

es6对象语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

</body>
<script>
    // es6对象写法
    // 1.基础写法
    var userinfo={'username':'lyz','age':18}
    console.log(userinfo)
    // 2.省略key的引号
    var userinfo={'username':'lyz','age':18}
    console.log(userinfo)
    // 3.对象中直接放变量
    var name='lyz'
    var age=18
    var userinfo={name,age}
    console.log(userinfo)
    // 4.对象中方法
    var name='lyz'
    var age=18
    var userinfo={
        name,age,'showName':function () {
            console.log(name)
            console.log(this) // this 相当于当前实例对象
            console.log(this.name)
        }
    }
    userinfo.showName()
    // 5. 方法简写
    var showName=function () {
        console.log(this) // 如果不在实例对象内部，this就代指window对象，就是bom对象
        console.log('另一个取名字的方式：' + this.name)
    }
    showName()
    var name='lyz'
    var age=18
    var userinfo={
        name,age,showName
    }
    userinfo.showName()
    // 6.最终
    var name = 'lyz'
    var age = 18
    var userinfo={
        name,age,showName(){
            console.log(name)
        }
    }
    userinfo.showName()
</script>
</html>

列表渲染-v-for指令

v-for基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <p v-for="item in names">{{item}}</p>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            names: ['老刘', '点多', '各个']
        },
    })
</script>
</html>

显示购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>购物车</h1>
    <div v-if="goodsList.length==0">购物车什么都木有</div>
    <table v-else>
        <thead>
        <tr>
            <th>商品id</th>
            <th>商品名字</th>
            <th>商品数量</th>
            <th>商品价格</th>
            <th>商品图片</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in goodsList">
            <th>{{item.id}}</th>
            <td>{{item.name}}</td>
            <td>{{item.count}}</td>
            <td>{{item.price}}</td>
            <td><img :src="item.img" alt="" width="50px" height="50px"></td>
        </tr>
        </tbody>
    </table>
    <button @click="loadData">加载购物车</button>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            goodsList: []
        },
        methods: {
            loadData() {
                this.goodsList = [
                    {id: 1, name: '短裙', count: 2, price: 99, img: './img/1.png'},
                    {id: 2, name: '短裤', count: 6, price: 88, img: './img/1.png'},
                    {id: 3, name: '短袖', count: 3, price: 109, img: './img/1.png'},
                    {id: 4, name: '卫衣', count: 1, price: 55, img: './img/1.png'},
                    {id: 5, name: '黑丝', count: 200, price: 9.9, img: './img/1.png'},
                ]
            }
        }
    })
</script>
</html>

v-for可以循环的类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>循环数组</h1>
    <ul>
        <!--      vue循环数组值在前，索引在后-->
        <li v-for="(item,index) in names">{{item}}---{{index}}</li>
    </ul>
    <h1>循环对象</h1>
    <ul>
        <!--        vue循环对象值在前，关键字在后-->
        <li v-for="(value,key) in userinfo">{{value}}---{{key}}</li>
    </ul>
    <h1>循环字符串</h1>
    <ul>
        <!--        vue循环字符串值在前，索引在后-->
        <li v-for="(value,index) in s">{{value}}---{{index}}</li>
    </ul>
    <h1>循环数字</h1>
    <ul>
        <!--        vue循环数字值在前，索引在后-->
        <li v-for="(item,index) in 10">{{item}}--->{{index}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            names: ['张三', '彭于晏', '迪丽热巴', 'lyz'],
            userinfo: {name: 'lyz', age: 18, hobby: '足球'},
            s: '学技术 养活自己',
        }
    })
</script>
</html>

js的循环方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="./js/jq.js"></script>
</head>
<body>
</body>
<script>
    // js的循环方式
    // 1. 基于索引的循环
    for (var i=0;i<10;i++){
      console.log(i)
    }
    // 2. in 循环
    // 2.1 循环数组
    var names=['lyz', '小红', '小黄']
    for (item in names){
      console.log(item)  //循环出的是索引
      console.log(names[item])  //取值
    }
    // 2.2 循环对象
    var userinfo={name:'lyz',age:18}
    for (item in userinfo){
        console.log(item)  //循环出的是key
        console.log(userinfo[item])  //取值
    }
    // 2.3 循环字符串
    var s='学技术 养活自己'
    for (item in s){
        console.log(item)  //循环出的是索引
        console.log(s[item])
    }
    // 3. of 循环
    // 3.1 循环数组
    var names=['lyz', '小红', '小黄']
    for (item of names){
        console.log(item)  //循环出的是值
    }
    // 3.2 循环对象
    // 对象 不能用of循环
    // 3.3 循环字符串
    var s='学技术 养活自己'
    for (item of s){
        console.log(item)  //循环出的是值
    }
    // 3.3 循环数字
    // 数字 不能用of循环
    // 4 数组的方法，实现循环
    var names=['lyz', '小红', '小黄']
    names.forEach(function (value,index) {
        console.log(index)
        console.log(value)
    })
    var userinfo = {'name': 'lyz', 'age': 18}  // 没有循环方法
    // 5 jq 的each循环
    var names = ['lyz', '小红', '小黄']
    $.each(names, function (index, value) {
        console.log(index)
        console.log(value)
    })
    var userinfo = {'name': 'lyz', 'age': 18}
    $.each(userinfo, function (key, value) {
        console.log(key)
        console.log(value)
    })
</script>
</html>

事件处理

input 表示的事件

?? ?-blur ：失去焦点
? ? -focus：得到焦点
? ? -change ：内容发生变化
? ? -input：只要输入内容就触发

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>v-mode指令</h1>
    用户名：<input type="text" v-model="name"> --- {{name}}
    <h1>blur：失去焦点</h1>
    <input type="text" v-model="data01" @blur="haneldBlur"> --- {{data01}}
    <h1>focus：得到焦点</h1>
    <input type="text" v-model="data02" @blur="haneldFocus"> --- {{data02}}
    <h1>change：内容发生变化</h1>
    <input type="text" v-model="data03" @blur="haneldChange"> --- {{data03}}
    <h1>input：只要输入内容就触发</h1>
    <input type="text" v-model="data04" @blur="haneldInput"> --- {{data04}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            name: '',
            data01: '',
            data02: '',
            data03: '',
            data04: '',
        },
        methods: {
            haneldBlur() {
                alert(this.data01)
            },
            haneldFocus() {
                console.log('学技术，养活自己')
            },
            haneldChange() {
                console.log(this.data03)
            },
            haneldInput() {
                console.log(this.data04)
            }
        }
    })
</script>
</html>

过滤案例

补充1?数组的过滤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>
    var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf']
    // var newDataList = dataList.filter(function (item) {
    //     // return true //过滤完所有的都要
    //     return false  // 过滤完所有的都不要
    // })
    // console.log(newDataList)
    var newDataList =dataList.filter(function (item) {
        if (item.length>2){
            return true  // 过滤出长度大于2的
        }else {
            return false
        }
    })
    console.log(newDataList)
</script>
</html>

补充2?判断子字符串是否在字符串中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    var i='a'
    var j='abc'
    var res=j.indexOf(i) // 结果是索引0，子字符串在字符串的哪个位置
    console.log(res)
</script>
</html>

补充3?箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    // 1 正常匿名函数写法
    var f = function () {
        console.log('fff')
    }
    f()
    // 2 箭头函数写法
    var f = () => {
        console.log('fff')
    }
    f()
    // 3 箭头函数有参数
    var f = (name) => {
        console.log(name)
    }
    f('lyz')
    // 4 如果只有一个参数，可以简写，有多个参数必须加在括号中
    var f = name => {
        console.log(name)
    }
    f('lyz')
    // 5 箭头函数有返回值,没有其他代码，可以简写
    var f = name => name + '好好学技术'
    var res = f('lyz')
    console.log(res)
    // 6 其他案例
    var f = function (a, b) {
        return a + b
    }
    var f = (a, b) => a + b
    // 7 箭头函数没有自己的this，箭头函数中使用的this，是它上一层的this
</script>
</html>

过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>过滤案例</h1>
    <input type="text" v-model="search" @input="handleSearch">
    <ul>
        <li v-for="item in newDataList">{{item}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {
            search: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
            newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
        },
        methods: {
            // 1 写法一
            // handleSearch() {
            //     var _this = this
            //     this.newDataList = this.dataList.filter(function (item) {
            //         if(item.indexOf(_this.search) >= 0) {
            //             return true
            //         } else {
            //             return false
            //         }
            //     })
            // }
            // 2 写法2 使用箭头函数
            // handleSearch() {
            //     var _this = this
            //     this.newDataList = this.dataList.filter (item=>{
            //         if (item.indexOf(_this.search) >= 0) {
            //             return true
            //         } else {
            //             return false
            //         }
            //     })
            // }
            // 3 最终写法
            handleSearch() {
                var _this = this
                this.newDataList = this.dataList.filter(item => item.indexOf(_this.search) >= 0)
            }
        }

    })
</script>
</html>

事件修饰符

修饰点击事件的修饰符
?? ?once：只点击一次
? ? prevent：阻止a的跳转
? ? self：父签上用，只处理自己的事件，子控件冒泡的事件不处理
? ? stop：子标签上用只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>事件修饰符</h1>
    <h2>once 只点击一次</h2>
    <button @click.once="haneldClick">点我弹窗<</button>
    <h2>prevent 阻止a的跳转</h2>
    <a href="http://www.baidu.com" @click.prevent="haneldA">点我看美女</a>
    <h3>stop，子标签上用只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）</h3>
    <ul @click="handlelul">
        <li @click.stop="handleli">li001--不让事件往上冒泡了</li>
        <li>li002</li>
    </ul>
    <h3>self，父签上用 ，只处理自己的事件，子控件冒泡的事件不处理</h3>
    <ul @click.self="handlelul">
        <li @click="handleli">li001</li>
        <li>li002</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {},
        methods: {
            haneldClick() {
                alert('点了')
            },
            haneldA() {
                console.log('点了')
            },
            handleli() {
                console.log('li被点击了')
            },
            handlelul() {
                console.log('ul被点击了')
            }
        }
    })
</script>
</html>

按键修饰符

按键是个事件--》keyup ?keydown

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="d1">
    <h1>按键事件</h1>
    <input type="text" @keyup="handleUp">
    <h2>按键修饰符</h2>
    <input type="text" @keyup.enter="handleUp02">
    <input type="text" @keyup.13="handleUp03">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#d1',
        data: {},
        methods: {
            handleUp(event) {
                console.log(event.key)
            },
            handleUp02() {  //只有按了回车，再触发函数执行
                console.log('回车被敲了')
            },
            handleUp03() {
                console.log('13对应的按键被按下了')
            }
        }
    })
</script>
</html>

数据双向绑定

# v-model 指令，只针对于input标签

# 使用v-model绑定后，只要变量发生变化，页面就变化，只要页面变化，变量就变化

表单控制

checkbox选中，单选，多选,radio

input 标签，使用 v-model 双向绑定 ?
?? ?text
? ? password
? ? checkbox
? ? file
? ? radio

<!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>checkbox</h1>
    <h2>用户登录示例</h2>
    <p>用户名：<input type="text" v-model="username"></p>
    <p>密码：<input type="password" v-model="pwd"></p>
    <p>记住密码：<input type="checkbox" v-model="rem"></p>
    <p>爱好：<br>
        <input type="checkbox" v-model="hobbys" value="篮球">篮球</p>
    <input type="checkbox" v-model="hobbys" value="足球">足球</p>
    <input type="checkbox" v-model="hobbys" value="乒乓球">乒乓球</p>
    <br>
    <input type="radio" v-model="radio" value="男">男
    <input type="radio" v-model="radio" value="女">女
    <input type="radio" v-model="radio" value="保密">保密
    <button @click="handleSubmit">登录</button>

</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            pwd: '',
            rem: '', // 只做选中不选中判断  使用布尔
            hobbys: [], // 放多个元素用数组
            radio: ''

        },
        methods: {
            handleSubmit() {
                console.log(this.username, this.pwd, this.rem, this.hobbys,this.radio)
            }
        }


    })


</script>
</html>

文章来源:https://blog.csdn.net/flclyz/article/details/135481541
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！