学习Vuejs-Day2

最新推荐文章于 2024-07-12 09:36:48 发布

Demon_K2021

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量93

点赞数

分类专栏： Vuejs 前端学习文章标签： vue.js html5

本文链接：https://blog.csdn.net/Demon_K2021/article/details/113805816

版权

前端学习同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Vuejs

2 篇文章 0 订阅

订阅专栏

1.计算属性里面有set方法和get方法

注：计算属性一般是没有set方法，只读属性

<body>
    <div id="app">
     <h2>{{fullName}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          firstName: 'kobe',
          lastName: 'Bryant'
        },
        computed: {
          fullName: {
            //如果需要设置fullName,可以有set方法,99%不写，省略掉set
            set: function (newValue) {
                console.log('-----');
                const names = newValue.split(' ');
                this.firstName = names[0];
                this.lastName = names[1];
            },
            get() {
              return this.firstName + ' ' + this.lastName;
            }
          }
        },
      });
    </script>
</body>

2.计算属性和methods的对比

1. 遇到n次使用,在fullName没有发生变化的条件下，计算属性只调用一次，建议使用计算属性，计算属性有缓存。
2. 遇到n次使用,methods(方法)调用n次
比较代码：

 <div id="app">
      <!-- 遇到n次使用,在fullName没有发生变化的条件下，计算属性只调用一次 -->
     <h2>{{fullName}}</h2>
     <h2>{{fullName}}</h2>
     <h2>{{fullName}}</h2>
     <h2>{{fullName}}</h2>

     <!-- 遇到n次使用,methods(方法)调用n次 -->
     <h2>{{getFullName()}}</h2>
     <h2>{{getFullName()}}</h2>
     <h2>{{getFullName()}}</h2>
     <h2>{{getFullName()}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          firstName: 'kobe',
          lastName: 'Bryant'
        },
        methods: {
          getFullName: function () {
            console.log('getFullName');
            return this.firstName + ' ' + this.lastName
          }
        },
        computed: {
          fullName: function () {
            console.log('fullName');
            return this.firstName + ' ' + this.lastName
          }
        }
        
      });
    </script>

3.ES6的补充

1.块级作用域

ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题，ES6中，加入了let，let它是有if和for的块级作用域

 <body>
  
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>  

  <script>
    // ES5之前因为if和for都没有块级作用域的概念，所以在很多时候，我们都必须借助于function的作用域
    // 来解决应用外面变量的问题
    // ES6中，加入了let，let它是有if和for的块级作用域
    
    // 2.没有块级作用域引起的问题： if的块级
    // var func;
    // if (true) {
    //   var name = 'why';
    //   func = function () {
    //     console.log(name);
    //   }
    // }
    // name = 'kobe'
    // func (); //想让name显示为 why,可是name的值发生了变化

    // 3.没有块级作用域引起的问题： for的块级
    // 想要的效果是：点击哪个按钮，显示哪个按钮被点击
    var btns = document.getElementsByTagName('button');
    //for (var i=0; i<btns.length; i++){
      // btns[i].addEventListener('click', function(){
      //   console.log('第' + i + '个按钮被点击');
      // }) 
      //可以解决的方法：1.用闭包
      // (function (i) {
      //   btns[i].addEventListener('click', function(){
      //     console.log('第' + i + '个按钮被点击');
      //   }) 
      // })(i)
      //可以解决的方法：2.用ES6的let
      for(let i = 0; i<btns.length; i++){
        btns[i].addEventListener('click', function(){
         console.log('第' + i + '个按钮被点击');
        })
      }
      
   // }
  </script>
</body>

2.const的使用

注意一：一旦给const修饰的标识符被赋值之后，不能修改
注意二：在使用const定义标识符，必须进行赋值
注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性

<body>
  <script>
    // 1.注意一：一旦给const修饰的标识符被赋值之后，不能修改
    // const name = 'why';
    // name = 'kebo'; 发生错误

    // 2.注意二：在使用const定义标识符，必须进行赋值
    // const name = ‘kebo’;

    // 3.注意三：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
    const obj = {
      name: 'why',
      age: 18,
      height: 1.88
    }
    console.log(obj);

    obj.name = 'kobe';
    obj.age = 40;
    obj.height = 1.87;
    
    console.log(obj);
  </script>
</body>

3.对象字面量的增强写法

 <script>
    // 1.属性的增强写法
    const name = 'why';
    const age = 18;
    const height = 1.88

    // ES5的写法
    // const obj = {
    //   // 键:值
    //   name: name,
    //   age: age,
    //   height: height
    // }
 
    // ES6的写法:更加简便
    // const obj = {
    //   name,
    //   age,
    //   height
    // }    
    // console.log(obj);

    // 2.函数的增强写法
    // ES5的写法
    // const obj = {
    //   run: function () {

    //   },
    //   eat: function (){

    //   }
    // }

    // ES6的写法:省略了function，更加简单
    const obj = {
      run() {

      },
      eat() {

      }
    }
  </script>

4.v-on的基本使用

1 . v-on事件监听，v-on的语法糖（就是可以简写成@，例如v-on:click可以简写成@click

    <div id="app" v-cloak>
     <h2>{{counter}}</h2>
     <!-- 
       <button v-on:click = "increment">+</button>
       <button v-on:click = "decrement">-</button> 
     -->
     <!-- v-on:的语法糖(简写)模式为@ -->
     <button @click = "increment">+</button>
     <button @click = "decrement">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          counter: 0
        },
        methods: {
          increment() {
            this.counter++
          },
          decrement() {
            this.counter--
          }
        }
      });
    </script>

2 .v-on的参数问题

在监听事件中，如果不需要参数，可以省略了小括号
在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数时，这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入到方法
方法定义时，如果需要event对象,写成$event，又需要其他参数

<body>
    <div id="app">
   
     <!--1.在监听事件中，如果不需要参数，可以省略了小括号  -->
     <button @click="btn1Click">按钮1</button>

     <!--2.在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数时，这个时候，Vue会默认
      将浏览器生产的event事件对象作为参数传入到方法  -->
     <button @click="btn2Click">按钮2</button>

     <!-- 方法定义时，如果需要event对象,写成$event，又需要其他参数 -->
     <button @click="btn3Click(123,$event)">按钮3</button>
    
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊'
        },
        methods: {
          btn1Click(){
            console.log("btn1Click");
          },
          btn2Click(event){
            console.log(event);
          },
          btn3Click(abc,event){
            console.log(abc,event);
          }
        }
      });
    </script>
</body>

3 .v-on的修饰符
<1>.stop修饰符的使用:停止冒泡
<2>.prevent修饰符的使用：阻止默认行为
<3>监听某个键盘的键帽
<4>.once修饰符的使用:点击回调只会触发一次

<body>
    <div id="app">
      <!-- 1. .stop修饰符的使用:停止冒泡-->
      <div @click="divClick">
        aaa
        <button @click.stop="btnClick">按钮</button>
      </div>

      <br>
      <!-- 2. .prevent修饰符的使用：阻止默认行为 -->
      <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
      </form>

      <br>
      <!-- 3.监听某个键盘的键帽 :下面是只监听回车键-->
      <input type="text" @keyup.enter="keyUp"> 

      <br>
      <!-- 4. .once修饰符的使用:点击回调只会触发一次 -->
      <button @click.once="but2Click">按钮2</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊'
        },
        methods: {
          divClick() {
            console.log("divClick");
          },
          btnClick() {
            console.log("btnClick");
          },
          submitClick() {
            console.log("sumbitClick");
          },
          keyUp() {
            console.log("keyUp");
          },
          but2Click() {
            console.log("but2Click");
          }
        }
      });
    </script>
</body>

5.条件判断

1.v-if 的使用

    <div id="app">
     <h2 v-if="isShow">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          isShow: true
        },
          methods: {}
      });
    </script>

2.v-if 和 v-else的使用

<body>
  <div id="app">
    <h2 v-if="isShow">
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      <div>abc</div>
      {{message}}
    </h2>
    <h2 v-else>isShow为false时，显示我</h2>
   </div>
   <script src="../js/vue.js"></script>
   <script>
     const app = new Vue({
       el: '#app',
       data: {
         message: '你好啊',
         isShow: true
       },
         methods: {}
     });
   </script>
</body>

3.v-if 和 v-else-if 和 v-else 的使用

     <p v-if="score>=90">优秀</p>
     <p v-else-if="score>=80">良好</p>
     <p v-else-if="score>=60">及格</p>
     <p v-else>不及格</p>

4.v-show 的使用
注意：v-if:当条件为false时，包含v-if指令的元素，根本不会存在dom中 ,v-if在实际开发中使用的多；v-show:当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none

<body>
    <div id="app">
     <!-- v-if:当条件为false时，包含v-if指令的元素，根本不会存在dom中 ,v-if在实际开发中使用的多-->
     <h2 v-if="isShow" id="aaa">{{message}}</h2>

     <!-- v-show:当条件为false时，v-show只是给我们的元素添加一个行内样式：display：none -->
     <h2 v-show="isShow" id="bbb">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          isShow: true
        },
        methods: {}
      });
    </script>
</body>

6.用户登录的案例

<body>
    <div id="app">
     <span v-if="isUser">
       <label for="username">用户账号</label>
       <input type="text" id="username" placeholder="用户账号" key="username">
     </span>
     <span v-else>
      <label for="eamil">用户邮箱</label>
      <input type="text" id="eamil" placeholder="用户邮箱" key="eamil">
     </span>
     <button @click="isUser = !isUser">切换类型</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          message: '你好啊',
          isUser: true
        },
        methods: {}
      });
    </script>
</body>

7.循环遍历

1.v-for遍历数组

<body>
    <div id="app">
     <!-- 1.在遍历的过程中，没有使用索引值(下标值) -->
     <ul>
       <li v-for="item in names"> {{item}}</li>    
     </ul>

     <!-- 2.在遍历的过程中，获取索引值 -->
     <ul>
      <li v-for="(item,index) in names">
        {{index+1}}.{{item}}
       </li>
     </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          names: ['why','kobe','james','curry']
        },
        methods: {}
      });
    </script>
</body>

2.v-for遍历对象

<body>
    <div id="app">
    <!-- 最原始的方法<li多的话，这种方法不切实际> -->
      <ul>
        <li>{{info.name}}</li>
        <li>{{info.age}}</li>
        <li>{{info.heigth}}</li>
      </ul>

     <!-- 1.在遍历对象的过程中，如果只是获取一个值，那么获取到的是value，不是键 -->
     <ul>
       <li v-for="item in info">{{item}}</li>
     </ul>

      <!-- 2.获取value和key,格式为：(value,key) -->
      <ul>
        <li v-for="(value,key) in info">{{value}}-{{key}}</li>
      </ul>

      <!-- 3.获得索引<不常用>,格式为：(value,key,index) -->
      <ul>
        <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
      </ul>

    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          info:{
            name: 'why',
            age:18,
            heigth:1.88
          }
        },
        methods: {}
      });
    </script>
</body>

3.v-for使用过程添加key

添加key的目的是提高更新虚拟dom

<body>
    <div id="app">
     <!-- 添加key的目的是提高更新虚拟dom -->
     <ul>
       <li v-for="item in letters" :key="item">{{item}}</li>
     </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          letters: ['A','B','C','D','E']
        },
        methods: {}
      });
    </script>
</body>

8.哪些数组的方法是响应式的

push()方法:在最后添加若干个元素
pop()方法:删除数组的最后一个元素
shift():删除数组中的第一个元素
unshift():在数组最前面添加元素
splice()作用：可以删除元素/插入元素/替换元素 (用的比较多)
1.删除元素：第二个元素传入你要删除几个元素(如果没有传，就删除后面所有的元素)
this.letters.splice(1,2)
2.替换元素：第二个元素，表示要替换几个元素，后面是用于替换前面的元素
this.letters.splice(1,2,‘ddd’,‘ggg’,‘xxx’)
3.插入元素：第二个元素为0，后面跟上要插入的元素
this.letters.splice(1,0,‘插入一个’,‘插入二个’)
sort():数组排序
reverse():翻转

Demon_K2021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习Vuejs-Day2

1.计算属性里面有set方法和get方法注：计算属性一般是没有set方法，只读属性<body> <div id="app"> <h2>{{fullName}}</h2> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app'
复制链接

扫一扫