vue框架之基础语法等相关内容-111

2024-03-13 21:11:57

1 条件渲染

1.1 通过v-if和v-for实现购物车

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

        .green {
            background: green;
        }

        .font {
            font-size: 30px;
        }

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">

    <!--    土办法-->
    <!--    <ul>-->
    <!--        <li>{{shopping[0]}}</li>-->
    <!--        <li>{{shopping[1]}}</li>-->
    <!--        <li>{{shopping[2]}}</li>-->
    <!--    </ul>-->

    <!--v-for实现-->
    <ul v-if="shopping.length>0">
        <li v-for="data in shopping">{{data}}</li>
    </ul>
    <div v-else>购物车空空如也</div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            shopping: ['苹果', '香蕉', '桃子'],
        },

    })
</script>
</html>

1.2 v-if/v-else-if/v-else

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

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
    <div v-if="which==1">1111</div>
    <div v-else-if="which==2">2222</div>
    <div v-else>3333</div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            which:1
        },

    })
</script>
</html>

2 列表渲染

2.1 for循环数组，对象

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

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
    <h1>循环数组</h1>
    <div>
        <p v-for="data in arr">{{data}}</p>
    </div>
    <h1>循环对象</h1>
    <div>
        <p v-for="data in obj">{{data}}</p>
    </div>

    <h1>循环数组索引和value</h1>
    <div>
        <p v-for="(data,index) in arr">索引是：{{index}}，数据是{{data}}</p>
    </div>
    <h1>循环对象key和value</h1>
    <div>
        <p v-for="(value,key) in obj">key是：{{key}}，value是：{{value}}</p>
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            arr: ['zs', 'ls', 'ww'],
            obj: {name: 'lqz', age: 18, sex: '男'},
        },

    })
</script>
</html>

2.2 key值的解释

1 v-for循环数组，对象时，建议在控件（组件，标签）写一个key属性，属性值唯一
2 页面更新以后，加速dom的替换（渲染）,虚拟dom的替换diff算法
3 :key="变量"

2.2 数组更新与检测

0 数据双向绑定，数据变化，页面变，页面变化数据变
1 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
    -页面不会更改：vm.arr.concat(['44','55'])
    -解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
    -解决方案一：
    vm.arr[0]
    "11"
    vm.arr[0]='99'
    "99"
    vm.arr.splice(0,1,'88')
    ["99"]
    -解决方案二
        Vue.set(vm.arr,0,'lqz')

3 上面能更新是因为作者重写了那些方法

3 事件处理

3.1 input过滤案例

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

<div id="box">
    <!--
    blur:失去焦点触发
    change：失去焦点触发，跟blur一样
    input:数据发生变化，就会触发
    -->

<!--    <input type="text" v-model="myinput" @blur="handleChange">   {{myinput}}-->
<!--    <input type="text" v-model="myinput" @change="handleChange">   {{myinput}}-->
    <input type="text" v-model="myinput" @input="handleChange">   {{myinput}}
    <br>
    <div>
        <p v-for="data in new_arr">{{data}}</p>
    </div>




</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput:'',
            arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
            new_arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
        },
        methods:{
            handleChange(){
                console.log(this.myinput)
                //控制arr的变化，数据又双向绑定了，页面就会变化
                this.new_arr=this.arr.filter(item=>{
                    return item.indexOf(this.myinput) >-1
                })

            }
        }

    })
    //
    // var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
    // var res=a.filter(function (itme) {
    //     // if (itme.length >4){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     // if (itme.indexOf('aa')>-1){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     return itme.indexOf('a')>-1
    //
    // })
    //
    //
    // var res=a.filter(item=>{
    //     return itme.indexOf('a')>-1
    // })
    // console.log(res)
    //
    //
    // var a=function (a) {
    // }
    //
    // var a=a=>{}



</script>
</html>

3.2 简单事件

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

<div id="box">
    <button @click="isShow=!isShow">点我折叠，展开</button>
    <button @click="handleClick">点我折叠，展开2</button>
<!--    <button @click="handleClick($event)">点我折叠，展开2,传递event事件</button>-->
    <button @click="handleClick">点我折叠，展开2,传递event事件</button>
    <div v-show="isShow">
        我很好看
        <br>
        你也很好看呢
        <br>
        大家都好看

    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            isShow:true

        },
        methods:{
            handleClick(ev){
                console.log(ev)
                this.isShow=!this.isShow
            }
        }



    })
    //
    // var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
    // var res=a.filter(function (itme) {
    //     // if (itme.length >4){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     // if (itme.indexOf('aa')>-1){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     return itme.indexOf('a')>-1
    //
    // })
    //
    //
    // var res=a.filter(item=>{
    //     return itme.indexOf('a')>-1
    // })
    // console.log(res)
    //
    //
    // var a=function (a) {
    // }
    //
    // var a=a=>{}



</script>
</html>

3.3 事件修饰符

.stop 阻止事件冒泡
.self 只处理自己的事件，子控件冒泡的事件不处理

.prevent 阻止a链接跳转
.once 只处理一次就解绑(抽奖页面)

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

<div id="box">
    <ul @click.self="handleUl">
        <!--        <li v-for="data in datalist" @click="handleLi($event)">{{data}}</li>-->
        <!--        <li v-for="data in datalist" @click.stop="handleLi">{{data}}</li>-->
<!--        <li v-for="data in datalist" @click="handleLi">{{data}}</li>-->
        <li v-for="data in datalist" @click.once="handleLi">{{data}}</li>
    </ul>

    <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: ['111', '222', '333']

        },
        methods: {
            // handleLi(ev) {
            //     console.log('li被点击了')
            //     ev.stopPropagation()  //点击事件停止向父组件传递
            // },
            handleLi() {
                console.log('li被点击了')
            },
            handleUl() {
                console.log('Ul被点击了')
            },
            // handleA(ev){
            //     console.log('a被点击了')
            //     ev.preventDefault() //阻止a标签的跳转
            // }
            handleA() {
                console.log('a被点击了')
            }
        }
    })
</script>
</html>

3.4 按键修饰符

1 敲击回车键干一个事

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

<div id="box">

<!--    <input type="text" v-model="myinput" @keyup.enter="handleKey">-->
    <input type="text" v-model="myinput" @keyup.13="handleKey">
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput: ''

        },
        methods: {
            // handleKey(ev){
            //     console.log('xxx')
            //     console.log(ev)
            //     if(ev.keyCode==13){
            //         console.log('回车被按下了')
            //     }
            //
            // }
            handleKey() {
                console.log('回车被敲二零')

            }
        }


    })


</script>
</html>

4 数据双向绑定

4.1 v-model使用

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

<div id="box">
    <input type="text" v-model="myinput">
    <br>
    {{myinput}}
    <br>
    <textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
    <br>
    {{text}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput: '',
            text: '',
        },


    })


</script>
</html>

5 表单控制

5.1 checkbox选中

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

<div id="box">

    <h1>表单相关之checkbox</h1>
    <input type="checkbox" v-model="check">记住密码
    <br>
    {{check}}



</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            check: true,


        },


    })


</script>
</html>

5.2 多选

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

<div id="box">


    <h1>表单相关之checkbox多选</h1>
    <h3>你喜欢的女明星</h3>
    <input type="checkbox" v-model="checkgroup" value="lyf">刘亦菲
    <input type="checkbox" v-model="checkgroup" value="baby">baby
    <input type="checkbox" v-model="checkgroup" value="egon">egon
    <br>
    {{checkgroup}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
    
            checkgroup:[],

        },


    })


</script>
</html>

5.3 单选

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

<div id="box">
  
    <h1>表单相关之radio</h1>
    <input type="radio" v-model="ra" value="男">男
    <input type="radio" v-model="ra" value="女">女
    <input type="radio" v-model="ra" value="未知">未知
    <br>
    {{ra}}

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            ra:'',

        },


    })


</script>
</html>

5.4 购物车案例

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

<div id="box">


    <ul>
        <!--<li v-for="item in datalist">商品名字：{{item.name}},商品数量：{{item.number}}</li>-->
        <li v-for="item in datalist">
            <input type="checkbox" :value="item" v-model="checkgroup">
            {{item}}
        </li>
    </ul>
    <br>
    当前价格是：{{getPrice()}}
    <br>
    {{checkgroup}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [
                {name: '特斯拉', price: 10, number: 1, id: '1'},
                {name: '苹果', price: 3, number: 4, id: '2'},
                {name: '香蕉', price: 80, number: 6, id: '3'}
            ],
            checkgroup: [],

        },
        methods:{
            getPrice(){
                var sum_price=0
                for(i in this.checkgroup){
                    sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
                }
                return sum_price

            }
        }

    })


</script>
</html>

5.5 购物车之全选，全不选

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

<div id="box">

    <input type="checkbox" v-model="isAll" @change="handleCheck"> 全选/全不选
    <ul>
        <!--<li v-for="item in datalist">商品名字：{{item.name}},商品数量：{{item.number}}</li>-->
        <li v-for="item in datalist">
            <input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
            {{item}}
        </li>
    </ul>
    <br>
    当前价格是：{{getPrice()}}
    <br>
    {{checkgroup}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [
                {name: '特斯拉', price: 10, number: 1, id: '1'},
                {name: '苹果', price: 3, number: 4, id: '2'},
                {name: '香蕉', price: 80, number: 6, id: '3'}
            ],
            checkgroup: [],
            isAll:false,

        },
        methods:{
            getPrice(){
                var sum_price=0
                for(i in this.checkgroup){
                    sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
                }
                return sum_price

            },
            handleCheck(){
                // console.log('xxx')
                if(this.checkgroup.length>0){
                    this.checkgroup=[]
                }else {
                    this.checkgroup=this.datalist
                }

            },
            handleOne(){
                console.log('选中',this.checkgroup.length)
                console.log('总数据',this.datalist.length)

                if(this.checkgroup.length==this.datalist.length){
                    this.isAll=true
                }else {
                    this.isAll=false
                }
            }
        }

    })


</script>
</html>

码农公寓

1 条件渲染

1.1 通过v-if和v-for实现购物车

1.2 v-if/v-else-if/v-else

2 列表渲染

2.1 for循环数组，对象

2.2 key值的解释

2.2 数组更新与检测

3 事件处理

3.1 input过滤案例

3.2 简单事件

3.3 事件修饰符

3.4 按键修饰符

4 数据双向绑定

4.1 v-model使用

5 表单控制

5.1 checkbox选中

5.2 多选

5.3 单选

5.4 购物车案例

5.5 购物车之全选，全不选

相关文章