vue：vue模板语法(二)

最新推荐文章于 2022-10-15 16:49:19 发布

慢羊羊6379.*?

最新推荐文章于 2022-10-15 16:49:19 发布

阅读量205

点赞数

本文链接：https://blog.csdn.net/weixin_49088841/article/details/108642956

版权

1、制作登录界面

vue的条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
       <div v-if="logintype=='username'">
            <p>{{name}}</p>
            <span>用户名:</span>
            <input type="text" placeholder="username" key='username'>
            <br>
            <span>密码&nbsp;&nbsp;&nbsp;:</span>
            <input type="text" placeholder="password">
            <br>
            <button v-on:click='changeName'>点我切换登录方式</button>
       </div>
        <div v-if="logintype=='email'">
            <p>{{name}}</p>
            <span>邮箱：</span>
            <input type="text" placeholder="username" key='email'>
            <br>
            <span>密码：</span>
            <input type="text" placeholder="password"><br>
            <button v-on:click='changeName'>点我切换登录方式</button>
   </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                name:'登录淘宝',
                username:'切换登录法方式',
                logintype:'username'
            },
            methods:{
                changeName(){       
                    this.logintype=this.logintype=='username'?this.username='email':this.username='username'
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

1.1vue面试必问之v-if和v-show的区别

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。一般来说， v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
在这里插入图片描述

2、v-on的指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on为元素添加一个事件，可以是单击事件或者双击悬停等事件 -->
        <button v-on:click='bclick'>单击事件</button>
        <button @dblclick='dbclicka'>双击事件</button>
        <button v-on:mouseover='lick'>悬停事件</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{

            },
            methods:{
                bclick:function(){
                    alert('我是单击事件')
                },
                dbclicka(){
                    alert('我是双击事件')
                },
                lick(){
                    alert('我是鼠标悬停')
                }
            }
        })
    </script>
</body>
</html>

用v-on模拟淘宝购物车做计数器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click='inclick'>增加</button>
        <label for="">{{number}}</label>
        <button v-on:click='declick'>减少</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                number:0
            },
            methods:{
                
                inclick(){
                    if(this.number<4){
                        this.number += 1
                    }
                    else{
                        alert('在买破产了，要剁手了')
                                        
                },
                declick(){
                    if (this.number>0) {
                        this.number -= 1
                    }
                    else{
                        alert('没有了，在减不了了')
                    }                    
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

3、循环v-for

循环列表和对象
(v,index)是位置参数，v对应值，index对应索引和关键字无关可以去掉括号，不能改变位置
(v,k)是位置参数，v对应值，k对应key和关键字无关可以去掉括号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{books}}
    
        <table>
            <tr> 
                <td>序号</td>
                <td>标题</td>
                <td>作者</td>
            </tr> 
            <!-- index是索引,tr代表一行 td代表一列，可以去掉括号 -->
            <tr v-for='（book,index） in books'>
                <td>{{index+1}}</td>
                <td>{{book.title}}</td>
                <td>{{book.author}}</td>
            </tr>           
        </table>
        <!-- (v,k)是位置参数，v对应值，k对应key和关键字无关可以去掉括号 -->
        <div v-for='(v,k) in person'>{{k}}:{{v}}</div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:[
                    {title:'python',author:'龟叔'},{title:'php',author:'黑猫警长'},{title:'java',author:'虹猫'}
                ],
                person:{
                    username:'beiyue',
                    age:18,
                    gender:'male'
                }
            },
            methods:{

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

在这里插入图片描述

4、保持循环状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for='book,index in books' v-bind:key='book'>{{index+1}}:{{book}}
            <input type="text" v-bind:placeholder="book" >
        </div>
        
        <button v-on:click='change'>点击给书排名</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:['python','java','php','c++']
            },
            methods:{
                change(){
                    this.books.sort(function(a,b){
                        return 5 - parseInt(Math.random()*10)
                        // 冒泡排序，将小的数在与下一个数比较parseInt:给小数取整，Math。random()随机生成一个小于1大于0的整数
                    })
                }

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

在这里插入图片描述

5、触发视图的更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-for='book in books'>
            <span>{{book}}</span>
        </div>
        <ul>
            <li v-for='v,k in person'>{{k}}:{{v}}</li>
        </ul>
        <button @click='update'>更新视图</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:['python','java','php','c++'],
                person:{username:'beiyuw'}
            },
            methods:{
                update(){
                    // 用this.book[0]='Python'是无法更新视图的
                    // this.books[0]='Python'
                    // 用Vue.set(this.book,想改的数组位置，想改成什么)
                    // Vue.set(this.books,0,'Python')
                    // this.books.push('beiyue'...) 在列表末尾追加一个或多个元素
                    // this.books.unshift('beiyue'...) 在列表开头追加以一个或多个元素
                    // this.books.pop() 删除数组的最后一个
                    // this.books.shift()删除数组的第一个
                    // 向数组添加删除替换一个函数三个功能
                    // this.books.splice(0,0,'beiyuw')向数组开头添加数据,覅一个数代表位置可以设任意值，第二个只能设0一直加或1只能加一个
                    // this.books.splice(0,2) 从列表开头开始删除2个元素
                    // this.books.splice(0,2,'北月')从第0个元素开始，将2个元素替换为北月
                    // this.books.splice(1,2,'北月')从第1个元素开始，将2个元素替换为北月
                    // this.books.reverse()反转列表
                    // 操作对象
                    // this.person.username='heihei'可以直接更新对象的元素
                    // this.person.age=18不能添加属性
                    // Vue.set(this.person,'age',18)可以往对象中添加属性

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

6、传入event参数修改事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
   
</head>
<body>
    <div id="app">
        <button v-on:click='sub(2, $event)' value="点击" name="juran">点击</button>
        <!-- 事件修饰符 -->
        <a href="https://www.baidu.com/" v-on:click='goto($event)'>百度一下</a>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            methods: {
                sub(value, event){
                    console.log(value)
                    console.log(event)
                    console.log(event.target.value)
                },
                goto(event){
                    // 阻止本身跳转
                    event.preventDefault();
                    window.location = 'https://cn.vuejs.org/v2/guide/syntax.html'
                }      
            }
        })
    </script>
</body>
</html>

7、v-model双向绑定

<div id="app">
        <input type="text" v-bind:value='message'>
        <p>{{message}}</p>
        <input type="text" name="" id="" v-model:value='message'>
    </div>
    <script>
        new Vue({
           el:'#app',
           data:{
                message:'hello world'
           } ,
           methods:{

           }
        })