Vue基础

Vue基础

模板语法

被vue托管的标签中可以写 {{}} 中可以写：变量，js简单的表达式，函数

插值语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="dian">
    <h1>测试</h1>
    <p>名字:{{name}}</p>
    <p>年龄:{{age}}</p>
    <p>爱好:{{hobby}}</p>
    <p>网页:{{a}}</p>
    <p>{{1+1>2? '对':'错'}}</p>

</div>
</body>
<script>
    var vm = new Vue({
        el:'#dian',
        data:{
            name:'wjl',
            age:99,
            hobby:['唱','跳','rap','篮球'],
            a: '<a href="http://www.baidu.com">百度</a>'
        },
    })

    // 三目运算符----》三元表达式
    // var a = 10 > 9 ? '大于' : '小于'
</script>

</html>

页面展示：

指令系统

写在[任意]标签上以 v-xx 开头的，都是vue的指令

文本指令

指令	作用
v-text	把变量渲染到标签中，如果之前有数据，覆盖掉
v-html	如果是标签字符串，会把标签渲染到标签内
v-show	控制标签的显示与隐藏，但是它是通过style的display控制的：style="display: none;"
v-if	控制标签的显示与隐藏，但是它是通过dom的增加和删除

v-show和v-if的区别

v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入标签

<!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> v-text </h1>
    <p v-text="name">鲨鱼辣椒</p>
    <h1> v-html</h1>
    <span v-html="a"></span>
    <h1>v-show</h1>
    <img v-show="b" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.-BD7wuSAaquBdulv7uAHjgHaHa?w=186&h=186&c=7&r=0&o=5&dpr=1.3&pid=1.7"
         alt="" width="100px" height="100px">
    <h1>v-if</h1>
    <div v-if="c">
        <a href="">点我看美女</a>
        <br>
        <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.LLDzFnlpenIDP0J2xaJ3RQHaJ2?w=186&h=248&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt=""
        width="100px" height="100px">

    </div>
</div>
</body>
<script>
      var vm = new Vue({
        el: "#app",
        data: {
            name: '原神',
            a: '<a href="http://www.baidu.com">点我</a>',
            b:true,
            c:true,
        },
    })
</script>

</html>

页面展示：

事件指令

事件指令的用法

v-on:事件名='函数' 可以简写成 @事件名='函数'

事件指令是放在标签上的，事件名可以是click,dbclick, input标签:change,blur,input

事件指令的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>事件指令</h1>
    <button @click="handleShow">展开隐藏
    </button>
    <div v-if="show">
        <img src="https://v1.xiuren.us/images/2022/09/30/283d69bfb915e03ff2c4f42e7816a7fc.jpg" alt=""
             width="300px" height="300px">
    </div>
    <h1>事件指令函数带参数</h1>
    <button @click="handleClick">函数需要参数，但是没传，默认会把event事件传入</button>
    <br>
    <button @click="handleClick1('黑丝')">函数需要参数，但是传值了</button>
    <br>
    <button @click="handleClick2('黑丝')">函数需要3参数，但是传了1个</button>
    <br>
    <button @click="handleClick3($event,'黑丝')">函数需要2参数，一个事件，一个字符串</button>


</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            show: true,
        },
        methods: {
            // handleShow: function () {
            //     // this 就是vm对象 vm.show
            //     this.show = !this.show
            // },
            //es6的语法，对象写法,以后都这样写
            handleShow() {
                // this 就是vm对象 vm.show
                this.show = !this.show
            },
            // 需要一个参数，但是没有传，会把事件传入
            handleClick(a) {
                console.log(a)
                alert('帅哥')
            },
            // 需要1个，传了一个，但是需要传数字，字符串，布尔，或变量
            handleClick1(name) {
                console.log(name)
            },
            // 需要3个参数，传了一个，没问题，后面俩都是 undefined
            handleClick2(a, b, c) {
                console.log(a)
                console.log(b)
                console.log(c)

            },
            handleClick3(event, name) {
                console.log(event)
                console.log(name)

            }


        }
    })


    // es5中
    // var obj={'name':'lqz','age':19}
    // var obj={name:'lqz',age:19}
    // es6中
    var name = 'lqz'
    var age = 19
    // var obj={name:name,age:age}
    var obj = {
        name, age, handleClick() {
        }
    }


</script>

</html>

属性指令

属性指令中的属性就是在标签中的 name，class,href,src,id 等属性

指令为 v-bind:属性名='变量' --->可以简写为 :属性名="变量"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
  <h1>属性指令</h1>
  <button @click="handleClick">点击查看图片</button>
  <br>
  <img v-bind:src="url" alt="" width="200px" height="200px">
  <hr>

  <button @click="handleChange">点我换图</button>
  <br>
  <img :src="img_url" alt="" width="200px" height="200px">
  <hr>

  <img :src="img_url1" alt=""  width="200px" height="200px">


</div>

</body>

<script>
  var vm = new Vue({
    el: '#app',
    data:{
      url:'https://v1.xiuren.us/images/2022/08/23/9b4a6a6587d1d35600c65ab61e07bb6a.jpg',
      img_url: 'https://p.qqan.com/up/2022-8/202283919254843.jpg',
      img_url1: 'https://v1.xiuren.us/images/2022/09/30/283d69bfb915e03ff2c4f42e7816a7fc.jpg',
      imgList:
      [ 'https://pic.3gbizhi.com/2022/0718/20220718085550763.jpg.220.320.jpg',
        'https://pic.3gbizhi.com/2022/0716/20220716091953668.jpg.220.320.jpg',
        'https://pic.3gbizhi.com/2022/0805/20220805045016867.jpg.220.320.jpg',
        'https://pic.3gbizhi.com/2021/1228/20211228044955257.jpg.220.320.jpg',
        'https://pic.3gbizhi.com/2021/0624/20210624075725860.jpg.220.320.jpg',
        'https://v1.xiuren.us/images/2022/09/30/283d69bfb915e03ff2c4f42e7816a7fc.jpg',]
    },
    methods:{
      handleClick() {
                this.url = 'https://v1.xiuren.us/images/2022/09/30/283d69bfb915e03ff2c4f42e7816a7fc.jpg'
            },
      handleChange() {
                // floor:只取整数部分
                //Math.random() 生成0--1直接的数字，小数
                var i = Math.floor(Math.random() * this.imgList.length)
                console.log(i)
                this.img_url = this.imgList[i]
              }
            },
      mounted() {
            // 页面加载完，开启一个定时器，每隔3s干函数内容，函数里面在变化变量
            setInterval(() => {
                var i = Math.floor(Math.random() * this.imgList.length)
                this.img_url1 = this.imgList[i]
            }, 1000)

    }
  })
</script>
</html>

页面展示

style和class

style

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

    <h1>style的使用</h1>
    <!--    <div style="background-color: aquamarine;font-size: 50px">-->
    <div :style="styleObj">
        我是style，的div
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // style 的字符串写法，以后改不好改
            styleStr: 'background-color: aquamarine;font-size: 50px',
            // style的数组写法
            // styleList: [{'background-color': 'green'}, {'font-size': '80px'}]
            //样式如果是多个单词用- 链接的形式可以写成驼峰
            styleList: [{backgroundColor: 'green'}, {fontSize: '80px'}],
            // style的对象写法
            styleObj: {backgroundColor: 'blue', fontSize: '40px'}
        }
    })


</script>
</html>

class

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>
        .red {
            background-color: red;
        }

        .size {
            font-size: 40px;
        }
    </style>
</head>
<body>
<div id="app">

    <h1>class的使用</h1>
    <div :class="classObj">
        我是class，的div
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // class的字符串用法
            classStr: 'red',
            // class的数组写法,因为类本身可以放多个，用数组最合适
            classList: ['red'],
            // class的对象
            classObj: {red: true, size: false},

        }
    })

</script>
</html>

条件渲染

将条件渲染写在标签上，控制标签的显示与不显示

v-if = '布尔值/运算完是布尔值'
v-else-if = '布尔值/运算完是布尔值'
v-else

<!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>条件渲染</h1>
    <div v-if="score>=90">优秀</div>
    <div v-else-if="score>=80 && score<90">良好</div>
    <div v-else-if="score>=60 && score<80">及格</div>
    <div v-else>不及格</div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 88
        }
    })


</script>
</html>

列表渲染

v-for：放在标签上，可以循环显示多个此标签

v-if+v-for+v-else控制购物车商品的显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <style>
        .top {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row top">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center" style="margin-bottom: 30px">
                    <button @click="handleClick" class="btn btn-danger">加载购物车</button>
                </div>

                <div v-if="goodList.length>0">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品id号</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="good in goodList">
                            <th>{{good.id}}</th>
                            <td>{{good.name}}</td>
                            <td>{{good.price}}</td>
                            <td>{{good.count}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    购物车空空如何
                </div>


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

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: []
        },
        methods: {
            handleClick() {
                // 假设去后端加载的数据
                this.goodList = [{id: 1, name: '小汽车', price: '29999元', count: 1},
                    {id: 2, name: '钢笔', price: '9元', count: 2},
                    {id: 3, name: '铅笔', price: '4元', count: 10},
                    {id: 4, name: '苹果', price: '2元', count: 3},]
            }
        }
    })


</script>
</html>

v-for 循环数组，循环字符串，数字，对象

1.v-for="key in obj"

如果是数组：key就是数组的一个个元素
如果是数字：key就是从1开始的一个个数字
如果是字符串：key就是一个个字符
如果是对象：key就是一个个value的值

2.v-for="(key,value) in obj"

如果是数组：key就是数组的一个个元素,value就是索引
如果是数字：key就是从1开始的一个个数字,value就是索引
如果是字符串：key就是一个个字符,value就是索引
如果是对象：key就是一个个value的值，value就是一个个key

每次循环的标签上，一般都会带一个属性： :key='值必须唯一'

key值是为了加速虚拟dom的替换

注意！在Vue中：

数组的index和value是反的
对象的key和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>循环数组</h1>
    <p v-for="(girl,i) in girls">第{{i}}个女孩是：{{girl}}</p>

    <h1>循环数字</h1>
    <ul>
        <li v-for="(i,a) in num">
            {{i}}-----索引值：{{a}}
        </li>

    </ul>
    <h1>循环字符串</h1>
    <ul>
        <li v-for="(i,a) in str">
            {{i}}-------索引值：{{a}}
        </li>

    </ul>
    <h1>循环对象</h1>
    <!--    <div v-for="value in obj">-->
    <!--    key在后，value在前-->
    <div v-for="(value,key) in obj">
        key值为：{{key}}，value值为：{{value}}
    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            num: 4,// 循环数字，从1开始，到4结束
            str: '彭于晏 is handsome',  // 循环字符串循环的是字符
            obj: {name: 'lqz', age: 19, hobby: ['篮球', '足球']},
            girls: ['刘亦菲', '迪丽热巴', '杨超越']
        },
    })


</script>
</html>

数组的检测与更新

可以检测到变动的数组操作

push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转

检测不到变动的数组操作：

filter()：过滤
concat()：追加另一个数组
slice()：
map()：

使用方法

// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
vm.arrayList[0]
"Alan"
vm.arrayList[0]='Darker'
"Darker"

// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(vm.arrayList, 0, 'Darker')

实例

<!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>数组的检测与更新</h1>
    <button @click="handleClick">点我追加女生</button>
    |
    <button @click="handleClick1">点我追加一批女生</button>|
    <button @click="handleClick4">点我修改数组页面变化</button>|
    <p v-for="girl in girls">{{girl}}</p>

    <h1>对象的检测与更新</h1>
    <button @click="handleClick2">点我追加身高</button>
    |
    <button @click="handleClick3">点我追加身高--解决</button>
    |
    <p v-for="(value,key) in obj">{{key}}---{{value}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            girls: ['刘亦菲', '迪丽热巴', '杨超越', '刘诗诗'],
            obj: {'name': 'lqz', age: 19}
        },
        methods: {
            handleClick() {
                this.girls.push('美女1号')
            },
            handleClick1() {
                var a = this.girls.concat(['美女99号', '美女88号', '美女77号'])
                console.log(a)
            },
            handleClick2() {
                this.obj.height = '180'  // 监控不到变化
                console.log(this.obj)
            },
            handleClick3() {
               Vue.set(this.obj,'height',180)  // 监控到变化了
            },
            handleClick4(){
                Vue.set(this.girls,0,'sdasdfas')
            }
        }
    })


</script>
</html>

双向数据绑定

在 input标签中，v-model：数据双向绑定

使用属性指令绑定 :value='变量' 是数据的单向绑定

v-model="name" ：数据双向绑定

<!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>数据双向绑定</h1>
    <p>用户名: <input type="text" v-model="name"></p>
    <p>密码: <input type="password" v-model="password"></p>
    <button @click="handleSubmit">提交</button>{{err}}


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            err:''
        },
        methods: {
            handleSubmit() {
                console.log(this.name, this.password)
                this.err='用户名密码错误'
            }
        }

    })


</script>
</html>

事件处理

时间	作用
input	当输入框进行输入的时候触发的事件
change	当元素的值发生改变时触发的事件
blur	当输入框失去焦点的时候触发的事件

change 和 blur 最本质的区别

如果输入框为空，失去焦点后，change不会触发，但是blur会触发

<!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>input的事件处理</h1>
    <h2>blur</h2>
    <p><input type="text" v-model="name1" @blur="handleBlur"> ---->{{name1}}</p>
    <h2>change</h2>
    <p><input type="text" v-model="name2" @change="handleChange"> ---->{{name2}}</p>
    <h2>input</h2>
    <p><input type="text" v-model="name3" @input="handleInput"> ---->{{name3}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: ''
        },
        methods: {
            handleBlur() {
                console.log('失去焦点了，触发了', this.name1)
            },
            handleChange() {
                console.log('发生变化，触发了', this.name2)
            },
            handleInput() {
                console.log('输入了内容，触发了', this.name3)
            }
        }

    })

</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="app">
    <h1>过滤案例</h1>
    <p><input type="text" v-model="search" placeholder="请输入要搜索的内容" @input="handleSearch"></p>
    <ul>
        <li v-for="item in newdataList">{{item}}</li>
    </ul>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: ['a','at','atom','be','beyond','cs','csrf','d','dddd',],
            newdataList:['a','at','atom','be','beyond','cs','csrf','d','dddd',],
        },
        methods: {
            handleSearch() {
                console.log('搜索的内容是：', this.search)
                // 简单写法
                this.newdataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
                
                var _this=this
                // 复杂写法
                this.newdataList=this.dataList.filter(item=>{
                    console.log(this)
// 判断this.search是否在item中，如果在保留，return true，如果不在返回false
                    if (item.indexOf(this.search)>=0){
                        return true
                    }else {
                        return  false
                    }
                })
                
            }
        }


    })

内置的数组过滤方法

   1 补充：数组过滤方法，内置的
    var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs',
        'csrf',
        'd',
        'dddd',
    ]
    // filter数组内置的，需要传一个匿名函数，接受一个参数，会循环的从数组中取出值，传入匿名函数，执行
    // 匿名函数返回true或false，如果返回true，该值保留，如果返回false该值丢弃
    l = l.filter(function (item) {
        console.log('进来一个值：',item)
        return false
    })
    console.log(l)

判断子字符串是否在字符串中

var s='tttatom'
    var a ='a'
    console.log(s.indexOf(a)>=0)

es6 模板字符串 `` 对象写法箭头函数

 var f=function (){
        console.log('打印了')
    }
    3.1 不带参数的箭头函数
    var f = () => {
        console.log('打印了')
    }

    3.2 带一个参数，没有返回值得箭头函数
    var f = name=>{
        console.log('打印了', name)
    }
    3.3 多个参数，没有返回值
    var f = (name,age) => {
        console.log('打印了', name,age)
    }
    3.4 带一个参数，有返回值，函数体只有一行

    var f = function (name) {
        return name+'nb'
    }
     var f = name=> name+'nb'

    有什么用？ 1 简洁  2 箭头函数没有自己的this,会用上一层的this


    var f = function () {
        console.log('匿名函数的this', this)
    }
    var f1 = () => {
        console.log('箭头函数的this', this)
    }

    var obj = {
        f: function () {
            console.log('匿名函数的this', this)
        },
        f1: () => {
            console.log('箭头函数的this', this)
        }
    }

    obj.f()
    obj.f1()

事件修饰符

修饰符	作用
.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 id="app">
    <h1>事件修饰符</h1>
    <h2>事件冒泡--通过 事件修饰符 stop ，加在子控件上，阻止事件冒泡</h2>
    <ul @click="handleUl">
        <li @click.stop="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>


    <h2>事件冒泡--通过 事件修饰符 self加在父控件上，只处理自己的事件</h2>
    <ul @click.self="handleUl">
        <li @click="handleMn">美女</li>
        <li @click="handleSg">帅哥</li>
    </ul>

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

    <h4>once只执行一次</h4>
    <button @click.once="handleOnce">点我秒杀</button>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleUl() {
                console.log('ul被点了')
            },
            handleMn() {
                console.log('美女被点了')
            },
            handleSg() {
                console.log('帅哥被点了')
            },
            handleA() {
                console.log('a被点了')
            },
            handleOnce() {
                console.log('恭喜你，秒到了')
            }
        }

    })


</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="app">
    <input type="text" v-model="search" placeholder="请输入搜索内容" @keyup.enter="handleUp">


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: ''
        },
        methods: {
            handleUp(event) {
                console.log('回车被按了')
                // if (event.code == 'Enter') {
                //     console.log('回车键被案例', event)
                // }
            }
        }

    })


</script>
</html>

表单控制

用 input：checkbox（单选，多选），radio（单选）

checkbox单选的时候需要使用布尔类型，多选使用数组

radio单选需要使用字符串类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单控制</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>表单控制</h1>
    <p>用户名: <input type="text" v-model="name"></p>
    <p>密码: <input type="text" v-model="password"></p>
    <p> <input type="checkbox" v-model="isRemember">记住密码</p>

    <p>
        性别:
        <input type="radio" v-model="gender" value="男">男
        <input type="radio" v-model="gender" value="女">女
        <input type="radio" v-model="gender" value="保密">保密
    </p>

    <p>
        爱好:
        <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">篮球
        <input type="checkbox" value="美女" v-model="hobby">美女
    </p>

</div>

</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'',
            password:'',
            isRemember:false,
            gender:'',
            hobby:[],
        }
    })
</script>

</html>

js中的for 循环

python中只有基于迭代的循环，没有基于索引的循环

js，java，go中有基于迭代和索引的两种

js中的for 循环的方式

1.for(i=0;i<checkGroup.length;i++) 基于索引的循环

2.for (i in checkGroup) 基于迭代的循环

3.for (i of checkGroup) es6中循环

4.数组内置方法.forEach()

5.jquery $.each 循环

    var goodList = [
        {id: 1, name: '小汽车', price: 1200000, count: 1},
        {id: 2, name: '钢笔', price: 12, count: 34},
        {id: 3, name: '鸡蛋', price: 2, count: 4},
        {id: 4, name: '面包', price: 9, count: 10},
    ]

	// 1 方式一：js的基于索引的循环
    for (var i = 0; i< goodList.length; i++) {
        console.log(goodList[i])
    }
    // 2 方式二：基于迭代的循环
    for (i in goodList){
        console.log(goodList[i])
    }

   // 3 方式三：of 循环，基于迭代的
      for (i of goodList){
        console.log(i)
    }
   // 4 方式四：数组的循环方法
    goodList.forEach(item => {
        console.log('---', item)
    })

   // 5 jquery:引入
    $.each(goodList, (i, v) => {
        console.log(v)
    })

购物车案例

结算

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

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <h1 class="text-center">购物车</h1>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名字</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in goodList">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td>{{good.count}}</td>
                        <td><input type="checkbox" v-model="checkGroup" :value="good"></td>
                    </tr>

                    </tbody>
                </table>
                <hr>
                选中的商品是：{{checkGroup}}
                <br>
                总价格是：{{getPrice()}}

            </div>
        </div>

    </div>

</div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '小汽车', price: 1200000, count: 1},
                {id: 2, name: '钢笔', price: 12, count: 40},
                {id: 3, name: '鸡蛋', price: 2, count: 50},
                {id: 4, name: '面包', price: 9, count: 10},
            ],
            checkGroup: []


        },
        methods: {
            getPrice() {
                // 取出checkGroup中得商品数量和商品价格相乘 做累加
                // js 中 for 循环
                var total = 0
                for (item of this.checkGroup) {
                    total += item.price * item.count
                }
                return total
            }
        }
    })

</script>
</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://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <h1 class="text-center">购物车</h1>
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>商品id</th>
                        <th>商品名字</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th><input type="checkbox" v-model="checkAll" @change="handleChange">全选/全不选</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="good in goodList">
                        <th>{{good.id}}</th>
                        <td>{{good.name}}</td>
                        <td>{{good.price}}</td>
                        <td><span class="btn link btn-sm" @click="handleDown(good)">-</span>{{good.count}}<span
                                class="btn link btn-sm" @click="good.count++">+</span>
                        </td>
                        <td><input type="checkbox" v-model="checkGroup" :value="good" @change="handleCheckOne"></td>
                    </tr>

                    </tbody>
                </table>
                <hr>
                选中的商品是：{{checkGroup}}
                <br>
                总价格是：{{getPrice()}}

            </div>
        </div>

    </div>

</div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            goodList: [
                {id: 1, name: '小汽车', price: 1200000, count: 1},
                {id: 2, name: '钢笔', price: 12, count: 34},
                {id: 3, name: '鸡蛋', price: 2, count: 4},
                {id: 4, name: '面包', price: 9, count: 10},
            ],
            checkGroup: [],
            checkAll: false,


        },
        methods: {
            getPrice() {
                var total = 0
                for (item of this.checkGroup) {
                    total += item.price * item.count
                }
                return total
            },
            handleChange() {
                if (this.checkAll) {
                    this.checkGroup = this.goodList
                } else {
                    this.checkGroup = []
                }
            },
            handleCheckOne() {
                // 如果checkGroup的长度等于goodList的长度，说明全选了，checkAll就应该变为true，否则就是false
                // if (this.checkGroup.length == this.goodList.length) {
                //     this.checkAll = true
                // } else {
                //     this.checkAll = false
                // }
                // 变短
                this.checkAll = this.checkGroup.length == this.goodList.length
            },
            handleDown(good) {
                if (good.count > 1) {
                    good.count--
                } else {
                    alert('不能再少了，受不了了')
                }

            }
        }
    })

</script>
</html>

v-model进阶（了解）

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

<!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>v-model进阶</h1>
    <input type="text" v-model.lazy="name1"> ---->{{name1}}
    <br>
    <input type="text" v-model.number="name2"> ---->{{name2}}
        <br>
    <input type="text" v-model.trim="name3"> ---->{{name3}}


</div>
</body>

<script>

    new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: '',
        },

    })
</script>
</html>

posted @ 2022-10-24 15:31 Nirvana* 阅读(75) 评论(0) 收藏举报

刷新页面返回顶部

nirvana001

Vue基础

Vue基础

模板语法

插值语法

指令系统

文本指令

事件指令

属性指令

style和class

style

class

条件渲染

列表渲染

v-if+v-for+v-else控制购物车商品的显示

v-for 循环数组，循环字符串，数字，对象

数组的检测与更新

双向数据绑定

事件处理

过滤案例

内置的数组过滤方法

判断子字符串是否在字符串中

es6 模板字符串 `` 对象写法箭头函数

事件修饰符

按键修饰符

表单控制

js中的for 循环

购物车案例

v-model进阶（了解）

公告

nirvana001

Vue基础

Vue基础

模板语法

插值语法

指令系统

文本指令

事件指令

属性指令

style和class

style

class

条件渲染

列表渲染

v-if+v-for+v-else控制购物车商品的显示

v-for 循环数组，循环字符串，数字，对象

数组的检测与更新

双向数据绑定

事件处理

过滤案例

内置的数组过滤方法

判断子字符串是否在字符串中

es6 模板字符串 `` 对象写法 箭头函数

事件修饰符

按键修饰符

表单控制

js中的for 循环

购物车案例

v-model进阶（了解）

公告

es6 模板字符串 `` 对象写法箭头函数