vue.js学习笔记（三）

最新推荐文章于 2022-03-16 08:39:19 发布
最新推荐文章于 2022-03-16 08:39:19 发布
阅读量214 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010734213/article/details/84565739
版权

v-for

Vue中通过v-for指令来实现遍历数据渲染页面。

1. 遍历数组
  • v-for="item in items"
    item：迭代得到的数组元素别名。
    items：要遍历的数组，在vue的data中定义。
<div id="app">
    <ul>
        <li v-for="s in students">
            姓名：{{s.name}}，年龄：{{s.age}}，性别：{{s.gender}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            students:[
                {name:"zhangSan",age:21,gender:"male"},
                {name:"liSi",age:20,gender:"male"},
                {name:"xiaoHong",age:18,gender:"female"},
                {name:"xiaoLi",age:22,gender:"female"},
            ],
        }
    });
</script>
  • v-for="(item,index) in items"
    item：迭代得到的数组元素别名。
    index：迭代到的当前元素索引，从0开始。
    items：要遍历的数组，在vue的data中定义。
<div id="app">
    <ul>
       <li v-for="(s,index) in students">
            {{index+1}}、姓名：{{s.name}}，年龄：{{s.age}}，性别：{{s.gender}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            students:[
                {name:"zhangSan",age:21,gender:"male"},
                {name:"liSi",age:20,gender:"male"},
                {name:"xiaoHong",age:18,gender:"female"},
                {name:"xiaoLi",age:22,gender:"female"},
            ],
        }
    });
</script>
2. 遍历对象
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时：value是对象的属性
2个参数时，value是属性，key是键
3个参数时，value是属性，key是键，index是索引（从0开始）

<div id="app">
    <ul>
        <li v-for="(value,key,index) in person">
            {{index+1}}、{{key}} - {{value}}
        </li>
    </ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            person:{name:"李逍遥",age:19,gender:"男"}
        }
    });
</script>

当 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。
若数据项顺序被改变，Vue 不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
这个功能可以有效的提高渲染的效率。
要实现这个功能，则需要给Vue一些能跟踪每个节点的身份，从而重用和重新排序现有元素，因此需要为每项提供一个唯一 key 属性。
理想的 key 值是每项都有的且唯一的 id。
如：v-for="(item,index) in items" :key=index 此处使用绑定数组的索引index作为唯一的id

v-if和v-show

  1. 判断条件，结果为ture时，渲染页面元素
  • v-if：条件成立时才会被渲染
  • v-show：切换CSS属性display，因此会一直被渲染并且保留在dom中
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if & v-show</title>
    <style>
        .divColor{
           height: 100px;
            width: 100px;
            background-color:aquamarine;
        }
    </style>
</head>
<body>
<div id="app">
	<!-- 将 showVal 设值为相反值-->
    <button @click = "showVal= !showVal">切换</button><hr>
    <div class="divColor" v-if="showVal">v-if</div><hr>
    <div class="divColor" v-show="showVal">v-show</div>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            showVal : true,//设值为true
        }
    });
</script>
</body>
</html>

v-if和vi-show区别

  1. 当v-if和v-for出现在一起时，v-for优先级更高。即先遍历后判断条件
    <div id="app">
	<ul>
		<li v-for="s in students" v-if="s.gender == 'male'">
		    姓名：{{s.name}}，年龄：{{s.age}}，性别：{{s.gender}}
		</li>
	</ul>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data: {
                students:[
                    {name:"zhangSan",age:21,gender:"male"},
                    {name:"liSi",age:20,gender:"male"},
                    {name:"xiaoHong",age:18,gender:"female"},
                    {name:"xiaoLi",age:22,gender:"female"},
                ]
            }
        });
    </script>
  2. v-if 还可以结合 v-else、v-else-if使用。v-if可以单独使用。后两者不能，必须结合v-if使用。
    <div id="app">
    <p v-if="showVal"> showVal = v-if !!!</p>
    <p v-else> showVal = v-else !!!</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            showVal : true,
        }
    });
</script>

v-bind

html属性不能使用花括号{{}}进行数据绑定，因此只能使用v-bind指令
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。
表达式结果的类型除了字符串之外，还可以是对象或数组。
v-bind 可以简写：如 v-bind:class 简写成 :class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo</title>
    <style>
        div#box{
            width: 100px;
            height: 100px;
            color: bisque;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }

    </style>

</head>
<body>
<div id="app">
    <button @click="color='red'">red</button>
    <button @click="color='blue'">blue</button>
    <!-- <div id="box" :class="color">-->
    <div id="box" v-bind:class="color">
        BOX
    </div>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            color: "red",
        }
    });
</script>
</body>
</html>

计算属性：computed

本质就是方法，但是一定要返回数据。
页面渲染时，可以将该方法当成变量来使用

<div id="app">
    <p>{{dayFun}}</p><!--直接取方法名当变量使用即可-->
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            testTime:1368230400000,//毫秒值
        },
        //计算属性
        computed:{
            //转换成日期
            dayFun (){
                const date = new Date(this.testTime);
                return date.getFullYear()+"."+date.getMonth()+"."+date.getDay();
            }
        }
    });
</script>

监控：watch

用来监控数据的变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo-watch</title>
</head>
<body>
<div id="app">
    <!--双向绑定：监控数据变化-->
    <input type="text" v-model="msg">
    <p>修改前数据：{{oldValue}}，修改后数据：{{curValue}}</p>
</div>

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data: {
            msg:"20181010",
            curValue:"20181010",
            oldValue:"20181010",
        },
        watch:{
            msg(curVal,oldVal){
               this.curValue =  curVal;//当前数据
               this.oldValue =  oldVal;//上一步数据
            }
        }
    });
</script>
</body>
</html>
Jayin_chan
关注
专栏目录
1.定义Person类 属性： 姓名name、性别gender、年龄age、国籍nationality； 方法：吃饭eat、睡觉sleep，工作work。
weixin_46597615的博客
04-01 2996
【代码】1.定义Person类 属性： 姓名name、性别gender、年龄age、国籍nationality；方法：吃饭eat、睡觉sleep，工作work。
创建继承类Person的类Student
qq_40560963的博客
10-24 8967
//创建继承类Person的类Student class Person //创建父类person, {//定义父类中的变量,名字name,性别sex，年龄age. String name; String sex; int age;void getInfo(String n,String s,int a)//定义方法getInfo获取父类的信息。 { n
JavaScript面向对象编程
wulei4的专栏
05-12 99
8.1 JavaScript面向对象编程 许多Web开发人员对JavaScript的了解仅仅停留在简单的表单数据操作，以及浏览器DOM对象的简单操作上，以达到一些数据验证和动态页面的效果。所以当要实现的功能比较复杂时，写出的代码就显得凌乱并且难以维护，更不用说实现一个基于JavaScript的UI框架了。事实上，JavaScript 提供了完善的机制来实现面向对象的开发思想。 本章假...
定义一个Person类,其中包括:1.定义属性:姓名、年龄、民族作为成员变量。定义静态成员变量：人数2.定义构造方法：对成员变量进行初始化。3.定义多个方法：分别显示相应的属性值，例如getName(...
热门推荐
weixin_30576859的博客
10-09 4万+
题目显示不全，完整题目描述： （1）定义一个Person类，其中包括：1.定义属性：姓名；年龄；民族作为成员变量。定义静态成员变量：人数2.定义构造方法：对成员变量进行初始化。3.定义多个方法：分别显示相应的属性值，例如getName(){System.out.print("名称="+name+"；"); }4.定义一个方法“成长”：实现年龄的增加，每执行一次年龄增加1。5.定义一个静态...
ES6之清楚明白的使用类（class）
开心学前端 : )
11-20 766
定义 类是构造函数、原型链的语法糖。 定义类有两种方式 class Student { } var Student = class { } 某些浏览器可能无法解析es6及以上的语法，这时候需要通过babel将代码解析成浏览器可识别的语法，定义类的语法通过babel编译之后就是通过function定义的构造函数。 类和构造函数是一样的，通过new关键字创建，具有prototype属性 class Student{} var student = new Student() console.log(Stu
vue.js学习笔记
11-28
Vue.js学习笔记 Vue.js是一个轻量级的前端JavaScript框架，它以其易用性、灵活性和高效性而受到开发者的青睐。Vue的核心功能是能够将页面上的功能模块化开发，即通过组件化的方式构建前端界面，从而提高开发效率...
-vue.js学习笔记
最新发布
01-10
在Vue.js的学习过程中，了解JavaScript的基础知识是至关重要的，因为Vue.js是基于JavaScript构建的。以下是一些关于Vue.js和JavaScript核心概念的详细说明： 1. **日期对象**： 在JavaScript中，我们可以使用`Date...
Vue.js学习笔记之修饰符详解
12-09
在本篇学习笔记中，我们将深入探讨Vue.js中两个重要指令——`v-model`和`v-on`的修饰符，这些修饰符可以增强它们的功能，提供更灵活的使用方式。 **一、v-model的修饰符** 1. **.lazy**： `.lazy` 修饰符改变了`v...
Vue.js学习笔记之 helloworld
10-21
标题中提到的“Vue.js学习笔记之helloworld”表示这是一篇关于如何快速入门Vue.js的教程，通过创建一个简单的“Hello World!”程序来展示Vue.js的基本用法。描述中提到Vue.js具有轻量、高性能和可组件化的特点，同时...
入门Vue.js基础学习笔记记录，遇坑!
01-09
- **Vue.js** 是一种轻量级的前端JavaScript框架，用于构建用户界面。它专注于视图层，易于上手且灵活。 - **官网地址**：[Vue.js官方中文API文档](https://vuejs.bootcss.com/guide/)。这是学习Vue.js的基础资源之...
JavaScript第4章简答题4(创建一个构造函数Student,表示学生,要求如下:)
拂欢
06-02 5903
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建一个构造函数Student,表示学生</title> </head> <body> <div id="one"></div&g...
js 的对象--如何定义一个对象
weixin_30662539的博客
02-11 690
通过var object={} 对象字面量，可以叫对象直接量来自定义一个对象 对象自面量是一个表达式，这个表达式的每次运算都创建并初始化一个新对象。每次计算对象字面量的时候，也都会计算他的每个属性值。也眩光是说，如果在一个重复调用的函数中的循环体内使用了对象的直接量，它将创建很多新对象，并且每次创建的对象的属性值也有可能不同。 演示代码： 1 <script> 2 ...
Vue开发中常用的ES6新特性
前端达人
07-04 429
ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，正式发布与2015年6月。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序...
Vue课程学习笔记-day01
最爱谭先森的博客
06-19 233
1、介绍 1) 回顾 1. 底层代码操作 (古代，走路) 组件、页面布局 重构 交互 XMLHttpRequest(ajax) dom操作 DOM // 生成p标签 var p = document.createElement('p'); // 向p标签内部添加文本...
Vue的内部指令v-for
weixin_42354407的博客
02-17 261
v-for指令：解决模板循环问题 v-for 用来循环渲染一组 data 中的数组 形式 ：item in items items是指源数据数组，item是数组元素迭代的别名 基本用法： 模板写法： <li v-for=“ item in items”> {{item}} </li> js写法： const app = new Vue({ el:'app'...
Vue.set( target, key, value ) 设置数组元素/向响应式对象添加属性
weixin_41796631的博客
09-29 2万+
本文介绍Vue.set( target, key, value ) 的两个功能：1. 设置数据数组对象元素； 2.向响应式对象添加属性   &lt;div id="div"&gt; &lt;p &gt;{{items}}&lt;/p&gt; &lt;/div&gt; &lt;script&gt; var vm = new Vue({ el:"#div", data:
对于v-for中item in items中的理解
zhangjianshanshan的博客
01-24 2万+
困扰已久的问题是什么呢？这里我需要说的是其实就是对于v-for的理解 其实对于v-for也没有什么必要去理解，因为就是一个单纯的循环而已。对于这个循环，里面的问题以及他的内部属性是比较难理解的。 写个例子 这里我从官网上拿到的一个demo,这里你需要记住的是。对于v-for他就必须使用一种特殊的语法，item in items items代表的是数据中的数组，而我们说的这...
vue学生列表案例
fadsdsad的博客
03-16 1841
vue学生列表案例
typescript中的 接口
Wollens Blogs
06-15 824
typescript中接口的作用： 在面向对象的编程中，接口是一种规范的定义，他定义了行为和动作的规范，在程序设计里面，接口起到批量约束和定义标准的作用 一、接口对属性的约束 interface Person { name: string, age: number } function male(p: Person) { p.name; console.log(p...
Vue.js学习笔记：计算属性与依赖关系解析
关于Vue.js的学习笔记，本文主要探讨了两个关键点：计算属性（computed properties）的使用限制以及它们之间的依赖关系。 1. 计算属性与`vm`变量 在Vue实例的计算属性函数中，不应直接使用`vm`变量，因为计算属性在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值