Vue 急速入门2

内容概要

Js的几种循环方式

v-for可以循环的变量

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

<!--v-for能循环的数据类型-->
<h1>v-for循环</h1>

<!--<h2>循环数组</h2>-->
<!--<p v-for="goods in goodList">{{goods}}</p>-->
<!--<h2>循环数组带索引</h2>-->
<!--    <p v-for="(good,index) in goodList">{{index}}-&#45;&#45;&#45;&#45;{{good}}</p> &lt;!&ndash;k为字符串内容v为字符串索引&ndash;&gt;-->
<!--<h2>循环字符串</h2>-->
<!--<p v-for="i in name">{{i}}</p>-->
<!--<p v-for="(k,v) in name">{{k}}-&#45;&#45;&#45;&#45;{{v}}</p> &lt;!&ndash;k为字符串内容v为字符串索引&ndash;&gt;-->

<!--<h2>循环对象</h2>-->
<!--<p v-for="(k,v) in info">{{k}}-&#45;&#45;&#45;&#45;{{v}}</p>   &lt;!&ndash;k为值，v为k&ndash;&gt;-->
<!--<p v-for="i in info">{{i}}</p>   &lt;!&ndash;i为值&ndash;&gt;-->


</div>
</body>
<script>
    let vm = new Vue({
        el:'.app',
        data:{
            goodList:['美女','汽车',"报纸","香槟"],
            name:"刘亦菲真好看我就喜欢看",
            info:{tureName: 'meiren', age: 19,}
        },
        methods:{}
    })
</script>
</html>

总结:
数组循环: i in xx i为数组中的每一个数据
数组循环带索引: k,v in xx k为数组中的每一个数据 v为索引
字符串循环 i in xx i 为字符串中的每一个数据
字符串循环带索引:k,v in xx k为字符串内容v为字符串索引
对象循环 i in xx i 为对象的每一个数据的值
对象循环带索引 k,v in xx k为对象每一个数据的值,v为对象每一个数据的键

js的循环方式

js中5中循环方式！
python都是基于迭代的循环，没有基于索引的循环
// 第一种 基于索引的循环 拿到的i 为索引
   var a = [4, 5, 6, 7]
    for (i = 0; i < a.length; i++) {
        console.log(i)
        // console.log(a[i])
    }
// 第二种 js 中 in 循环 拿到的 i 为索引
var list=[4,5,6,7]
for (i in list){
	console.log(i)
	console.log(a[i])
}
// 第三种 js 中 es6语法 of 循环 拿到的i为值
   var list = ['美女','汽车',"报纸","香槟"]
    for (i of list){
        console.log(i) 
}
// 第四种 js数组自带方法forEach i 为 值
   var list = ['美女','汽车',"报纸","香槟"]
    list.forEach((i)=> {
        console.log("-",i)
    })
// 第五种 jquery 中的循环 index为索引，value为数组中的值
导入jquery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
   var list = ['美女','汽车',"报纸","香槟"]
    $.each(list,(index,value)=> {
        console.log(index,"---",value)
    })

key值的解释

# vue中的 v-for 写在标签上，在标签上添加一个key，使用属性指令绑定以一个变量
# key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率
# key	值必须唯一
# <div v-for="item in 8" :key="item">{{item}}</div>
尽量在v-for上编写key

数组、对象的检测与更新

Vue 急速入门2-小白菜博客

对象，新增一个key-value，发现页面没有变化，以后用  Vue.set(this.info, 'hobby', '篮球') 设置一下即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
</head>
<body>
<div class="app">

<!--<p v-for="good in goodList">{{good}}</p>-->
<p v-for="i in info">{{i}}</p>
    <button @click="handeladd">点击，增加数据</button>


</div>
</body>
<script>
    let vm = new Vue({
        el:'.app',
        data:{
            goodList:['美女','汽车',"报纸","香槟"],
            name:"刘亦菲真好看我就喜欢看",
            info:{tureName: 'meiren', age: 19,}
        },
        methods:{
            handeladd:function(){
                // this.info["hobby"] = '篮球'
                Vue.set(this.info,'hobby','篮球')
            }
        }
    })
</script>
</html>

input事件

事件名称	描述
click	当进行鼠标单击的时候触发的事件
input	当输入框进行输入的时候触发的事件
change	当元素的值发生改变时触发的事件
blur	当输入框失去焦点的时候触发的事件
focus	当获得焦点，触发事件

click事件
Vue 急速入门2-小白菜博客
input事件

在输入框只要输入数据就触发input事件

change事件

change事件在鼠标进入输入框中后，修改内容并失去焦点后才算一次change事件

v-model双向数据绑定

input 可以输入值，输入后就可以通过js变量拿到，
但是前提是需要使用v-model做双向数据绑定，普通的 属性绑定 :value='变量'变量不会变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
</head>
<body>
<div class="app">
<!--    <input type="text" :value="name"> {{name}}-->
    <input type="text" v-model="name"> {{name}}

</div>
</body>
<script>
    let vm = new Vue({
        el:'.app',
        data:{
            name:"刘亦菲真好看我就喜欢看",
        },
        methods:{}
    })
</script>
</html>

过滤案例

效果预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
</head>
<body>
<div class="app">
    <h1>过滤案例</h1>
    <p><input type="text"  v-model="mydata" @input="handelInput"></p>
    <p>
    <ul>
        <li v-for="i in newDataList">{{i}}</li>
    </ul>
    </p>
</div>
</body>
<script>
    let vm = new Vue({
        el:'.app',
        data:{
            mydata:'',
           dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        },
        methods:{
             handelInput () {
                 this.newDataList = this.dataList.filter(item => item.indexOf(this.mydata)>=0)
             }
        }
    })
</script>
</html>

补充

数组的过滤方法

var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
var newDataList = dataList.filter(function(){
	return false  // return true表示这个值保留,false 表示这个值不要
})

字符串的indexOf方法

判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
    var s = 'lyf is beautiful'
    var s1 = 'qqq'
    var i = s.indexOf(s1)
    console.log(i)

es6d的箭头函数写法

函数中套函数，因为this指向有问题，所以补充了箭头函数
箭头函数没有自己的this,使用的都是上一级的this
1.无参数，无返回值箭头函数
var f = ()=>{
console.log('xx')
}
2.有一个参数，没有返回值的箭头函数
括号可以去掉
var f = (i) =>{
console.log(i)
}
3.有多个参数，没有返回值的箭头函数
括号不能去掉
var f = (k,v){
console.log('xx')
}
4.有一个参数,一个返回值
var f =(i)=>{
return i # 可以加字符..
}
5.var f = i => i  # 形参为i 返回值为i

事件修饰符

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div>
    <div class="app">
        <h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
        <ul @click='handleUl'>
            <li @click.stop="handleLi">第一</li>
            <li>第二</li>
        </ul>

        <h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理</h1>
        <ul @click.self='handleUl'>
            <li @click="handleLi">第一</li>
            <li>第二</li>
        </ul>

        <h1>prevent阻止a的跳转</h1>
        <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

        <h1>once 只响应一次</h1>
        <button @click.once="handleClick">点我抽奖</button>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {
            handleLi() {
                console.log('li被点击了')
            },
            handleUl() {
                console.log('ul被点击了')
            },
            handleA() {
                console.log('a标签被点了')
                // 阻止a的跳转，自己决定要不要跳
                // 手动指定跳
                location.href = 'http://www.cnblogs.com'

            },
            handleClick() {
                console.log('我被点了')
            }
        }

    })
</script>
</html>

按键修饰符

# 按键事件: 按了键盘某个键，就会触发函数的执行
@keyup = "handleKeyUp"

# 按键修饰符:只有某个案件被按下后才触发
@keyup.enter enter按下后触发
@keyup.13  keycode 对照表对等的按键按下后触发

表单控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
</head>
<body>
<div class="app">
    <h1>表单案例</h1>
    <p>用户名<input type="text" v-model="username"></p>
    <p>密码<input type="text" v-model="password"></p>
    <p>确认密码<input type="checkbox" v-model="remember" value="true"></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="3">
    </p>
    <p>爱好:
        篮球<input type="checkbox" v-model="hobby" value="篮球">
        足球<input type="checkbox" v-model="hobby" value="足球">
        台球<input type="checkbox" v-model="hobby" value="台球">
    </p>
    <p> <button @click="handleClick">提交</button></p>

</div>
</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            username:'',
            password:"",
            gender:"" ,// radio单选，多个radion绑定同一个变量选中某个，就对应value值
            remember:false, //checkbox单选可以用布尔值
            hobby:[] //checkbox多选一般是数组类型,必须一开始就定义数组,多个checkbox绑定一个变量
        },
        methods:{
            handleClick:function () {
                console.log(this.username,this.password,this.gender,this.remember,this.hobby)
            }

        }
    })
</script>
</html>

练习

购物车案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
     <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">

</head>
<body>
<div class="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <h1 class="text-center">购物车页面~</h1>
                <table class="table">
                    <thead>
                    <tr>
                        <th>商品编号</th>
                        <th>商品名称</th>
                        <th>商品单价</th>
                        <th>商品数量</th>
                        <th><input type="checkbox" class="text-left" v-model="ManyChoice" @change="choiceChange">全选/全不选</th>

                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(info,index) in goodList">
                        <th scope="row">{{index+1}}</th>
                        <td>{{info.name}}</td>
                        <td>{{info.price}}</td>
                        <td>{{info.count}}</td>
                        <td><input type="checkbox" v-model="oneChoiceGroup" :value="info" @click="oneChoiceClick"></td>
                    </tr>
                    </tbody>
                </table>
                商品:
                {{oneChoiceGroup}}
                <br>
                总价
                {{get_price()}}
                <button class="btn btn-block btn-success">结算</button>
            </div>
        </div>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            oneChoiceGroup:[],
            ManyChoice:false,
            goodList:[
                {'id':1,"name":'小汽车','price':100,"count":12},
                {'id':2,"name":'大轿车','price':200,"count":2},
                {'id':3,"name":'冲锋车','price':300,"count":3},
                {'id':4,"name":'旅行车','price':400,"count":4},
            ]

        },
        methods:{
            get_price(){
                var total = 0
                for (obj of this.oneChoiceGroup){
                    total += obj.price * obj.count
                }
                return total
            },
            choiceChange:function () {
               if (this.ManyChoice){
                   this.oneChoiceGroup = this.goodList
                }else {
                   this.oneChoiceGroup=[]
               }
            },
            oneChoiceClick:function () {
                this.ManyChoice = this.goodList.length == this.oneChoiceGroup.length +1
            }

        }
    })
</script>
</html>