526互联

vue-dayu03

发布时间 2023-09-18 21:18:38作者: Py玩家

js循环

方式一：基于索引的循环

<script>
 let i=0
 for (;i<10;){
        console.log(i)
        i++
    }

let good_list = [1, 2, 3]
for (let j = 0; j < good_list.length; j++) {
    console.log(good_list[j])
}
</script>

方式二：in 循环   基于迭代的循环，依赖于索引取值   python全是基于迭代的循环

<script>
    let good_list = [1, 2, 3]
    for (const item in good_list) {
        console.log(item)//item取出来是索引
        console.log(good_list[item])
    } 
</script>

方式三：of循环     （跟python中的in是一样的）

<script>

    let good_list = [1, 2, 3]
   for (const item of good_list) {
     console.log(item)
   }
</script>

方式四：数组循环

<script>

    let good_list = [1, 2, 3]
   good_list.forEach(function (value, index) {
       console.log(value)
       console.log(index)
   })

</script>

jq方式

<script>

    let good_list = [3, 4, 5, 6]
    let userinof = {'name': 'lqz', 'age': 19}
    $.each(userinof, function (index, value) {
        console.log(index)
        console.log(value)
    })
</script>

key值解释

vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
    1、在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
    2、页面更新之后，会加速DOM的替换（渲染）
    3、:key="变量"

Vue.set的使用

以后可能会遇到数据变量，页面没变：不能直接更改，借助于vue提供的方法，vue.Set 更改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center">
                    <button class="btn btn-danger" @click="handleShow">点我显示购物车</button>
                    <button class="btn btn-danger" @click="handleDelete">删除最后一条</button>
                    <button class="btn btn-danger" @click="handlerev">反转</button>
                    <button class="btn btn-danger" @click="handleFirst">变更第一条</button>
                </div>

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>id号</th>
                        <th>商品名字</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in good_list">
                        <th scope="row">{{ item.id }}</th>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.count }}</td>
                    </tr>

                    </tbody>
                </table>


            </div>
        </div>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {

            good_list: [],
            userinfo: {name: 'lqz', age: 19}

        },
        methods: {
            handleShow() {
                this.good_list = [
                    {id: 1, name: '钢笔', price: 9.9, count: 4},
                    {id: 2, name: '足球', price: 99, count: 4},
                    {id: 3, name: '篮球', price: 44, count: 32},
                    {id: 4, name: '电脑', price: 1299, count: 48},
                    {id: 5, name: '鼠标', price: 23, count: 4},
                    {id: 6, name: '脸盆', price: 8, count: 4},
                ]
            },
            handleDelete() {
                this.good_list.pop()
            },
            handlerev() {
                this.good_list.reverse()
                console.log(this.good_list)
            },
            handleFirst() {
                //this.good_list[0] = {id: 555, name: '小鼠标', price: 223, count: 4}
                Vue.set(this.good_list, 0, {id: 666, name: '小鼠标', price: 22, count: 4})
                //Vue.set(对象, key, value)

            }
        }
    })
</script>
</html>

v-model的使用

:value="username" 对input标签做绑定，它只能单项的绑定，js变量变，页面会变，页面变，js变量不会变

v-model的使用，对input标签做绑定，js变量变，页面会变，页面变，js变量会变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> js循环</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <p>用户名：<input type="text" v-model="username"></p>
        <p>密 码：<input type="password" v-model="password"></p>
        <p>
            <button class="btn btn-success" @click="handlersubmit">登录</button>
        </p>
    </div>
</div>
</body>

<script>
let vm= new Vue({
    el:'#app',
    data:{
        username:'',
        password:'',
    },
    methods:{
        handlersubmit(){
            console.log(this.username)
            console.log(this.password)
        }
    }
})

</script>
</html>

事件处理

基本使用

input 标签的事件
    input    当输入框进行输入的时候 触发的事件
    change    当元素的值发生改变时 触发的事件，光标移走才检测
    blur    当输入框失去焦点的时候 触发的事件
    focus   光标到input表上上，触发
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> js循环</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <p>用户名：<input type="text" v-model="username" @input="handlerinput">》》》{{ username }}</p>
        <p>用户名：<input type="text" v-model="username1" @change="handlerchange">》》》{{ username1 }}</p>
        <p>用户名：<input type="text" v-model="username2" @blur="handlerblur">》》》{{ username2 }}</p>
        <p>用户名：<input type="text" v-model="username3" @focus="handlerfocus">》》》{{ username3 }}</p>

    </div>
</div>
</body>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            username: '',
            username1: '',
            username2: '',
            username3: '',
        },
        methods: {
            handlerinput() {
                console.log('我动了')

            },
            handlerchange(){
                console.log('当元素的值发生改变时 触发的事件，光标移走才检测')
            },
            handlerblur(){
               console.log('当输入框失去焦点的时候 触发的事件')
            },
            handlerfocus(){
                console.log('光标到input表上上，触发')
            }
        }
    })
</script>
</html>

过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> js循环</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        搜索：<p><input type="text" v-model="MyText" @input="handlerinput"></p>
        <p v-for="item in newgood_list">{{ item }}</p>
    </div>
</div>
</body>

<script>
    let vm = new Vue({

        el: '#app',
        data: {
            MyText: '',
            good_list: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc'],
            newgood_list: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc']
        },
        methods: {
            handlerinput() {
                let _this = this
                this.newgood_list = this.good_list.filter(function (item) {

                    if (item.indexOf(_this.MyText) >= 0) {//indexOf查询指定字母的索引位置
                        return true
                    } else {
                        return false
                    }

                })
                console.log(this.newgood_list)
            }
        }
    })

</script>
</html>

补充：

 //  补充1 ：数组的过滤
    // let dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'e', 'egg', 'eabc']
    // 数组的filter方法---》需要传一个匿名函数，匿名函数接收一个参数，它会循环该数组，一次次的调用这个匿名函数，并且传入循环到的值
    // 这个匿名函数返回true，表示这个值保留，返回false，表示这个值不保留
    // dataList = dataList.filter(function (item) {
    //     return true
    // })
    // console.log(dataList)

    // 补充二：现在要判断，用户输入的myText，在不在循环到的数组的某个值中，只要在，就返回true，只要不在就返回false

    // 补充三：如何判断一个字符串是否在另一个字符串中  如果在就大于等于0，不在就是 -1

    // let name = 'lqz'
    // let s = 'hello  is handsome'
    // let res = s.indexOf(name)
    // console.log(res)

箭头函数

    //1 之前写法
    // var f = function () {
    //     console.log('f执行了')
    // }
    // f()
    //2 变成箭头函数     参数和函数体之间加了箭头
    // var f = () => {
    //     console.log('f执行了')
    // }
    // f()

    // 3 带参数箭头函数,带一个参数，可以简写
    // var f = (a) => {
    //     console.log(a)
    // }
    // var f = a => {
    //     console.log(a)
    // }
    // f('lqz')
    // 4 有多个参数,不能简写
    // var f = (a, b) => {
    //     console.log(a, b)
    // }
    // f('lqz', 19)

    // 5 有一个返回值
    // var f = (a, b) => {
    //     return a + b
    // }
    // console.log(f(1, 19))

    // 6 可以省略
    // var f = (a, b) => a + b
    // console.log(f(1, 19))

    // 7 一个参数，一个返回值
    // var f = name => name + '_NB'
    // console.log(f('lqz'))

经常猜的坑

   methods: {
            // handleInput() {
            //     console.log('输入了')
            //     // 要让，dataList变化---》只要发生变化，页面重新刷新--》页面看到就是过滤后的
            //     console.log('外面的this', this.myText)
            //     let _this = this
            //     // 第一个坑：一定要用 一个变量来接收过滤后的值
            //     // 第二个坑：this指向问题:如果vue的methods中再写函数，this指向就发生变化--》
            //     //解决方案一：  再外部定义一个变量，内部使用该变量
            //     //解决方案二：  箭头函数解决--》es6
            //
            //     // 第三坑：删除，回不去了---》定义一个新变量，接收过滤后的数据集
            //     this.newdataList = this.dataList.filter(function (item) {
            //         // 拿到用户输入的:this.myText
            //         // 判断 this.myText在不在 item中
            //         // 如果在，返回true
            //
            //         console.log('里面的this', _this)  // window中没有myText，就会报错
            //         if (item.indexOf(_this.myText) >= 0) {
            //             return true
            //         } else {
            //             return false
            //         }
            //     })
            //
            // }

 

事件修饰符

.stop    只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self    只处理自己的事件，子控件冒泡的事件不处理
.prevent    阻止a链接的跳转
.once    事件只会触发一次（适用于抽奖页面）

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> js循环</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <ul @click.self="handlerul">
            <li @click.stop="handlerli(3)">第一个</li>
            <li @click="handlerli(1)">第二个</li>
            <li @click="handlerli(2)">第三个</li>
        </ul>
        <hr>
        <h2>阻止a的跳转</h2>
        <a href="http://www.baidu.com" @click.prevent="handlera">点击</a>
        <hr>
        <h2>只能点击一次</h2>
        <button class="btn btn-success" @click.once="handleSkill">秒杀</button>
    </div>
</div>
</body>

<script>
    let vm = new Vue({

        el: '#app',
        data: {},
        methods: {
            handlerul() {
                console.log('ul执行了')
            },
            handlerli(i) {
                console.log(i, '执行了')
            },
            handlera() {
                console.log('a')
            },
            handleSkill(){
                if (Math.floor(Math.random() * 2) > 0){
                        alert('秒杀成功')
                }else {
                    alert('秒杀失败')
                }
            }
        }
    })

</script>
</html>

表单控制

radio和cheakbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1>checkbox 单选</h1>
                <form>
                    <p>用户名：<input type="text" v-model="username"></p>
                    <p>密码：<input type="password" v-model="password"></p>
                    <p>记住密码：<input type="checkbox" v-model="isRem"></p>
                    <span class="btn btn-success" @click="handleLogin">登录</span>
                </form>

                <hr>
                <h1>radio单选-->选中哪个，就显示对应的value的值</h1>
                <form>
                    <p>用户名：<input type="text" v-model="username"></p>
                    <p>密码：<input type="password" v-model="password"></p>
                    <p>性别：
                        男： <input type="radio" v-model="gender" value="1">
                        女： <input type="radio" v-model="gender" value="2">
                        保密： <input type="radio" v-model="gender" value="0">

                    </p>
                    <p>记住密码：<input type="checkbox" v-model="isRem"></p>
                    <span class="btn btn-success" @click="handleLogin">登录</span>
                </form>

                <h1>checkbox多选,使用数组，会把选中的value的值都放到数组中</h1>
                <form>
                    <p>用户名：<input type="text" v-model="username"></p>
                    <p>密码：<input type="password" v-model="password"></p>
                    <p>性别：
                        男： <input type="radio" v-model="gender" value="1">
                        女： <input type="radio" v-model="gender" value="2">
                        保密： <input type="radio" v-model="gender" value="0">

                    </p>
                    <p>爱好
                        篮球：<input type="checkbox" value="篮球" v-model="hobby">
                        足球：<input type="checkbox" value="足球" v-model="hobby">
                        乒乓球：<input type="checkbox" value="乒乓球" v-model="hobby">
                        橄榄球：<input type="checkbox" value="橄榄球" v-model="hobby">
                    </p>
                    <p>记住密码：<input type="checkbox" v-model="isRem"></p>
                    {{hobby}}
                    <span class="btn btn-success" @click="handleLogin">登录</span>
                </form>


            </div>
        </div>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            password: '',
            // checkbox 单选，要么是true，要么是false
            isRem: '',
            gender: '',
            hobby: []
        },

        methods: {
            handleLogin() {
                console.log(this.username, this.password, this.isRem, this.gender, this.hobby)
            }
        }

    })
</script>
</html>

购物车案例

基本购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> js循环</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center"><h1>购物车案例</h1>

                </div>

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>id号</th>
                        <th>商品名字</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>全选/全不选<input
                                type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>


                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in good_list">
                        <th scope="row">{{ item.id }}</th>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }}</td>
                        <td>{{ item.count }}</td>
                        <td><input type="checkbox" v-model="checkbox" :value="item" @change="handlerone"></td>
                    </tr>
                    选中的商品有：{{ checkbox }}
                    <hr>
                    总价；{{ index1() }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            checkbox: [],
            checkAll: false,
            checkAll1: false,
            good_list: [
                {id: 1, name: '金瓶没', price: 99, count: 2},
                {id: 2, name: '西柚记', price: 59, count: 1},
                {id: 3, name: '水壶转', price: 89, count: 5},
            ],
        },
        methods: {

            index1() {
                total = 0
                for (item of this.checkbox) {
                    total += item.price * item.count
                }
                return total

            },
            handleCheckAll() {
                if (this.checkAll) {
                    this.checkbox = this.good_list

                } else {
                    this.checkbox = []
                }
            },
            handlerone(){
                if (this.checkbox.length===this.good_list.length){
                    this.checkAll = true
                }else {
                    this.checkAll = false
                }
            }
        }
    })
</script>
</html>

带加减和全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> js循环</title>

    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center"><h1>购物车案例</h1>

                </div>

                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>id号</th>
                        <th>商品名字</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>全选/全不选<input
                                type="checkbox" v-model="checkAll" @change="handleCheckAll"></th>


                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in good_list">
                        <th scope="row">{{ item.id }}</th>
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }} </td>
                        <td><span class="btn btn-success" @click="item.count++">+</span>{{ item.count }}<span class="btn btn-success" @click="handleJian(item)">-</span></td>
                        <td><input type="checkbox" v-model="checkbox" :value="item" @change="handlerone"></td>
                    </tr>
                    选中的商品有：{{ checkbox }}
                    <hr>
                    总价；{{ index1() }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>


</div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            checkbox: [],
            checkAll: false,
            checkAll1: false,
            good_list: [
                {id: 1, name: '金瓶没', price: 99, count: 2},
                {id: 2, name: '西柚记', price: 59, count: 1},
                {id: 3, name: '水壶转', price: 89, count: 5},
            ],
        },
        methods: {

            index1() {
                total = 0
                for (item of this.checkbox) {
                    total += item.price * item.count
                }
                return total

            },
            handleCheckAll() {
                if (this.checkAll) {
                    this.checkbox = this.good_list

                } else {
                    this.checkbox = []
                }
            },
            handlerone(){
                if (this.checkbox.length===this.good_list.length){
                    this.checkAll = true
                }else {
                    this.checkAll = false
                }
            },
            handleJian(item){
                if (item.count>1){
                    item.count--
                }else{
                    alert('最少量了')
                }
            }
        }
    })
</script>
</html>

v-model其他

v-model 之 lazy、number、trim
　　lazy：等待input框的数据绑定时区焦点之后再变化
　　number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
　　trim：去除首位的空格

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center"><h1>v-model修饰符</h1>
                    <p><input type="text" v-model.lazy="value">--->{{value}}</p>
                    <p><input type="text" v-model.number="value1">--->{{value1}}</p>
                    <p><input type="text" v-model.trim="value3">--->{{value3}}</p>

                </div>
            </div>
        </div>


    </div>

</div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            value: '',
            value1: '',
            value3: '',

        },

    })
</script>
</html>