当前位置: 首页 > news >正文

Vue2之完整基础介绍和指令与过滤器

Vue2之基础介绍和指令与过滤器

  • 一、简介
    • 1、概念
    • 2、vue的两个特性
      • 2.1 数据驱动视图
      • 2.2 双向数据绑定
    • 3、MVVM
  • 二、vue基础用法
    • 1、导入vue.js的script脚本文件
    • 2、在页面中声明一个将要被vue所控制的DOM区域
    • 3、创建vm实例对象(vue实例对象)
    • 4、样例完整代码
  • 三、指令与过滤器
    • 1、指令的概念
    • 2、六大类指令
    • 3、内容渲染指令
      • 3.1 介绍
      • 3.2 三个种类
      • 3.3 v-text
      • 3.4 插值表达式
      • 3.5 v-html
      • 3.6 完整代码
    • 4、v-bind 属性绑定指令
      • 4.1 v-bind
      • 4.2 完整代码
    • 5、在插值和属性绑定中编写JS语句
      • 5.1 用插值表达式计算
      • 5.2 操作插值表达式的内容
      • 5.3 动态拼接内容
      • 5.4 完整代码
    • 6、v-on 事件绑定指令
      • 6.1 v-on介绍
      • 6.2 函数的简写形式
      • 6.3 完整代码
      • 6.4 通过this访问数据源中的数据
      • 6.5 v-on的简写形式
      • 6.6 $event
      • 6.7 注意
    • 7、@click 事件修饰符
      • 7.1 介绍
      • 7.2 示例代码
      • 7.3 完整代码
    • 8、@keyup 按键修饰符
      • 8.1 介绍
      • 8.2 示例代码
      • 8.3 完整代码
    • 9、v-model 双向数据绑定
      • 9.1 双向数据绑定指令
      • 9.2 适用环境
      • 9.3 相关代码
      • 9.4 完整代码
    • 10、v-model 指令修饰符
      • 10.1 三种修饰符
      • 10.2 完整代码
    • 11、条件渲染指令
      • 11.1 介绍
      • 11.2 两种渲染指令
      • 11.3 完整代码
      • 11.4 注意
    • 12、v-if 配套指令
      • 12.1 v-else
      • 12.2 完整代码
    • 13、列表渲染指令
      • 13.1 介绍
      • 13.2 v-for中的索引
      • 13.3 示例代码
      • 13.4 使用key值得注意事项
      • 13.5 完整代码

一、简介

1、概念

Vue是一套用于构建用户界面的前端框架。

2、vue的两个特性

2.1 数据驱动视图

在使用了vue的页面中,vue会监听数据的变化,从而自动重新渲染页面的结构。
(1)优点
当页面数据发生变化时,页面会自动重新渲染。
(2)注意
数据驱动视图是单向的数据绑定。

2.2 双向数据绑定

在填写表单时,双向数据绑定可以辅助开发者在不操作DOM的前提下,自动把用户填写的内容同步到数据源中。
在网页中,form表单负责采集数据,Ajax负责提交数据。
js数据的变化,会被自动渲染到页面上
页面上表单采集的数据发生变化的时候,会被vue自动获取到,并更新到js数据中。
(1)优点
开发者不再需要手动操作DOM元素,来获取表单元素最新的值。

3、MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model层、View层和ViewModel层。
Model表示当前页面渲染时,所依赖的数据源。
View表示当前页面所渲染的DOM结构
ViewModel表示vue的实例,它是MVVM的核心

二、vue基础用法

1、导入vue.js的script脚本文件

<script src="./lib/vue-2.6.14.js"></script>

2、在页面中声明一个将要被vue所控制的DOM区域

<div id="app">{{username}}</div>

3、创建vm实例对象(vue实例对象)

const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: 'zhangsan'}
})

4、样例完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">{{username}}</div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: 'zhangsan'}})</script>
</body>
</html>

三、指令与过滤器

1、指令的概念

指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。

2、六大类指令

(1)内容渲染指令
(2)属性绑定指令
(3)事件绑定指令
(4)双向绑定指令
(5)条件渲染指令
(6)列表渲染指令

3、内容渲染指令

3.1 介绍

内容渲染指令用来辅助开发者渲染DOM元素的文本内容

3.2 三个种类

(1)v-text
(2){{}}
(3)v-html

3.3 v-text

(1)相关应用

 <p v-text="username">姓名:</p>

(2)结果
在这里插入图片描述

(3)缺点
v-text指令会覆盖元素内默认的值

3.4 插值表达式

(1)介绍
vue提供的{{}}语法,专门用来解决v-text会覆盖默认文本内容的问题。这种{{}}语法的专业名称是插值表达式。在实际开发中用的最多,只是内容的占位符,不会覆盖原有的内容。
(2)相关应用

<p>性名:{{username}} </p>

(3)结果
在这里插入图片描述
(4)注意
插值表达式只能用在元素的内容节点中,不能用在元素的属性节点中。

3.5 v-html

(1)介绍
v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到v-html。
(2)相关应用

<div v-html="info"></div>

(3)结果
在这里插入图片描述

3.6 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p v-text="username"></p><p v-text="gender"></p><hr><p>性名:{{username}} </p><p>性别:{{gender}} </p><hr><div v-html="info"></div></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: 'zhangsan',gender: '女',info: '<h4 style="color:red; font-weight:blod;">你好,世界</h4>'}})</script>
</body>
</html>

4、v-bind 属性绑定指令

4.1 v-bind

(1)介绍
v-bind属性绑定指令为元素的属性动态绑定属性值。
(2)相关应用

<input type="text" v-bind:placeholder="tips">

(3)结果
在这里插入图片描述

(4)v-bind也可以简写成 : ,作用是一样的

<img :src="photo" alt="" style="width:150px">

4.2 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="text" v-bind:placeholder="tips"><hr><img :src="photo" alt="" style="width:150px"></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {tips: '请输入用户名',photo: 'https://img-home.csdnimg.cn/images/20201124032511.png'}})</script>
</body>
</html>

5、在插值和属性绑定中编写JS语句

5.1 用插值表达式计算

<div>1 + 2的结果是:{{1 + 2}}</div>

结果
在这里插入图片描述

5.2 操作插值表达式的内容

<div>{{tips}},反转后为:{{tips.split('').reverse().join('')}}</div>

结果
在这里插入图片描述

5.3 动态拼接内容

在使用v-bind属性绑定期间,如果绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号。

<div :title="'box' + index">这是一个div</div>

5.4 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div>1 + 2的结果是:{{1 + 2}}</div><div>{{tips}},反转后为:{{tips.split('').reverse().join('')}}</div><div :title="'box' + index">这是一个div</div></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {tips: '请输入用户名',photo: 'https://img-home.csdnimg.cn/images/20201124032511.png',index: 3}})</script>
</body>
</html>

6、v-on 事件绑定指令

6.1 v-on介绍

vue提供了v-on事件绑定指令,用来辅助程序员为DOM元素绑定事件监听。

6.2 函数的简写形式

: function() 可以简写为()

 add: function(){}   ===   add(){}       

6.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p>count的值是: {{count}}</p><button v-on:click="add">展示1</button><button v-on:click="sub">展示2</button></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {count: 0},// methods的作用就是定义事件的处理函数methods: {add: function(){console.log('ok')},sub(){console.log('触发了sub处理函数')}}})</script>
</body>
</html>

6.4 通过this访问数据源中的数据

(1)相关应用

sub(){this.count -= 1
}

(2)绑定事件并传参

1.body里的代码
<button v-on:click="add(2)">+1</button>2.methods里的代码
add(n){// vm.count += nthis.count += n
}

(3)相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p>count的值是: {{count}}</p><!--绑定事件处理函数的时候,可以使用()传递参数--><button v-on:click="add(2)">+1</button><button v-on:click="sub">-1</button></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {count: 0},// methods的作用就是定义事件的处理函数methods: {add(n){// vm.count += nthis.count += n},sub(){this.count -= 1}}})</script>
</body>
</html>

6.5 v-on的简写形式

v-on可以简写为@

 <button v-on:click="add">+1</button>等价于<button @click="add">+1</button>

6.6 $event

(1)介绍
vue提供了内置变量,叫做event,它就是原生DOM的事件对象。(2)应用场景当函数开始传参,而又想要控制该DOM对象时,则可以通过event,它就是原生DOM的事件对象。 (2)应用场景 当函数开始传参,而又想要控制该DOM对象时,则可以通过event,它就是原生DOM的事件对象。(2)应用场景当函数开始传参,而又想要控制该DOM对象时,则可以通过event来操作。
(3)相关代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p>count的值是: {{count}}</p><button v-on:click="add(1, $event)">+1</button></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {count: 0},// methods的作用就是定义事件的处理函数methods: {add(n,e){// vm.count += nthis.count += n// 判断this.count的值是否为偶数if(this.count % 2 === 0){// 偶数e.target.style.backgroundColor = 'red'} else {// 奇数e.target.style.backgroundColor = ''}},}})</script>
</body>
</html>

6.7 注意

原生DOM对象有onclick、oninput、onkeyup等原生事件,替换为vue的事件绑定形势后为v-on:click、v-on:input、v-on:keyup

7、@click 事件修饰符

7.1 介绍

在事件处理函数中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求。
.prevent 阻止默认行为(例如阻止链接的跳转,表单的提交)
.stop 阻止事件冒泡。
.capture 以捕获模式触发当前的事件处理函数。
.once 绑定的事件只触发1次。
.self 只有在event.target是当前元素自身时,触发事件处理函数。

7.2 示例代码

阻止链接跳转

<a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a>

7.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页</a></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {count: 0},// methods的作用就是定义事件的处理函数methods: {show(){console.log("点击了链接")}}})</script>
</body>
</html>

8、@keyup 按键修饰符

8.1 介绍

在监听键盘事件时,需要判断详细的按键,可以为键盘相关的事件添加按键修饰符。

8.2 示例代码

<input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">

8.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax"></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {},// methods的作用就是定义事件的处理函数methods: {clearInput(e){console.log("触发了clearInput方法")e.target.value = ''},commitAjax(){console.log('触发了commitAjax请求')}}})</script>
</body>
</html>

9、v-model 双向数据绑定

9.1 双向数据绑定指令

vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下,快速获取表单的数据。

9.2 适用环境

(1)input输入框
type=“radio”
type=“checkbox”
type=“xxxxx”
(2)textarea
(3)select

9.3 相关代码

<p>用户的名字是:{{username}}</p>
<input type="text" v-model="username">
<hr>
<select v-model="city"><option value="">请选择城市</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option>
</select>

9.4 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p>用户的名字是:{{username}}</p><input type="text" v-model="username"><hr><select v-model="city"><option value="">请选择城市</option><option value="1">北京</option><option value="2">上海</option><option value="3">广州</option></select></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {username:'zhangsan',city: '2'},// methods的作用就是定义事件的处理函数methods: {}})</script>
</body>
</html>

10、v-model 指令修饰符

10.1 三种修饰符

(1)第一种修饰符
.number 自动将用户的输入值转为数值类型

 <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1 + n2}}</span>

(2)第二种修饰符
.trim 自动过滤用户输入的首尾空白字符

<input type="text" v-model.trim="username">

(3)第三种修饰符
.lazy 在"change"时而非"input"时更新

<input type="text" v-model.lazy="username">

10.2 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{n1 + n2}}</span><hr><input type="text" v-model.trim="username"><button @click="showName">获取用户名</button><hr><input type="text" v-model.lazy="username"></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {username: "lisi",n1: 1,n2: 2},// methods的作用就是定义事件的处理函数methods: {showName(){console.log(`用户名是:"${this.username}"`)}}})</script>
</body>
</html>

11、条件渲染指令

11.1 介绍

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。

11.2 两种渲染指令

(1)v-if
原理:每次动态创建或移除元素,实现元素的显示和隐藏。
环境:如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时v-if性能更好。

<p v-if="flag">这是被v-if控制的元素</p>

(2)v-show
原理:每次动态为元素添加或移除display : none样式,来实现元素的显示和隐藏。
环境:如果要频繁地切换元素的显示状态,用v-show性能会更好。

<p v-show="flag">这是被v-show控制的元素</p>

11.3 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><p v-if="flag">这是被v-if控制的元素</p><p v-show="flag">这是被v-show控制的元素</p></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {// 如果 flag 为true,则显示被控制的元素,如果为false则隐藏被控制的元素flag: true},// methods的作用就是定义事件的处理函数methods: {}})</script>
</body>
</html>

11.4 注意

在实际开发中,绝大多数情况,不用考虑性能问题,直接用v-if就好了。

12、v-if 配套指令

12.1 v-else

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else></div>

12.2 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div v-if="type === 'A'">优秀</div><div v-else-if="type === 'B'">良好</div><div v-else-if="type === 'C'">一般</div><div v-else></div></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {// 如果 flag 为true,则显示被控制的元素,如果为false则隐藏被控制的元素flag: true,type: 'A'},// methods的作用就是定义事件的处理函数methods: {}})</script>
</body>
</html>

13、列表渲染指令

13.1 介绍

vue提供了v-for列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法。
其中
items是待循环的数组
item是被循环的每一项

13.2 v-for中的索引

v-for指令支持一个可选的第二个参数,即当前项的索引。语法格式为(item, index) in items
注意:v-for指令中的item项和Index索引都是形参,可以根据需要进行重命名。

13.3 示例代码

<tr v-for="(item,index) in list" :key="item.id" :title="item.name + index"><td>{{index}}</td><td>{{item.id}}</td><td>{{item.name}}</td>
</tr>

13.4 使用key值得注意事项

(1)key的值只能是字符串或数字类型
(2)key的值必须具有唯一性(key的值不能重复)
(3)建议把数据项id属性的值作为key的值(因为id属性的值具有唯一性)
(4)使用Index的值当做key的值没有任何意义(因为index的值不具有唯一性)
(5)建议使用v-for指令时一定要指定key的值(既提升性能,又防止列表状态紊乱)

13.5 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body><div id="app"><table class="table table-bordered table-hover table-striped"><thead><th>索引</th><th>ID</th><th>姓名</th></thead><tbody><tr v-for="(item,index) in list" :key="item.id" :title="item.name + index"><td>{{index}}</td><td>{{item.id}}</td><td>{{item.name}}</td></tr></tbody></table></div><!--1.导入Vue的库文件,在window全局就有了Vue这个构造函数--><script src="./lib/vue-2.6.14.js"></script><!--2.创建Vue的实例对象--><script>// 创建Vue的实例对象// 相当于 ViewModel层const vm = new Vue({// el属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器// 相当于 view层el: '#app',// data对象就是要渲染到页面上的数据// 相当于 model层data: {list:[{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}]},// methods的作用就是定义事件的处理函数methods: {}})</script>
</body>
</html>

相关文章:

Vue2之完整基础介绍和指令与过滤器

Vue2之基础介绍和指令与过滤器一、简介1、概念2、vue的两个特性2.1 数据驱动视图2.2 双向数据绑定3、MVVM二、vue基础用法1、导入vue.js的script脚本文件2、在页面中声明一个将要被vue所控制的DOM区域3、创建vm实例对象&#xff08;vue实例对象&#xff09;4、样例完整代码三、…...

JY-7A/3DK/220 19-130V静态【电压继电器】

系列型号 JY-7A/1DK不带辅助电源电压继电器&#xff1b;JY-7B/1DK不带辅助电源电压继电器&#xff1b; JY-7/1DK/120不带辅助电源电压继电器&#xff1b;JY-7/1DK/120不带辅助电源电压继电器&#xff1b; JY-7A/1DKQ不带辅助电源电压继电器&#xff1b;JY-7B/1DKQ不带辅助电源…...

[ECCV 2018] Learning to Navigate for Fine-grained Classification

Contents MethodNavigator-Teacher-Scrutinizer Network (NTS-Net)Navigator and TeacherScrutinizerNetwork architectureJoint training algorithmExperimentReferencesMethod Navigator-Teacher-Scrutinizer Network (NTS-Net) Approach Overview:NTS-Net 在不使用额外的 …...

关于apifox和postman接口工具我有话要说~~

Apifox 和 Postman 都是流行的接口测试工具&#xff0c;各自有其优势和缺点。Apifox 的优势在于它提供了强大的可视化界面&#xff0c;可以方便地测试和监控 API。它还支持多种请求方式&#xff0c;并且支持对请求和响应进行代码生成。但是&#xff0c;Apifox 的缺点在于它不太…...

Vue3通透教程【二】更高效的构建工具—Vite

文章目录&#x1f31f; 写在前面&#x1f31f; webpack&#x1f31f; Vite是什么&#xff1f;&#x1f31f; 使用Vite创建项目&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更…...

前端中如何判断在线状态?

判断在线状态为了判断浏览器的在线状态&#xff0c;HTML5提供了两种方法来检测是否在线。&#xff08;1&#xff09;onLine属性&#xff1a;通过navigator对象的onLine属性可返回当前是否在线。如果返回true&#xff0c;则表示在线&#xff1b;如果返回false&#xff0c;则表示…...

[MySQL教程①] - MySQL的安装

目录 ❤ Windows下安装MySQL ❤ 下载mysql installer安装 ❤ 下载zip安装包安装 现在作为服务器操作系统的一般有三种&#xff0c;Windows Server&#xff0c;Linux&#xff0c;Unix&#xff0c;在这里我们只介绍在windows下和linux下安装mysql&#xff0c;Unix下安装应该…...

第八节 Linux 设备树

Linux3.x 以后的版本才引入了设备树&#xff0c;设备树用于描述一个硬件平台的板级细节。在早些的linux内核&#xff0c;这些“硬件平台的板级细节”保存在linux 内核目录“/arch”&#xff0c;以ARM 平台为例“硬件平台的板级细节”保存在“/arch/arm/plat-xxx”和“/arch/arm…...

一文了解kafka消息队列,实现kafka的生产者(Producer)和消费者(Consumer)的代码,消息的持久化和消息的同步发送和异步发送

文章目录1. kafka的介绍1.2 Kafka适合的应用场景1.2 Kafka的四个核心API2. 代码实现kafka的生产者和消费者2.1 引入加入jar包2.2 生产者代码2.3 消费者代码2.4 介绍kafka生产者和消费者模式3. 消息持久化4. 消息的同步和异步发送5. 参考文档1. kafka的介绍 最近在学习kafka相关…...

数学建模学习笔记(20)典型相关分析

典型相关分析概述&#xff1a;研究两组变量&#xff08;每组变量都可能有多个指标&#xff09;之间的相关关系的一种多元统计方法&#xff0c;能够揭示两组变量之间的内在联系。 典型相关分析的思想&#xff1a;把多个变量和多个变量之间的相关化为两个具有代表性的变量之间的…...

EL表达式

EL的概念JSP表达式语言&#xff08;EL&#xff09;使得访问存储在JavaBean中的数据变得非常简单。EL的作用用于替换作用域对象.getAttribute("name");3. EL的应用&#xff08;获取基本类型、字符串&#xff09;既可以用来创建算术表达式也可以用来创建逻辑表达式。在…...

优先级队列(PriorityQueue 和 Top-K问题)

一、PriorityQueue java中提供了两种优先级队列&#xff1a;PriorityQueue 和 PriorityBlockingQueue。其中 PriorityQueue 是线程不安全的&#xff0c;PriorityBolckingQueue 是线程安全的。 PriorityQueue 使用的是堆&#xff0c;且默认情况下是小堆——每次获取到的元素都是…...

计算机组成与设计04——处理器

系列文章目录 本系列博客重点在深圳大学计算机系统&#xff08;3&#xff09;课程的核心内容梳理&#xff0c;参考书目《计算机组成与设计》&#xff08;有问题欢迎在评论区讨论指出&#xff0c;或直接私信联系我&#xff09;。 第一章 计算机组成与设计01——计算机概要与技…...

IT行业那么辛苦,我们为什么还要选择它?

疫情三年&#xff0c;我们学会了什么&#xff1f;工作诚可贵&#xff0c;技能价更高。 搞IT辛苦&#xff1f;有啥辛苦的&#xff1f;说什么辛苦&#xff1f;能有工作&#xff0c;工资又高&#xff0c;还要什么自行车&#xff0c;有啥搞啥吧&#xff01;每次看到网络上有人问有…...

PyTorch学习笔记:nn.CrossEntropyLoss——交叉熵损失

PyTorch学习笔记&#xff1a;nn.CrossEntropyLoss——交叉熵损失 torch.nn.CrossEntropyLoss(weightNone, size_averageNone, ignore_index-100, reduceNone, reductionmean, label_smoothing0.0)功能&#xff1a;创建一个交叉熵损失函数&#xff1a; l(x,y)L{l1,…,lN}T&…...

【VictoriaMetrics】什么是VictoriaMetrics

VictoriaMetrics是一个快速、经济、可扩展的监控解决方案和时间序列数据库,有单机版和集群版本,基础功能及集群版本基本功能不收费,VictoriaMetrics有二进制安装版本、Docker安装版本等多种安装方式,其源码及部署包更新迭代很快,VictoriaMetrics具有以下突出特点: 它可以作…...

(第五章)OpenGL超级宝典学习:统一变量(uniform variable)

统一变量 前言 本篇在讲什么 本篇记录对glsl中的变量uniform的认知和学习 本篇适合什么 适合初学Open的小白 适合想要学习OpenGL中uniform的人 本篇需要什么 对C语法有简单认知 对OpenGL有简单认知 最好是有OpenGL超级宝典蓝宝书 依赖Visual Studio编辑器 本篇的特色 …...

数据存储技术复习(四)未完

1.什么是NAS。一般用途服务器与NAS设备之间有何不同。NAS是一个基于IP的专用高性能文件共享和存储设备。—般用途服务器可用于托管任何应用程序&#xff0c;因为它运行的是一般用途操作系统NAS设备专用于文件服务。它具有专门的操作系统&#xff0c;专用于通过使用行业标准协议…...

Rust编码的信息窃取恶意软件源代码公布,专家警告已被利用

黑客论坛上发布了一个 用Rust编码的信息窃取恶意软件源代码 &#xff0c;安全分析师警告&#xff0c;该恶意软件已被积极用于攻击。 该恶意软件的开发者称&#xff0c;仅用6个小时就开发完成&#xff0c;相当隐蔽&#xff0c; VirusTotal的检测率约为22% 。 恶意软件开发者在…...

diffusers编写自己的推理管道

英文文献&#xff1a;Stable Diffusion with &#x1f9e8; Diffusers 编写自己的推理管道 最后&#xff0c;我们展示了如何使用diffusers. 编写自定义推理管道是对diffusers库的高级使用&#xff0c;可用于切换某些组件&#xff0c;例如上面解释的 VAE 或调度程序。 例如&a…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

【论文阅读28】-CNN-BiLSTM-Attention-(2024)

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...