zoukankan      html  css  js  c++  java
  • vue学习笔记2 实例学习

    根据coderwhy002老师的视频整理

    1 使用计算属性:计算总价

    <body >
          <div id="app">
              总价 {{totalPrice}}
          </div>
        </body>
        
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                books:[
                     {id:1,name:'Unix编程艺术',price:99},
                     {id:2,name:'代码大全',price:100},
                     {id:3,name:'深入理解计算机原理',price:101},
                     {id:4,name:'现代操作系统',price:100},
                ]
            },
            computed:{
                totalPrice:function(){
                    let result =0
                    for(let i=0;i<this.books.length;i++){
                        result += this.books[i].price
                    }
                    return result
                }
            }
        })
    </script>
    View Code

     2 使用计算属性(完整写法 set与get)

        <body >
          <div id="app">
              计算属性的完整写法 {{fullName}}
          </div>
        </body>
        
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                firstName :'Kobe',
                lastName:'Bryant'
            },
            computed:{
                fullName:{
                    set:function(newValue){
                        let names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[1]
                    },
                    get:function(){
                        return this.firstName+' '+this.lastName
                    }
                }
            }
        })
    </script>
    View Code

    回车以后

     3 v-on修饰符

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>New Web Project</title>
            <script src="vue.js">
            </script>
            <style>
                .active {
                    background: #febeee;
                    width:100px;
                    height:100px;
                }
            </style>
        </head>
        
        <body >
          <div id="app">
            stop修饰符的使用 阻止冒泡事件
              <div class='active' @click='divClick'>
                  <button @click.stop='btnClick'>按钮</button>
              </div>
            </br>
                
            prevent 修饰符的使用 阻止默认事件
            <form action='http://www.baidu.com'>
                <input type='submit' value="提交" @click.prevent='submitClick'>
            </form>
            </br>
            
            {keyCode|keyAilas}只当事件是从特定键帽触发时才触发回调
            <input type='text' @keyup.enter='keyUp' >
            <br>
            once 只触发一次
            <button @click.once='btnClick2'>按钮2</button>    
          </div>
        </body>
        
    <script>
        const app = new Vue({
            el:'#app',
            methods:{
                btnClick(){
                    console.log('btnClick')
                },
                divClick(){
                    console.log('divClick')
                },
                submitClick(){
                    console.log('submitClick')
                },
                keyUp(){
                    console.log('keyUp')
                },
                btnClick2(){
                    console.log('btnClick2')
                }
            }
        })
    </script>
    
    </html>
    View Code

    4 v-if v-else-if v-else

        <body >
          <div id="app">
            <h2 v-if="score>90">优秀</h2>
            <h2 v-else-if="score>=80">良好</h2>
            <h2 v-else-if="score>60">及格</h2>
            <h2 v-else>不及格</h2>
          </div>
        </body>
        
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                score:99
            }
        })
    </script>
    View Code

    但不建议使用标签,而是使用计算属性比较好

        <body >
          <div id="app">
            <h2 >{{result}}</h2>
          </div>
        </body>
        
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                score:99
            },
            computed:{
                result(){
                    let showMessage=''
                    if(this.score>=90){
                        showMessage='优秀'
                    }else if(this.score>=80){
                        showMessage='良好'
                    }else if(this.score>=60){
                        showMessage='及格'
                    }else{
                        showMessage='不及格'
                    }
                    return showMessage
                }
            }
        })
    </script>
    View Code

    效果是一样的

     5 取消虚拟dom复用 key

        <body >
          <div id="app">
            <span v-if='isUserLogin'>
                <label for="username">帐号登录</label>
                <input type='text' id="username" placeholder='帐号登录' key='username'>
            </span>
            <span v-else>
                <label for="email">邮箱登录</label>
                <input type='text' id="email" placeholder='邮箱登录' key='email'>
            </span>
            <button @click="isUserLogin=!isUserLogin">切换类型</button>
          </div>
        </body>
        
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                isUserLogin:false
            }
        })
    </script>
    View Code

    加上key后 点切换类型后 原先输入的问题不会还存在

     6 数组的修改 set方法

                    push()
                    pop()
                    shift()
                    unshift()
                    splice()
                    sort()
                    reverse()
    Vue.set(this.letters,0,'bb')

        <body >
          <div id="app">
            <ul>
                <!-- <li v-for="item in letters" :key='item'> -->
                <!-- key不能重复,以免报错。当item为唯一值时 加上key可以将数组变成链 修改起来更方便 -->
                <li v-for="item in letters">    
                    {{item}}
                </li>
            </ul>
            <button @click='btnClick'>按钮</button>
          </div>
        </body>
        
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                letters:['z','a','b','c','d']
            },
            methods:{
                btnClick(){
                    //1.push方法 数组追加
                    this.letters.push('aa')
                    
                    //2.pop尾部删除
                    this.letters.pop()
                    
                    //3.shift头部删除
                    this.letters.shift()
                    
                    //4.unshift() 在数组最前面添加元素
                    this.letters.unshift('111','2222')
                    
                    //5 splice() 替换元素 删除元素
                    const start = 2 //在编号2之前插入
                    const len = 0//删除的长度 //如果什么都不传 则删除全部
                    this.letters.splice(start,len,'aaa','bbbb')
                    
                    //6 sort() 排序
                    this.letters.sort()
                    
                    //reverse() 反转
                    this.letters.reverse()
                    
                    //修改
                    //通过索引值修改数组中的元素 虽然改变了,但不能响应到dom上
                    this.letters[0]='bb'
                    
                    //修改的第一种方法
                    this.letters.splice(0,1,'bb')
                    
                    //修改的第二种方法
                    // set(要修改的对象,索引值,修改后的值)
                    Vue.set(this.letters,0,'bb') 
                    
                }
            }
        })
    </script>
    View Code
  • 相关阅读:
    大三小学期 Android开发的一些经验
    高德地图显示不出来
    imageview无法显示图片:java.lang.RuntimeException: Canvas: trying to draw too large(281520000bytes) bitmap
    设置ImageView显示的图片铺满全屏
    大三小学期 web前端开发的一些小经验
    HTML5----响应式(自适应)网页设计
    div闪一下就消失
    登录界面输入判断为空的bug
    Solr之.net操作
    Java Web之路(一)Servlet
  • 原文地址:https://www.cnblogs.com/polax/p/12852651.html
Copyright © 2011-2022 走看看